HomeBlogProjectAbout
Deploy Personal Web NextJs ke VPS Dengan Mudah

setup

deploy

Deploy Personal Web NextJs ke VPS Dengan Mudah

Created at December 04, 2024 • ☕️ 6 min read

Introduction

Zaman sekarang sebagai seorang developer, memiliki personal website bukan lagi sekadar hobi, tetapi juga menjadi kebutuhan untuk menunjukkan identitas, portofolio, atau bahkan usaha untuk menjalankan bisnis. Namun setelah membuat sebuah website, tahapan berikutnya supaya orang lain bisa melihat hasil karya yang telah kita buat adalah kita perlu membuat website kita bisa diakses secara online. Caranya dengan menggunakan Virtual Private Server (VPS).

Nah kali ini gw akan coba membahas bagaimana langkah-langkah mudah untuk deploy personal website ke VPS.

Why deploy on VPS ?

  1. Stable: Kenapa lebih stabil, karena kita bisa menentukan alokasi sumber daya (CPU, RAM, dan storage) yang dedicate, sehingga kinerja server tidak dipengaruhi oleh orang lain.
  2. Full Control: Kita memiliki akses full root atau admin, sehingga dapat menginstal software, dan konfigurasi sesuai dengan kebutuhan kita.
  3. Scalability: VPS memungkinkan kita untuk meningkatkan sumberdaya dengan mudah seiring dengan berkembangnya website atau aplikasi yang kita punya.
  4. Security: VPS lebih aman dibandingkan dengan shared hosting karena lingkungan server kita terisolasi, dan kita juga bisa mengatur firewall dan keamanan khusus.
  5. Low Cost: Karena kemudahannya untuk memilih alokasi sumber daya, biaya yang dibutuhkan untuk VPS bisa jauh lebih murah.

Memilih VPS

VPS yang gw pilih adalah bisnetgio, karena setelah gw banding dengan penyedia jasa VPS lain, bisnetgio ini yang paling murah menurut gw. dengan modal Rp.100.000 aja gw bisa dapetin vps dengan spec yang lumayan, yaitu 2vCPU, RAM 2GB, dan storage 60GB SSD. Tapi balik lagi ya ke preferensi masing-masing mau pilih yang mana.

Example description

Setelah kalian memilih service yang kalian inginkan, kalian diminta untuk setup Operating system, SSH key yang mau digunakan, dan Setup Username dan password untuk mengakses VM melalui SSH atau console langsung. Setelah berhasil setup, tunggu beberapa saat, dan server akan aktif serta muncul IP Address yang kalian bisa akses.

Example description

Setup SSH

Kemudian kita coba setup ssh agar kita bisa mengakses VPS tersebut, caranya:

# -i ~/.ssh/id_rsa adalah id rsa atau ssh key yang sudah kalian daftarkan
 
ssh -i ~/.ssh/id_rsa [username]@[public server IP]
# example => ssh -i ~/.ssh/id_rsa ihsan@123.123.123

atau kalian juga bisa setup SSH config langsung pada file ~/.ssh/config kalian seperti di bawah ini, atau bisa lihat artikel ini => SSH Config

~/.ssh/config
Host ihsanmuh
    HostName 123.123.123
    User ihsanmuh
    IdentityFile ~/.ssh/id_rsa

dan kalian bisa mengakses server hanya dengan ssh ihsanmuh pada terminal kalian tanpa perlu menuliskannya dengan panjang.

Example description

Setting Server

Sebelumnya kita sudah berhasil masuk kedalam VPS kita melalui SSH, sebagai mana sebuah pc, server yang kita miliki ini pun mirip layaknya ubuntu di pc kita, jadi hal pertama yang bisa kita lakukan terlebih dahulu adalah melakukan update dan upgrade.

sudo apt update
sudo apt upgrade

1. Install NGIX

