Studi Kasus #23: Aplikasi Wisata Indonesia – Deployment Backend ke Platform Cloud

Halo, calon full-stack developer!

Selamat! Kamu telah berhasil membangun backend yang lengkap dengan Express.js, MySQL, dan berbagai fitur seperti autentikasi JWT, upload file, dan CRUD. Sekarang saatnya aplikasi kamu online dan bisa diakses oleh siapa pun di internet. Di tutorial ini, kita akan mendeploy backend ke platform cloud gratis: Render untuk aplikasi Node.js, dan Aiven untuk database MySQL cloud.

Fitur yang akan kita lakukan:

• Menyiapkan environment variables untuk production.
• Membuat database MySQL di Aiven (gratis).
• Menghubungkan backend ke database cloud.
• Mendeploy aplikasi ke Render dengan integrasi GitHub.
• Menguji API yang sudah online.

Mari kita mulai!

Langkah 1: Persiapan Kode Backend

Sebelum deploy, pastikan kode backend kamu sudah siap untuk production. Beberapa hal yang perlu diperiksa:

1.1. Menggunakan Environment Variables

Pastikan semua konfigurasi sensitif (database, JWT secret, dll) diambil dari environment variables, bukan hardcode. Di file config/db.js kita sudah menggunakan process.env [citation:9]. Contoh:

const pool = mysql.createPool({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0
});

1.2. Menambahkan Skrip Start di package.json

Pastikan di package.json ada skrip start untuk menjalankan server:

"scripts": {
  "start": "node app.js",
  "dev": "nodemon app.js"
}

1.3. Membuat File .gitignore

Pastikan folder node_modules dan file .env tidak ikut ter-commit ke GitHub. Isi .gitignore:

node_modules/
.env
.DS_Store
uploads/

Catatan: Folder uploads kita ignore karena file gambar akan disimpan di server, tapi untuk production nanti kita perlu solusi penyimpanan permanen (bisa gunakan cloud storage seperti AWS S3). Untuk sementara, kita biarkan dulu.

1.4. Menyesuaikan Koneksi Database untuk SSL

Database cloud seperti Aiven memerlukan koneksi SSL. Kita perlu memodifikasi konfigurasi koneksi MySQL untuk mendukung SSL [citation:4]. Ubah config/db.js menjadi:

const mysql = require('mysql2');
require('dotenv').config();

const pool = mysql.createPool({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
  port: process.env.DB_PORT || 3306,
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0,
  ssl: process.env.DB_SSL === 'true' ? {
    rejectUnauthorized: true
  } : false
});

const promisePool = pool.promise();
module.exports = promisePool;

Nanti kita akan set DB_SSL=true di environment variable.

Langkah 2: Membuat Database di Aiven (Gratis)

Aiven menyediakan database MySQL gratis dengan kapasitas 1GB, cukup untuk proyek skala kecil [citation:10].

2.1. Daftar Akun Aiven

1. Buka aiven.io dan daftar (bisa dengan akun Google atau GitHub).
2. Setelah login, kamu akan mendapatkan kredit $300 untuk 30 hari percobaan. Tenang, kita akan pakai yang gratis.

2.2. Membuat Service MySQL

1. Klik tombol "Create a new service" di pojok kanan atas [citation:10].
2. Pilih MySQL sebagai service type.
3. Pilih cloud provider (bisa pilih Google Cloud, AWS, atau lainnya).
4. Pilih plan "Hobbyist" (ini yang gratis, dengan 1GB storage) [citation:10].
5. Pilih region terdekat (misal Singapore).
6. Beri nama service (misal wisata-db).
7. Klik "Create Service".

Tunggu beberapa saat hingga service selesai diprovisi. Setelah aktif, masuk ke halaman detail service.

2.3. Mengambil Connection String

Di halaman overview, cari bagian "Service URI" atau "Connection Information". Aiven menyediakan URI yang berisi semua informasi koneksi [citation:10]. Contoh:

mysql://avnadmin:password123@mysql-wisata-db.aivencloud.com:12345/defaultdb?ssl-mode=REQUIRED

