Deploy Projek ke Hosting Menggunakan FTP dan Github Actions

Panduan ini menjelaskan cara untuk mengotomatiskan proses deployment projek ke server hosting menggunakan FTP dan Github Actions, sehingga setiap perubahan pada repository Github dapat langsung diterapkan ke server tanpa perlu melakukan upload manual.

Disclaimer: Panduan ini dibuat untuk keperluan hosting berbasis FTP ke server internal yang tidak menyediakan akses SSH atau kontrol penuh ke server. Metode ini cocok untuk projek sederhana seperti website statis (HTML, CSS, JS) atau aplikasi berbasis PHP (termasuk Laravel) yang tidak memerlukan konfigurasi server khusus. Jika projek memerlukan konfigurasi server khusus, akses ke terminal, atau instalasi perangkat lunak tambahan, metode ini mungkin tidak sesuai.

Glosarium

Istilah	Definisi
FTP (File Transfer Protocol)	Protokol untuk transfer file ke server
FTP Client	Aplikasi yang digunakan untuk terhubung ke FTP server
Git	Sistem version control untuk melacak perubahan source code
Github	Platform hosting repository Git berbasis cloud
Github Actions	Fitur otomatisasi dari Github untuk menjalankan workflow CI/CD
CI/CD (Continuous Integration/Continuous Deployment)	Metode otomatisasi build, testing, dan deployment aplikasi
Workflow	Rangkaian proses otomatis yang dijalankan oleh Github Actions
YAML	Format file yang digunakan untuk konfigurasi workflow Github Actions
Secret	Variabel terenkripsi di Github untuk menyimpan data sensitif

Yang Harus Disiapkan

1. Projek yang sudah berjalan di komputer lokal.
2. Projek sudah diunggah ke Github.
3. FTP Client (Misalnya WinSCP). Jika belum ada download di Official Website WinSCP.
4. Akun FTP (berisi hostname, username, password).
5. Akun database (berisi nama database, username, password).

Menyimpan Data FTP di Github

Agar password aman, data FTP tidak boleh ditaruh di dalam kode. Berikut caranya:

1. Buka repository di Github.
2. Klik menu Settings.
3. Pilih Secrets and variables → Actions.
4. Klik New repository secret.
5. Tambahkan data berikut satu per satu:

Nama Secret	Isi
FTP_HOSTNAME	Hostname FTP
FTP_USERNAME	Username FTP
FTP_PASSWORD	Password FTP

Simpan semua data tersebut.

Menyimpan data FTP di Github

Membuat File Github Actions

Dilakukan agar setiap kali ada perubahan di repository Github, website di hosting otomatis terupdate.