Secara singkat NGIX adalah sebuah web server. Tidak hanya web server, NGINX digunakan untuk load balancing, content caching, reverse proxying, dan web streaming server. Intinya, software ini bersifat multifungsi dan membuat website makin canggih serta lebih cepat diakses. Cara menginstallnya dengan:

sudo apt install ngix

Setelah terinstall kemudian kita cek dengan sudo systemctl status nginx. NGIX dipastikan berjalan normal diserver kita.

Example description

2. Install Node Manager

Karena aplikasi atau website yang akan kita deploy berbasis node js maka dari itu kita harus menginstall node manager. Dan kali ini gw menggunakan Fast Node Manager.

curl -fsSL https://fnm.vercel.app/install | bash

setelah menginstall kita diminta mengubah source dari fnm dan kita bisa menginstall node yang kita inginkan

# change resource target
source /home/yourname/.bashrc
 
# install node v18
fnm install v18

setelah melakukan itu semua, node berhasil diinstall, kalian bisa cek dengan node --version. Karena gw menggunakan yarn jadi gw langsung install dengan npm i -g yarn, tapi kalo kalian prefer tetap menggunakan npm tidak masalah.

3. Testing Clone Web

Disini gw mencoba untuk pull project dari github gw, tapi sebelum itu karena kita menggunakan ngix jadi gw mengikuti pathnya si ngix di /var/www/. Kemudian gw buat folder baru fe-app dengan command mkdir fe-app

~/var/www/fe-app/
# clone project
git clone https://github.com/ihsnmuh/ihsanmuh.git
 
# move to directory /var/www/fe-app/ihsanmuh
cd /ihsanmuh
 
# install dependancies
yarn
 
# build app
yarn build
 
# start app
yarn start

pada app gw ini sebenernya cuma app starter dari Next js, kemudian langsung menginstall dependancies menggunakan yarn, setelah itu kita tes build yarn build dan yarn start.

Taraaaa~ webnya sudah bisa diakses secara online sementara sesuai dengan portnya. Tapi masih belum aman karena http dan masih menggunakan IP server yang nantinya akan kita ganti menjadi domain.

Example description

4. Handle Domain

Karena masih menggunakan IP public dan port, tentu itu akan membahayakan server kita. Maka dari itu kita akan ganti menggunaan domain yang sudah kita miliki dengan cara pointing domain kita ke IP public server seperti di bawah ini.

Example description

setelah itu kita pergi ke configurasi nginx cd /etc/nginx/site-available dan ada 1 file configurasi bawaan dengan nama default yang akan kita gunakan sebagai panduan untuk reverse proxy web kita. Caranya:

  • Buat satu file config ngix dengan nama bebas, dan gw buat ihsnmuh.prod.config
/etc/nginx/sites-available/ihsnmuh.prod.config
server {
    listen 80;
 
    server_name ihsanmuh.my.id;
 
    location / {
        proxy_pass http://localhost:3000;
    }
}
  • Check error config nginx dengan cara menjalankan command ini
sudo ngix -t
 
# Jika success muncul seperti ini
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# nginx: configuration file /etc/nginx/nginx.conf test is successful
  • Buat symlink nginx dengan command ini
sudo ln -s /etc/nginx/sites-available/ihsnmuh.prod.config /etc/nginx/sites-enabled/ihsnmuh.prod.config
  • Restart nginx dengan command ini
sudo systemctl restart nginx

Setelah itu, ketika kita coba akses website kita akan menemukan error Bad Gateway. Ini menandakan sudah terhubung dengan domain yang kita sudah setup, dikarenakan aplikasi kita belum dijalankan, maka dari itu nginx menghandle dengan mengarahkannya ke 502 Bad Gateway. Jika kita jalankan app kita dengan yarn start, maka web bisa di akses.

Example description

Perhatian: dengan cara tersebut web kita bisa diakses ketika kita masih berada didalam server, jika kita keluar dari server web akan kembali mati. Maka dari itu kita perlu menjalankan website di background

