React/Vite: setup tambahan (Environment, Rollback)

Lanjutan dari deploy-react.md. Karena React/Vite hasil build itu murni file statis (tidak ada proses backend yang jalan di server), topik "extra"-nya beda kategori dari Laravel/FastAPI — bukan soal queue/scheduler, tapi soal ngatur environment & keamanan proses deploy manual.

1. Environment terpisah (staging vs production)

Vite baca file .env.<mode> sesuai flag --mode saat build — jadi satu repo bisa punya konfigurasi beda (VITE_API_URL, dll) buat staging vs production tanpa ubah kode.

.env.production

VITE_API_URL=https://api.example.com

.env.staging

VITE_API_URL=https://api-staging.example.com

npm run build -- --mode staging      # hasil pakai .env.staging
npm run build                        # default --mode production, pakai .env.production

Deploy ke folder & subdomain terpisah, pakai user reactapp yang sama (lihat deploy-react.md Langkah 1):

rsync -avz --delete dist/ user@server:/home/reactapp/staging/
ssh user@server 'sudo chown -R reactapp:reactapp /home/reactapp/staging && sudo chmod -R o+rX /home/reactapp/staging'

Nginx server block baru, root mengarah ke /home/reactapp/staging, server_name staging.example.com.

Opsional — staging biasanya tidak perlu terbuka ke publik/search engine, kunci pakai HTTP basic auth:

sudo apt install apache2-utils -y
sudo htpasswd -c /etc/nginx/.htpasswd-staging admin

Tambahkan ke server block staging:

auth_basic "Staging";
auth_basic_user_file /etc/nginx/.htpasswd-staging;

2. Rollback cepat

Setup rsync --delete langsung ke folder yang sama artinya kalau ada build yang rusak ter-deploy, tidak ada cara cepat balik ke versi sebelumnya selain build ulang dari commit lama. Pola release folder + symlink (ala Capistrano) bikin rollback tinggal ganti symlink, instan tanpa build ulang:

TS=$(date +%Y%m%d%H%M%S)
rsync -avz dist/ user@server:/home/reactapp/releases/$TS/
ssh user@server "sudo chown -R reactapp:reactapp /home/reactapp/releases/$TS && sudo chmod -R o+rX /home/reactapp/releases/$TS && ln -sfn /home/reactapp/releases/$TS /home/reactapp/current"

Nginx root diarahkan ke symlink-nya, bukan folder langsung: root /home/reactapp/current;

Rollback ke release sebelumnya (tanpa rebuild sama sekali):

ssh user@server 'ln -sfn /home/reactapp/releases/<timestamp-lama> /home/reactapp/current'

Bersihin release lama biar tidak numpuk (simpan 5 terakhir misalnya):

ssh user@server 'cd /home/reactapp/releases && ls -1t | tail -n +6 | xargs -r rm -rf'

3. Opsional: error tracking

Kalau mau tau error yang kejadian di browser user (bukan cuma pas development), ada layanan kayak Sentry yang punya free tier buat project kecil — sifatnya opsional, skip aja kalau tidak butuh atau tidak mau tergantung layanan pihak ketiga:

npm install @sentry/react

import * as Sentry from '@sentry/react'

Sentry.init({ dsn: import.meta.env.VITE_SENTRY_DSN })

VITE_SENTRY_DSN diisi lewat .env.production seperti pola di Langkah 1, jadi staging & production bisa dipisah project Sentry-nya juga kalau mau.