Dari URI ini, kita bisa mengambil informasi:

• Host: mysql-wisata-db.aivencloud.com
• Port: 12345
• User: avnadmin
• Password: password123
• Database: defaultdb

Catat informasi ini, kita akan gunakan nanti.

💡 Tips: Kamu juga bisa menggunakan FreeMySQLHosting jika ingin alternatif yang lebih sederhana, tapi Aiven lebih profesional dan stabil [citation:9].

Langkah 3: Mendeploy Backend ke Render

Render adalah platform PaaS yang menyediakan free tier untuk hosting web service [citation:1][citation:4].

3.1. Push Kode ke GitHub

Pastikan kode backend sudah di-push ke repository GitHub. Jika belum:

git init
git add .
git commit -m "final backend"
git branch -M main
git remote add origin https://github.com/username/wisata-backend.git
git push -u origin main

3.2. Buat Akun Render dan Hubungkan GitHub

1. Buka render.com dan daftar (bisa dengan akun GitHub).
2. Setelah login, klik tombol "New +" dan pilih "Web Service" [citation:1].
3. Hubungkan akun GitHub kamu dan pilih repository backend yang sudah di-push.

3.3. Konfigurasi Web Service

Isi formulir dengan informasi berikut [citation:4][citation:9]:

Field	Nilai
Name	wisata-backend (atau nama yang kamu inginkan)
Region	Pilih yang terdekat (misal Singapore)
Branch	main
Runtime	Node (akan otomatis terdeteksi)
Build Command	npm install
Start Command	npm start
Plan	Free

3.4. Menambahkan Environment Variables

Scroll ke bagian "Environment Variables". Tambahkan semua variabel yang ada di file .env lokal kamu, dengan nilai yang sudah disesuaikan dengan database Aiven [citation:1][citation:9]:

PORT=3000
JWT_SECRET=rahasia_super_aman_12345
DB_HOST=mysql-wisata-db.aivencloud.com
DB_PORT=12345
DB_USER=avnadmin
DB_PASSWORD=password123
DB_NAME=defaultdb
DB_SSL=true

PENTING: Jangan gunakan nilai hardcode di atas, ganti dengan nilai dari database Aiven kamu.

Render juga menyediakan fitur "Add from .env" yang memungkinkan kamu menempelkan isi file .env sekaligus [citation:1].

3.5. Membuat Disk Persistent (untuk folder uploads)

Karena aplikasi kita menyimpan gambar di folder uploads, kita perlu disk persistent agar file tidak hilang saat redeploy. Render mendukung penambahan disk [citation:5].

Di bagian "Advanced" pada saat pembuatan service, tambahkan Disk dengan konfigurasi:

• Name: uploads-disk
• Mount Path: /opt/render/project/src/uploads (sesuaikan dengan path absolut folder uploads di aplikasi kamu)
• Size: 1 GB

Jika sudah terlanjur membuat service tanpa disk, kamu bisa menambahkannya nanti dari dashboard service, tapi perlu redeploy.

3.6. Deploy!

Klik tombol "Create Web Service". Render akan mulai menarik kode dari GitHub, menjalankan npm install, dan menjalankan server. Kamu bisa melihat log di dashboard.

Setelah selesai, Render akan memberikan URL seperti https://wisata-backend.onrender.com. Ini adalah URL backend kamu yang sudah online! 🎉

Langkah 4: Menguji API yang Sudah Online

Buka Postman atau browser, dan coba akses beberapa endpoint publik, misalnya:

• GET https://wisata-backend.onrender.com/api/categories
• GET https://wisata-backend.onrender.com/api/destinations

Jika berhasil, akan muncul data dalam format JSON. Selamat, backend kamu sudah live!

Untuk endpoint yang memerlukan autentikasi (seperti POST ke /api/destinations), kamu perlu login terlebih dahulu dan mengirim token di header.

4.1. Mengatasi Error Koneksi Database

Jika terjadi error seperti connect ETIMEDOUT atau SSL connection error, periksa:

