Tutorial #12: Testing dan Deployment Aplikasi Tabungan Bank
Halo para arsitek aplikasi! Hari ini adalah hari besar terakhir dalam seri tutorial kita. Kita akan uji coba semua fitur, lalu menaikkan aplikasi ke internet (deployment) agar bisa diakses oleh nasabah sungguhan. Siap jadi developer sejati?
Yang akan kita lakukan:
- ✅ Uji coba semua fitur (testing) dari awal sampai akhir.
- ✅ Mempersiapkan aplikasi untuk production (build React, optimasi Laravel).
- ✅ Memilih hosting dan domain.
- ✅ Deploy backend Laravel ke shared hosting / VPS.
- ✅ Deploy frontend React hasil build ke hosting.
- ✅ Konfigurasi .htaccess untuk routing SPA.
- ✅ Testing setelah deploy dan troubleshooting.
Bagian 1: Uji Coba Fitur (Testing) Sebelum Deploy
Sebelum aplikasi kita naik ke server publik, kita harus pastikan semuanya berfungsi dengan baik. Ayo kita tes satu per satu!
Checklist Pengujian
| No | Fitur | Yang Diuji | Status |
|---|---|---|---|
| 1 | Register Nasabah | Bisa daftar, langsung dapat nomor rekening | ✅ |
| 2 | Login Nasabah | Email/password benar → masuk dashboard, salah → error | ✅ |
| 3 | Dashboard Nasabah | Muncul saldo, no.rekening, tabel mutasi | ✅ |
| 4 | Login Petugas | Bisa login, akses endpoint deposit/withdraw | ✅ |
| 5 | Login Admin | Bisa login, akses manajemen user | ✅ |
| 6 | Transaksi Setor | Petugas bisa setor, saldo nasabah bertambah | ✅ |
| 7 | Transaksi Tarik | Petugas bisa tarik, saldo berkurang, cek saldo cukup | ✅ |
| 8 | Logout | Token terhapus, redirect ke login | ✅ |
| 9 | Notifikasi SweetAlert | Muncul di semua aksi penting | ✅ |
| 10 | Proteksi Route | Halaman dashboard tidak bisa diakses tanpa login | ✅ |
Bagian 2: Persiapan Aplikasi untuk Production
Sebelum diupload ke server, aplikasi kita perlu "dikemas" khusus untuk production. Ibarat mau mudik, kita harus packing dengan rapi!
A. Build Frontend React
Di folder bank-frontend, jalankan perintah sakti ini:
npm run build
Perintah ini akan membuat folder build (atau dist kalau pakai Vite) yang berisi file-file statis: HTML, CSS, JavaScript yang sudah diminifikasi (diperkecil ukurannya) [citation:1][citation:3][citation:10].
Hasil build ini siap untuk diupload ke hosting. File-file ini tidak memerlukan Node.js di server karena sudah berupa file statis [citation:9].
B. Optimasi Laravel untuk Production
Di folder bank-backend, jalankan perintah-perintah berikut untuk mengoptimalkan performa:
php artisan config:cache # Cache konfigurasi php artisan route:cache # Cache routing php artisan view:cache # Cache view php artisan optimize # Optimasi umum
Jangan lupa atur file .env untuk mode production:
APP_ENV=production APP_DEBUG=false APP_URL=https://domainkamu.com
Bagian 3: Memilih Hosting dan Domain
Untuk aplikasi kita, ada beberapa pilihan hosting:
- Shared Hosting (cPanel): Murah, mudah, cocok untuk pemula. Contoh: Hostinger, Niagahoster, DomaiNesia. Pastikan mendukung PHP 8.1+ dan MySQL [citation:1].
- VPS (Virtual Private Server): Lebih powerful, tapi butuh konfigurasi lebih. Contoh: DigitalOcean, Vultr, AWS [citation:6][citation:7].
Untuk tutorial ini, kita asumsikan menggunakan shared hosting dengan cPanel karena paling ramah pemula.
Bagian 4: Deploy Backend Laravel ke Hosting
Langkah 1: Upload File Laravel
Upload seluruh folder bank-backend ke hosting. Biasanya ditaruh di folder public_html atau subfolder. Struktur yang disarankan [citation:1]:
public_html/ ├── index.php # dari Laravel/public/index.php ├── .htaccess # dari Laravel/public/.htaccess ├── react/ # nanti untuk frontend └── laravel-core/ # folder Laravel (app, bootstrap, config, dll)
Caranya: upload file via File Manager di cPanel atau via FTP [citation:3][citation:5].
Langkah 2: Atur Ulang Path di index.php
Edit file public_html/index.php (yang dari Laravel/public). Sesuaikan path ke folder laravel-core:
require __DIR__.'/laravel-core/vendor/autoload.php'; $app = require_once __DIR__.'/laravel-core/bootstrap/app.php';
Langkah 3: Konfigurasi .env di Server
Buat file .env baru di folder laravel-core dengan isi yang sesuai dengan server [citation:1]:
APP_NAME="Bank Tabungan" APP_ENV=production APP_DEBUG=false APP_URL=https://domainkamu.com DB_CONNECTION=mysql DB_HOST=localhost DB_PORT=3306 DB_DATABASE=nama_database DB_USERNAME=username_database DB_PASSWORD=password_database SANCTUM_STATEFUL_DOMAINS=domainkamu.com SESSION_DOMAIN=.domainkamu.com
Langkah 4: Setting Database
Buat database di cPanel (misal: bank_tabungan), lalu import file SQL dari lokal. Bisa juga jalankan migration via terminal (jika ada akses SSH) [citation:6].
Langkah 5: Set Permission
Pastikan folder storage dan bootstrap/cache bisa ditulis oleh server. Di cPanel, bisa set permission 775 [citation:1].
Langkah 6: Konfigurasi .htaccess
Pastikan public_html/.htaccess berisi aturan untuk mengarahkan ke Laravel [citation:1][citation:2]:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.php [L]
</IfModule>
Bagian 5: Deploy Frontend React ke Hosting
Langkah 1: Upload Hasil Build
Upload isi folder build (hasil npm run build) ke folder public_html/react/ [citation:1][citation:10].
Strukturnya jadi:
public_html/ ├── index.php (Laravel) ├── react/ │ ├── index.html │ ├── assets/ │ ├── js/ │ └── css/
Langkah 2: Buat .htaccess di Folder React
Agar React Router bisa bekerja (tidak 404 saat refresh halaman), buat file .htaccess di folder public_html/react/ dengan isi [citation:3][citation:10]:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /react/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /react/index.html [L]
</IfModule>
Langkah 3: Update URL API di React
Pastikan di kode React, URL API mengarah ke domain backend (misal https://domainkamu.com/api). Bisa diatur di file konfigurasi atau environment variable [citation:5].
Jika pakai environment variable, saat build pastikan nilainya sudah benar [citation:8].
Bagian 6: Konfigurasi Routing Laravel untuk Melayani React
Di routes/web.php, tambahkan fallback route untuk mengarahkan ke file index.html React [citation:1]:
Route::get('/{any}', function () {
return file_get_contents(public_path('react/index.html'));
})->where('any', '.*');
Ini akan membuat semua request yang tidak dikenali Laravel dilayani oleh React (untuk frontend nasabah).
Bagian 7: Testing Setelah Deploy
Setelah semua terupload dan terkonfigurasi, saatnya uji coba!
- Buka
https://domainkamu.com→ harusnya muncul halaman React (home). - Coba buka
/login→ muncul form login. - Login sebagai nasabah → masuk dashboard, lihat saldo.
- Coba refresh di halaman dashboard → tidak boleh 404 (karena .htaccess React).
- Uji coba API:
https://domainkamu.com/api/loginvia Postman → harusnya bisa.
Bagian 8: Troubleshooting Umum
| Masalah | Penyebab | Solusi |
|---|---|---|
| Error 500 (Internal Server Error) | Permission salah, atau .env tidak sesuai | Cek log error di folder storage/logs, set permission storage [citation:6] |
| 404 saat refresh halaman React | .htaccess tidak ada atau salah | Pastikan .htaccess di folder react sudah benar [citation:3][citation:10] |
| API error 401 (Unauthorized) | Token tidak terkirim, atau SANCTUM_STATEFUL_DOMAINS salah | Cek header Authorization, pastikan domain sudah di .env |
| Asset React tidak muncul (CSS/JS 404) | Path di index.html salah | Pastikan di package.json ada "homepage" atau base URL [citation:10] |
| Database connection error | Kredensial DB di .env salah | Periksa nama database, username, password [citation:6] |
Bonus: CI/CD dengan GitHub Actions (Otomatis Deploy)
Buat yang ingin lebih modern, kita bisa setup auto-deploy setiap kali push ke GitHub menggunakan GitHub Actions [citation:8].
Buat file .github/workflows/deploy.yml di project React:
name: Deploy React to Hosting
on:
push:
branches: [main]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 18
- run: npm ci
- run: npm run build
env:
VITE_API_URL: ${{ secrets.VITE_API_URL }}
- uses: SamKirkland/FTP-Deploy-Action@v4.3.4
with:
server: ${{ secrets.FTP_SERVER }}
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.FTP_PASSWORD }}
local-dir: ./dist/
server-dir: /public_html/react/
Jangan lupa tambahkan secrets di repository GitHub: FTP_SERVER, FTP_USERNAME, FTP_PASSWORD, VITE_API_URL [citation:8].
Kesimpulan dan Penutup
Selamat! Kamu telah berhasil:
- ✅ Membangun aplikasi bank tabungan dari nol.
- ✅ Membuat backend Laravel dengan multi-level login.
- ✅ Membangun frontend React dengan Bootstrap dan SweetAlert.
- ✅ Mengintegrasikan keduanya melalui API.
- ✅ Menguji semua fitur dan mendeploy ke hosting sungguhan.
Sekarang aplikasi tabungan bank-mu sudah bisa diakses oleh pengguna di seluruh dunia! Kamu sudah resmi menjadi full-stack developer. Bangga dong!
Referensi dan Sumber Belajar
- Dokumentasi Laravel: laravel.com
- Dokumentasi React: react.dev
- Bootstrap: getbootstrap.com
- SweetAlert2: sweetalert2.github.io
- Deployment guide: berbagai sumber [citation:1][citation:3][citation:6]