Tutorial CI/CD Shared Hosting: Deploy React Otomatis dengan GitHub Actions

README.md

Studi Kasus: Automasi Deploy Aplikasi React (Vite) ke cPanel via Github Actions

Apakah Anda masih melakukan deploy website secara manual? Build di lokal, buka FileZilla, lalu drag-and-drop file ke server? Jika iya, saatnya Anda beralih ke cara yang lebih modern, efisien, dan tentunya gratis.

Dalam artikel ini, saya akan membahas cara membangun pipeline CI/CD (Continuous Integration/Continuous Deployment) yang powerful menggunakan GitHub Actions untuk men-deploy aplikasi React ke Shared Hosting biasa melalui protokol FTP.

Mengapa GitHub Actions?

Bagi pengguna Shared Hosting (cPanel), seringkali kita merasa terbatas karena tidak bisa menginstall tools DevOps canggih seperti di VPS. Namun, dengan GitHub Actions, keterbatasan itu hilang. GitHub yang akan melakukan "kerja berat" (install dependency, build, test), lalu hasilnya tinggal dikirim ke hosting Anda.

• Otomatis: Sekali push ke GitHub, website langsung terupdate.
• Aman: Tidak perlu menyimpan file sensiitf (.env) di repo.
• Hemat Kuota: GitHub memberikan 2000 menit build gratis per bulan untuk private repo.

GitHub Actions bisa berjalan baik di repository Public maupun Private. Namun, ada sedikit perbedaan batasan kuota (Minutes) jika akun Anda adalah akun Gratis (Free Plan):

• Repo Public: Gratis tanpa batas (unlimited). 
• Repo Private: Diberi jatah 2.000 menit per bulan (sekitar 33 jam waktu build).

Untuk workflow deploy React yang tadi kita buat, biasanya prosesnya memakan waktu sekitar 1-3 menit sekali jalan. Jadi dengan kuota 2.000 menit, Anda bisa melakukan deploy sekitar 600 - 1.000 kali per bulan. Itu jumlah yang sangat banyak untuk penggunaan pribadi atau tim kecil.

Langkah 1: Persiapan Akun FTP di cPanel

Langkah pertama adalah membuat "pintu masuk" khusus untuk GitHub Actions. Jangan gunakan akun FTP utama (root) demi keamanan.

1. Login ke cPanel/sPanel/Lainnya > FTP Accounts.
2. Untuk langkah selanjutnya bisa ikuti tampilan yang ada di hosting Anda

Tips: Jika Anda mengalami error FTPError: 421 Home directory not available, itu tandanya path direktori di cPanel salah atau foldernya belum dibuat. Pastikan path mengarah ke folder yang valid di File Manager.

Langkah 2: Amankan FTP Akses dan .Env Data dengan GitHub Secrets

Jangan pernah menulis password FTP atau API Key langsung di dalam kode! Gunakan fitur Secrets.

1. Buka repository GitHub Anda.
2. Masuk ke Settings > Secrets and variables > Actions.
3. Klik New repository secret dan tambahkan:
   • FTP_SERVER: Alamat FTP (misal: ftp.domainanda.com).
   • FTP_USERNAME: User yang baru dibuat tadi.
   • FTP_PASSWORD: Password FTP.
   • VITE_API_URL: URL Backend (pengganti isi .env, tambahkan semua yang ada didalam .env ke GitHub Secrets).

Langkah 3: Membuat Workflow File

Buat file baru di root project Anda dengan nama .github/workflows/deploy.yml. Isi file ini adalah instruksi untuk GitHub:

name: Build and Deploy
on:
  push:
    branches:
      - main  # Trigger setiap ada push ke branch main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      # 1. Ambil kodingan terbaru
      - name: Checkout Code
        uses: actions/checkout@v4
      # 2. Siapkan Node.js
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      # 3. Install Dependencies (Otomatis deteksi pnpm/npm/yarn)
      - name: Install Dependencies
        run: npm ci
      # 4. Build Project (Inject Variable Rahasia di sini!)
      - name: Build Project
        run: npm run build
        env:
          # Variabel .env dimasukin lewat sini agar aman
          VITE_API_URL: ${{ secrets.VITE_API_URL }}
      # 5. Kirim ke Hosting via FTP
      - name: Deploy to FTP
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./dist/    # Folder hasil build React (Vite)
          # server-dir: ./      # Upload ke root direktori user FTP

Langkah 4: Push dan Lihat Keajaiban

Sekarang, setiap kali Anda melakukan commit dan push ke GitHub:

git push origin main

GitHub Action akan otomatis berjalan. Anda bisa memantau prosesnya di tab Actions di repository GitHub Anda. Jika sukses, website di shared hosting Anda akan otomatis terupdate dalam hitungan menit.

Mengapa Teknik Ini Powerfull?

Anda mendapatkan keamanan enterprise-grade (Secrets), kecepatan (build di server cloud), dan kemudahan (tanpa copy-paste manual), semuanya tanpa biaya tambahan sepeserpun di server shared hosting Anda.

Sebagai penutup, pendekatan ini tidak hanya berlaku untuk satu studi kasus saja. Kamu bisa menerapkannya pada berbagai jenis proyek, mulai dari Vue, Angular, hingga proses build Docker yang dijalankan langsung melalui GitHub Actions. Dengan memindahkan proses build dan otomasi ke CI, beban kerja di server produksi bisa dikurangi secara signifikan. Hasilnya, server jadi lebih ringan, resource lebih hemat, dan proses deployment pun menjadi lebih rapi, konsisten, serta mudah dikelola seiring berkembangnya aplikasi.