5. Menggunakan PM2

Agar website kita bisa berjalan di background server dan tidak mati saat kita keluar server, kita bisa menggunakan PM2 untuk memanage aplikasi kita. Caranya dengan install terlebih dahulu npm i -g pm2. Dan kita bisa langsung menjalankan aplikasi kita dengan command. Info detail bisa akses disini

pm2 start yarn --name ihsan-prod -- start

Maka website sudah berjalan di background

Example description

Setup Tambahan

Sejauh ini kita sudah berhasil melakukan deployment aplikasi. Walaupun website kita sudah bebas diakses, ada yang perlu kita setup terlebih dahulu demi keamanan, diantaranya:

Setup SSL dengan Certbot

Secara umum Sertifikat SSL/TLS bertindak sebagai kartu identitas digital untuk mengamankan komunikasi jaringan, menetapkan identitas situs web melalui Internet serta sumber daya di jaringan privat. Kali ini kita menambahkan ssl certificate secara gratis menggunakan cerbot dengan cara:

  • Install certbot melalui snap
sudo snap install --classic certbot
  • Prepare certbot command
sudo ln -s /snap/bin/certbot /usr/bin/certbot
  • Run create certbot
# ubah domain ke domain yang mau diinject
sudo certbot --nginx -d ihsanmuh.my.id

Setelah sudah maka certbot akan menambahkan konfigurasi pada config nginx kita

/etc/nginx/sites-available/ihsnmuh.prod.config
server {
 
    server_name ihsanmuh.my.id;
 
    location / {
        proxy_pass http://localhost:3000;
    }
 
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/ihsanmuh.my.id/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/ihsanmuh.my.id/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
 
}
 
server {
    if ($host = ihsanmuh.my.id) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
 
    listen 80;
 
    server_name ihsanmuh.my.id;
    return 404; # managed by Certbot
 
}

Mengaktifkan Firewall

Firewall digunakan untuk mengatur lalu litas sehingga secara explisit kita bisa mengatur koneksi apa saja yang bisa mengakses server kita keluar atau pun masuk. Sebelumnya jika kita coba akses melalui port web akan jalan normal, dan ini yang akan kita block. Firewall untuk ubuntu yang kita gunakan ini adalah ufw. Langkah-langkahnya sebagai berikut:

  • Cek status ufw
# Default ufw Status inactive
sudo ufw status
  • Atur role default terlebih dahulu agar semua koneksi ditolak
# Semua koneksi di server akan ditolak
sudo ufw default deny incoming
  • Mengizinkan segala koneksi keluar itu bisa mendapatkan akses
sudo ufw default allow outgoing
  • Setup apa saja yang bisa mengakses server, secara default gw hanya menambahkan 2 ini saja
 
# Mengizinkan akses dari OpenSSH
sudo ufw allow OpenSSH
 
# Mengizinkan seluruh akses dari Nginx
sudo ufw allow 'Nginx Full'
  • Mengaktifkan ufw
sudo ufw enable
  • Melihat list yang dapat mengakses server kita
sudo ufw status numbered
 
# akan muncul seperti ini, sesuai apa yang kita allow sebelumnya
 
# Status: active
 
#      To                         Action      From
#      --                         ------      ----
# [ 1] OpenSSH                    ALLOW IN    Anywhere
# [ 2] Nginx Full                 ALLOW IN    Anywhere
# [ 3] OpenSSH (v6)               ALLOW IN    Anywhere (v6)
# [ 4] Nginx Full (v6)            ALLOW IN    Anywhere (v6)

Penutup

Kita telah berhasil melakukan deployment Next.js ke VPS dari nol, mulai dari menghubungkan ke server, menginstall dependency, mengkonfigurasi Nginx dan domain, hingga mengamankan server dengan SSL dan firewall. Meskipun tampak teknis, jika kita terbiasa, proses ini akan menjadi lebih mudah dan cepat. Semoga panduan ini bermanfaat!