1. Di dalam projek, buat folder .github/workflows.
2. Buat file main.yml.
3. Isi file tersebut dengan kode berikut (sesuaikan branch jika bukan main):
   Untuk projek html/css/js/php:

   name: Deploy website via FTP
   on:
     push:
       branches:
         - main
   jobs:
     web-deploy:
       name: Deploy website
       runs-on: ubuntu-latest
       steps:
         - name: Checkout Repository
           uses: actions/checkout@v6
   
         - name: Sync files via FTP
           uses: SamKirkland/FTP-Deploy-Action@v4.3.6
           with:
             server: ${{ secrets.FTP_HOSTNAME }}
             username: ${{ secrets.FTP_USERNAME }}
             password: ${{ secrets.FTP_PASSWORD }}
             server-dir: public/
             exclude: |
               .git/**
               node_modules/**

   Untuk projek laravel:

   name: Deploy laravel via FTP
   on:
     push:
       branches:
         - main
   
   jobs:
     web-deploy:
       name: Deploy website
       runs-on: ubuntu-latest
       steps:
         - name: Set up PHP
           uses: shivammathur/setup-php@v2
           with:
             php-version: '8.4'
            
         - name: Set up Node.js
           uses: actions/setup-node@v6
           with:
             node-version: '24'
   
         - name: Checkout Repository
           uses: actions/checkout@v6
   
         - name: Get Composer Cache Directory
           id: composer-cache
           run: |
             echo "dir=$(composer config cache-files-dir)" >> $GITHUB_OUTPUT
   
         - uses: actions/cache@v5
           with:
             path: ${{ steps.composer-cache.outputs.dir }}
             key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
             restore-keys: |
               ${{ runner.os }}-composer-
   
         - name: Install Composer Dependencies
           run: composer install --optimize-autoloader --no-dev --no-interaction
   
         - name: Build Project
           run: npm install && npm run build
   
         - name: Sync files via FTP
           uses: SamKirkland/FTP-Deploy-Action@v4.3.6
           with:
             server: ${{ secrets.FTP_HOSTNAME }}
             username: ${{ secrets.FTP_USERNAME }}
             password: ${{ secrets.FTP_PASSWORD }}
             exclude: |
               .git/**
               node_modules/**

4. Lakukan commit dan push ke Github.

Akses Hosting melalui FTP Client WinSCP

Jika ingin mengakses hosting melalui FTP client WinSCP, berikut caranya:

1. Buka aplikasi WinSCP.
2. Pada tampilan awal, isi data berikut:
   • File Protokol: FTP
   • Hostname: (isi dengan FTP_HOSTNAME)
   • Port number: 21
   • Username: (isi dengan FTP_USERNAME)
   • Password: (isi dengan FTP_PASSWORD)
3. Klik Login.
   • Panel kiri: file di komputer lokal
   • Panel kanan: file di hosting

Tampilan WinSCP

Catatan: Gambar di atas adalah contoh tampilan WinSCP untuk projek Laravel. Untuk projek html/css/js/php, file projek otomatis terupload ke folder public/.

Upload File dengan WinSCP

1. Di panel kiri, buka folder file yang akan diunggah.
2. Di panel kanan, buka folder tujuan di hosting.
3. Drag and drop file dari panel kiri ke panel kanan.
4. Tunggu proses upload selesai.

Membuat file di WinSCP

1. Di panel kanan, klik kanan pada area kosong.
2. Pilih New → File.
3. Beri nama file sesuai kebutuhan.

Edit file di WinSCP

1. Di panel kanan, klik kanan pada file yang akan diedit.
2. Pilih Edit.
3. Lakukan perubahan pada file.

Menghapus file di WinSCP

1. Di panel kanan, pilih file yang akan dihapus.
2. Klik kanan pada file tersebut.
3. Pilih Delete.

Proses Deploy Otomatis

Setelah konfigurasi selesai, setiap update cukup lakukan perintah berikut:

git add .
git commit -m "pesan commit"
git push origin main

Github Actions akan otomatis berjalan. Untuk memastikan proses deploy berhasil:

1. Buka Github.
2. Klik tab Actions.
3. Pastikan proses berhasil (tanda centang hijau). Pada pertama kali Github Actions dijalankan, biasanya memakan waktu lebih lama.
4. Jika berhasil, website otomatis terupdate di hosting.

Halaman Github Actions

Khusus Laravel

Konfigurasi file .env di Hosting

File .env tidak boleh diunggah ke Github. Buat file .env lewat FTP.

1. Akses hosting melalui WinSCP.
2. Buat file .env atau salin file .env.example. Jika file .env.example tidak muncul pada WinSCP, tekan Ctrl+Alt+H untuk menampilkan file tersembunyi seperti .env.example.
3. Isi dengan konfigurasi berikut:

   APP_ENV=production
   APP_DEBUG=false
   APP_URL=https://domainprojek.info
   # jika menggunakan mysql/mariadb
   DB_CONNECTION=mysql
   DB_HOST=localhost
   DB_DATABASE=nama_database
   DB_USERNAME=username_database
   DB_PASSWORD=password_database

   Pastikan:
   • APP_DEBUG bernilai false, kecuali jika ingin menampilkan pesan error pada aplikasi.
   • APP_KEY sudah tersedia. Jika belum ada, jalankan perintah php artisan key:generate di komputer lokal dan salin hasilnya ke file .env di hosting.
   • Sesuaikan konfigurasi lainnya sesuai kebutuhan projek.

Migrasi Database

Jika projek menggunakan database mysql/mariadb, maka perlu melakukan migrasi database dari lokal ke hosting. Berikut langkah-langkahnya:

1. Ekspor database dari lokal.
   a. Buka phpmyadmin di komputer lokal.
   b. Pilih database projek.
   c. Klik menu Export.
   d. Pilih metode Quick.
   e. Pilih format SQL.
   f. Klik Export.
   g. Simpan file .sql.

2. Import database ke hosting.
   a. Masuk ke phpmyadmin pada hosting melalui tautan bbpmpjabar.info/phpmyadmin.
   b. Login dengan akun database yang telah diberikan.
   c. Pilih database projek.
   d. Klik menu Import.
   e. Klik Choose File.
   f. Pilih file .sql yang tadi diekspor.
   g. Klik Import.
   Jika berhasil, semua tabel akan muncul di database hosting.