• Pastikan environment variable sudah benar (host, port, user, password).
• Pastikan DB_SSL=true sudah diset.
• Di Aiven, pastikan IP aplikasi diperbolehkan (biasanya Aiven mengizinkan semua koneksi dengan SSL).

Alternatif: Deploy ke Cyclic

Cyclic adalah alternatif Render yang juga gratis dan mendukung Node.js. Perbedaan utama: Cyclic tidak mendukung persistent disk secara langsung, sehingga untuk upload file perlu menggunakan cloud storage seperti AWS S3. Namun jika kamu hanya ingin mencoba API tanpa fitur upload, Cyclic bisa jadi pilihan.

Cara deploy ke Cyclic:

1. Buka cyclic.sh dan login dengan GitHub.
2. Klik "Deploy" dan pilih repository backend.
3. Cyclic akan otomatis mendeteksi Node.js dan mendeploy.
4. Tambahkan environment variables di dashboard Cyclic pada tab "Variables" [citation:6].

Cyclic menyediakan URL seperti https://wisata-backend.cyclic.app.

💡 Tips: Untuk keperluan upload file, pertimbangkan untuk menggunakan cloud storage seperti AWS S3 atau Cloudinary. Kita tidak akan bahas di sini karena di luar cakupan.

Migrasi Database (Mengimpor Tabel)

Saat pertama kali menggunakan database cloud, tabel-tabel belum ada. Kamu perlu membuat tabel-tabel yang sudah dirancang di Studi Kasus #1. Ada beberapa cara:

Opsi A: Menggunakan MySQL Client (Command Line)

Gunakan perintah berikut untuk mengimpor file SQL:

mysql -h HOST -P PORT -u USER -p --ssl-mode=REQUIRED DATABASE_NAME < schema.sql

Ganti dengan nilai dari Aiven. Kamu akan diminta password.

Opsi B: Menggunakan phpMyAdmin atau Adminer

Aiven tidak menyediakan phpMyAdmin bawaan. Kamu bisa menggunakan tools seperti DBeaver atau MySQL Workbench untuk mengkoneksi ke database Aiven dan menjalankan script SQL [citation:4].

Opsi C: Menggunakan Sequelize Migrations (Jika Ada)

Jika kamu menggunakan ORM seperti Sequelize, kamu bisa menjalankan migration di server dengan menambahkan script di package.json dan menjalankannya sebagai bagian dari build command. Namun kita tidak menggunakan ORM di proyek ini.

Untuk memudahkan, jalankan script SQL melalui MySQL Workbench atau DBeaver.

Troubleshooting Umum

Masalah	Solusi
Error: connect ETIMEDOUT	Periksa host dan port. Pastikan tidak ada firewall yang memblokir. Di Aiven, pastikan kamu menggunakan port yang benar (biasanya bukan 3306).
Error: ER_ACCESS_DENIED_ERROR	Username atau password salah. Periksa di environment variables.
Error: SSL connection error	Pastikan DB_SSL=true dan konfigurasi SSL di kode sudah benar.
File upload tidak berfungsi	Pastikan folder uploads memiliki permission write. Di Render, jika menggunakan disk, mount path harus sesuai. Jika tidak, file akan hilang saat redeploy.
App crash terus-menerus	Cek log di dashboard Render. Biasanya karena database tidak bisa diakses atau environment variable kurang.

Langkah Selanjutnya

Di Studi Kasus #24, kita akan mendeploy frontend React ke platform seperti Netlify atau Vercel, dan menghubungkannya dengan backend yang sudah online. Setelah itu, aplikasi Wisata Indonesia akan benar-benar lengkap dan bisa diakses publik!

Pastikan backend sudah berjalan dengan baik sebelum lanjut ke frontend. Catat URL backend (misal https://wisata-backend.onrender.com) karena akan digunakan di frontend.

Sampai jumpa di tutorial berikutnya! 👋😊

---

Ditulis dengan ❤️ untuk para pengembang yang ingin membangun aplikasi wisata.