Cara Mengarahkan Domain ke VPS (Virtual Private Server)

Dalam era digital saat ini, memiliki website yang dapat diakses secara online menjadi hal yang penting. Salah satu cara untuk melakukannya adalah dengan mengarahkan domain Anda ke VPS. Dalam tutorial ini, kita akan membahas langkah-langkah untuk mengarahkan domain Anda ke VPS, menggunakan NGINX sebagai reverse proxy dan memberikan SSL gratis menggunakan Let's Encrypt.

Prasyarat

• VPS dengan Ubuntu 20.04 atau versi lebih baru.
• Akses root atau hak akses sudo pada VPS Anda.
• Aplikasi Next.js yang siap untuk diproduksi.
• Domain kustom yang telah dibeli.

Langkah Utama

1. VPS Initial Setup

Langkah pertama adalah masuk ke VPS Anda. Gunakan perintah SSH untuk melakukan ini:

ssh root@your-server-ip

Setelah login, perbarui sistem dan install beberapa dependensi yang diperlukan:

apt update && apt upgrade -y
apt install nginx ufw curl unzip git build-essential -y

2. Setup Domain (Contoh: app.mydomain.com)

Kami merekomendasikan menggunakan Cloudflare untuk pengelolaan DNS. Berikut adalah langkah-langkahnya:

• Setel nameserver Cloudflare pada penyedia domain Anda.
• Di tab DNS Cloudflare, tambahkan entri berikut:
• Tipe: A
• Nama: app
• Nilai: IP VPS Anda
• Status Proksi: DNS only (nonaktifkan proksi untuk saat ini, aktifkan nanti)

3. Deploy Aplikasi Next.js pada Port Kustom (misalnya 4300)

Clone atau unggah aplikasi Next.js Anda:

git clone https://github.com/your/repo.git app
cd app

Install Node.js dan PM2 untuk manajemen proses:

curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
apt install -y nodejs
npm install -g pm2

Selanjutnya, bangun dan jalankan aplikasi Next.js Anda:

npm install
npm run build
pm2 start npm --name "nextapp" -- start -p 4300
pm2 save

Untuk mengatur PM2 agar otomatis restart saat server reboot, jalankan perintah berikut:

pm2 startup

PM2 akan menampilkan perintah yang perlu Anda jalankan. Salin dan jalankan perintah tersebut di terminal.

pm2 save

4. NGINX Reverse Proxy + Free SSL (Let's Encrypt)

Setelah aplikasi Anda berjalan, sekarang saatnya mengonfigurasi NGINX sebagai reverse proxy. Buat file konfigurasi NGINX untuk aplikasi Anda:

nano /etc/nginx/sites-available/app

Masukkan konfigurasi berikut:

server {
listen 80;
server_name app.mydomain.com;

location / {
proxy_pass http://localhost:4300;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

Aktifkan situs tersebut dengan membuat symlink ke direktori sites-enabled:

ln -s /etc/nginx/sites-available/app /etc/nginx/sites-enabled/

Periksa konfigurasi NGINX untuk kesalahan:

nginx -t

Jika tidak ada kesalahan, restart NGINX:

systemctl restart nginx

Selanjutnya, kita akan mengamankan domain Anda dengan SSL gratis dari Let's Encrypt. Jalankan perintah berikut:

apt install certbot python3-certbot-nginx -y
certbot --nginx -d app.mydomain.com

Ikuti instruksi untuk menyelesaikan proses pengaturan SSL.

Konfigurasi Lanjutan

Setelah pengaturan dasar selesai, Anda dapat mempertimbangkan konfigurasi lanjutan untuk meningkatkan keamanan dan kinerja.

• Atur firewall: Gunakan UFW untuk membatasi akses ke server.
• Monitor uptime: Gunakan alat seperti UptimeRobot untuk memonitor status aplikasi Anda.
• Optimize NGINX: Sesuaikan pengaturan NGINX untuk performa yang lebih baik.

Best Practices

• Selalu perbarui VPS dan aplikasi Anda untuk menjaga keamanan.
• Gunakan HTTPS untuk semua koneksi ke server Anda.
• Backup konfigurasi dan data secara berkala.
• Monitor resource server untuk mencegah overloading.

Troubleshooting

Jika Anda mengalami masalah, berikut adalah beberapa tips untuk mengatasi masalah umum:

• Periksa log NGINX di /var/log/nginx/error.log untuk pesan kesalahan.
• Pastikan port yang digunakan oleh aplikasi tidak terhalang oleh firewall.
• Kemungkinan ada kesalahan dalam konfigurasi NGINX; ulangi langkah konfigurasi.
• Gunakan pm2 logs nextapp untuk melihat log aplikasi Next.js Anda.

Kesimpulan

Dengan mengikuti tutorial ini, Anda telah berhasil mengarahkan domain Anda ke VPS dan mengkonfigurasi aplikasi Next.js dengan SSL menggunakan Let's Encrypt. Langkah-langkah ini memberikan dasar yang kuat untuk mengelola aplikasi web Anda di lingkungan server pribadi. Selalu ingat untuk memonitor dan mengoptimalkan aplikasi Anda untuk performa yang lebih baik.

Jika Anda memerlukan bantuan lebih lanjut atau konsultasi, Anda dapat menghubungi kami melalui tombol di bawah ini.

Konsultasi Jasa Setup Sekarang