Studi Kasus: Automasi Deploy Aplikasi React (Vite) ke Shared Hosting menggunakan GitHub Actions
Apakah kamu masih melakukan proses deploy website secara manual? Mulai dari build di lokal, membuka aplikasi FTP client, lalu memindahkan file satu per satu ke hosting?
Jika iya, sebenarnya ada cara yang lebih rapi, efisien, dan modern tanpa perlu VPS atau konfigurasi server yang rumit.
Pada artikel ini, kita akan membahas bagaimana memanfaatkan GitHub Actions sebagai alat otomasi untuk membantu proses build dan pengiriman hasil build aplikasi React (Vite) ke shared hosting secara terstruktur.
Catatan: Artikel ini ditujukan untuk tujuan edukasi pengembangan perangkat lunak dan penerapan praktik otomasi yang aman pada proyek milik sendiri atau yang memiliki izin resmi.
Mengapa Menggunakan GitHub Actions?
Pengguna shared hosting sering kali merasa terbatas karena tidak memiliki akses penuh ke lingkungan hosting. Namun, keterbatasan tersebut bisa diatasi dengan pendekatan yang tepat.
Dengan GitHub Actions, proses seperti instalasi dependensi dan build aplikasi dapat dijalankan di lingkungan terpisah (CI), sehingga hosting hanya menerima hasil akhir yang sudah siap digunakan.
- Otomatis: Setiap perubahan kode dapat langsung diproses tanpa langkah manual.
- Lebih aman: Informasi konfigurasi tidak perlu disimpan langsung di dalam kode.
- Efisien: Proses build dilakukan di lingkungan cloud.
GitHub Actions dapat digunakan baik pada repository publik maupun privat dengan kuota bawaan yang disediakan oleh GitHub untuk akun gratis.
Gambaran Alur Proses
- Developer melakukan perubahan kode dan mengirimkannya ke repository.
- GitHub Actions menjalankan proses build secara otomatis.
- Hasil build dikirim ke direktori tujuan di shared hosting.
- Website langsung terbarui tanpa proses manual tambahan.
Pendekatan ini cocok untuk proyek personal maupun tim kecil yang ingin proses deployment lebih konsisten dan minim kesalahan.
Langkah 1: Menyiapkan Akses Hosting
Langkah awal adalah menyiapkan akses khusus pada hosting yang akan digunakan untuk menerima hasil build. Disarankan tidak menggunakan akses utama, melainkan akun terpisah dengan hak terbatas agar lebih aman.
Penyesuaian detail dapat disesuaikan dengan panel hosting yang digunakan (cPanel, sPanel, atau sejenisnya).
Tips: Pastikan direktori tujuan sudah tersedia dan memiliki izin akses yang sesuai agar proses pengiriman file berjalan lancar.
Langkah 2: Menyimpan Konfigurasi Secara Aman
Untuk menjaga keamanan, informasi konfigurasi sebaiknya tidak ditulis langsung di dalam kode proyek.
GitHub menyediakan fitur secure variables yang memungkinkan kita menyimpan nilai konfigurasi secara aman dan hanya digunakan saat proses otomasi berjalan.
- Alamat layanan hosting
- Nama akun akses
- Konfigurasi aplikasi pengganti file environment
Dengan pendekatan ini, kode tetap bersih dan aman meskipun repository bersifat publik.
Langkah 3: Membuat Workflow Otomasi
Selanjutnya, kita membuat file workflow yang berisi instruksi proses otomasi yang akan dijalankan setiap kali ada perubahan pada branch utama.
Secara umum, workflow ini akan:
- Mengambil kode terbaru
- Menyiapkan environment runtime
- Menjalankan proses build
- Mengirim hasil build ke hosting
Detail konfigurasi workflow dapat disesuaikan dengan kebutuhan masing-masing proyek.
Langkah 4: Menjalankan dan Memantau Proses
Setelah workflow disiapkan, kamu cukup melakukan perubahan kode seperti biasa dan mengirimkannya ke repository.
GitHub Actions akan menjalankan proses otomasi secara otomatis. Kamu dapat memantau statusnya melalui tab Actions pada repository.
Jika proses berjalan sukses, website di shared hosting akan langsung menggunakan versi terbaru dari aplikasi.
Mengapa Pendekatan Ini Efektif?
- Proses deployment lebih konsisten
- Risiko kesalahan manual berkurang
- Hosting tetap ringan
- Workflow lebih rapi dan mudah dikembangkan
Penutup
Pendekatan ini tidak terbatas pada satu jenis proyek saja. Kamu dapat menerapkannya pada berbagai stack frontend seperti React, Vue, maupun Angular.
Dengan memindahkan proses build dan otomasi ke pipeline CI, beban kerja pada hosting dapat diminimalkan. Hasilnya, penggunaan resource menjadi lebih efisien, proses deployment lebih konsisten, dan pengelolaan aplikasi menjadi lebih terstruktur seiring berkembangnya proyek.
Posting Komentar