1698 words
8 minutes
Bagaimana cara setup Node.js App + NGINX di VPS?

Preambule#

👋 Halo guys, terimakasih sudah berkunjung. Sebelum lebih lanjut ke gimana cara setupnya, mendingan kita ketahui dulu secara mendasar istilah teknologi yang akan kita gunakan nantinya.

Lompat isi#

  1. Bagaimana cara setup?
  2. Langkah-langkah
  3. Step 1 - SSH Command
  4. Step 2 - Login to VPS
  5. Step 3 - Installing NGINX & update dependencies
  6. Step 4 - Install Node.js
  7. Step 5 - Konfigurasi Project
  8. Step 6 - Menjalankan Node.js App
  9. Step 7 - Setup NGINX
  10. Step 7.1 - Setup NGINX Direct IP dengan SSL
  11. Step 7.2 - Setup NGINX Domain tanpa SSL
  12. Step 7.3 - Setup NGINX Domain dengan SSL
  13. Penutup

Apa itu VPS?#

VPS (Virtual Private Server) adalah sebuah sistem yang memanfaatkan teknologi virtualisasi untuk membagi satu server fisik menjadi beberapa server virtual yang terpisah. Setiap server virtual ini memiliki sistem operasi dan sumber daya sendiri (seperti CPU, RAM, dan storage) yang dialokasikan secara eksklusif.

Apa itu NGINX?#

NGINX, singkatan dari “engine-x”, adalah software open-source yang berfungsi sebagai server web, reverse proxy untuk mendistribusikan lalu lintas, load balancer untuk menyeimbangkan beban server, serta proxy email untuk protokol IMAP, POP3, dan SMTP.

Apa itu Node.js?#

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

Secara singkat, Node.js adalah runtime environment yang memungkinkan kita untuk menjalankan kode JavaScript di luar browser.

Mengapa menggunakan NGINX?#

Alasan saya pribadi menggunakan NGINX karena konfigurasinya yang cukup mudah dipahami, dibandingkan dengan kompetitornya webserver Apache. Selain itu, menurut saya NGINX lebih cepat dan ringan.

Bagaimana cara setupnya?#

Setelah kalian simak definisi diatas, sudah paham bukan teknologi yang akan kita gunakan? Tentunya dongg, hehehehe 😎

Sebelum memulai, tentunya kita membutuhkan beberapa persiapan, diantaranya:,

  1. server atau VPS (Virtual Machine Server) yang akan digunakan untuk deployment (dapat dibeli di Raznar, IDCloudHost, dan Hostdata.ID)
  2. project node.js yang akan dijalankan (bisa dalam bentuk repository GitHub)
  3. terminal atau command prompt (pastikan dapat menggunakan perintah ssh, seperti gambar dibawah ya) Gambar SSH

Dalam kasus ini, saya membeli VPS dari IDCloudHost dengan spesifikasi sebagai berikut, Specifications server

Setelah itu, kurang lebih teman-teman akan mendapatkan detil server yang sudah terbuat sebagai berikut, Server details

Langkah-langkah#

Step 1 - Connect ke VPS#

Teman-teman silahkan membuka command prompt atau terminal favoritnya, lalu mengetik perintah sebagai berikut,

ssh [USERNAME VPS]@[IP VPS]

NOTE

Jangan lupa untuk mengganti [USERNAME VPS] dan [IP VPS] dengan username serta IP VPS-nya teman-teman. Tanpa [ dan ] yaa!

Step 2 - Verifikasi Fingerprint dan Password#

Setelah teman-teman mengetik perintah diatas, akan ada permintaan fingerprint verification, silahkan teman-teman ketik yes atau enter saja. Seperti berikut, Fingerprint vps verification

Kemudian, ketika permintaan password telah muncul seperti diatas, maka silahkan input password VPS yang sesuai.

IMPORTANT

Jangan khawatir, jika password yang diketik tidak muncul, password tersamarkan secara otomatis sebagai bentuk keamanan.

Step 3 - Install NGINX dan Update Dependencies#

Apabila teman-teman telah mengikuti step 2, maka teman-teman akan mendapati home screen seperti berikut, vps homescreen

Silahkan teman-teman jalankan perintah dibawah ini,

sudo apt update
sudo apt upgrade

sudo apt install git nginx -y
  • sudo apt update: Memperbarui daftar paket untuk pembaruan dan penginstallan.
  • sudo apt upgrade: Memperbarui semua paket yang terinstal pada sistem ke versi terbaru.
  • sudo apt install git nginx -y: Menginstall Git & NGINX. Flag -y secara otomatis mengkonfirmasi prompt penginstallan (yes/no).

Step 4 - Install Node.js#

Untuk instalasi Node.js, kita akan menggunakan Node Version Manager (NVM), karena dengan tool ini akan memudahkan kita untuk switch version Node.js tanpa ribet-ribet lagi kedepannya.

nvm-sh
/
nvm
Waiting for api.github.com...
00K
0K
0K
Waiting...

Silahkan copy perintah dibawah untuk menginstall nvm,

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Kurang lebih jika sudah terinstall, akan seperti gambar berikut apabila kita mengeceknya dengan mengetik perintah nvm,

what nvm looks like?

Apabila sudah terlihat seperti gambar diatas, silahkan jalankan perintah dibawah,

nvm install 21
NOTE

21 bisa diganti dengan versi Node.js lainnya, seperti 18, 12, 20, 14 atau pun versi spesifiknya seperti 20.17.0

Jika proses instalasi sudah selesai, silahkan verifikasi dengan perintah node -v, apabila jika sudah sesuai dengan versi Node.js yang kalian request, maka proses instalasi sudah berjalan dengan sempurna 😎

Step 5 - Konfigurasi Project Node.js#

Selamat datang di step ke-5, kali ini kita akan membahas bagaimana kita mengkonfigurasi project node.js kita di dalam VPS ini.

Disini, saya akan menjalankan project Bookshelf API berikut dengan Node.js v21.7.3.

hansputera
/
bookshelf-api
Waiting for api.github.com...
00K
0K
0K
Waiting...

Hal yang harus dilakukan adalah melakukan cloning repository tersebut ke VPS kita, dengan cara sebagai berikut,

git clone https://github.com/hansputera/bookshelf-api
cd bookshelf-api # masuk ke directory project tersebut dengan nama bookshelf-api

selanjutnya, kita akan melakukan instalasi dependencies project tersebut dengan perintah npm i.

Apabila instalasi dependencies sukses, kurang lebih akan muncul sebagai gambar dibawah, success npm i

Selanjutnya, kita coba lihat dan ubah jika diperlukan dalam kode atau konfigurasi project Node.js kita, saran dari saya lebih baik apabila teman-teman mengakses environment dari Node.js NODE_ENV untuk mengecek apakah berstatus production atau development untuk menentukan binding server address ke localhost atau 0.0.0.0 example code

Step 6 - Menjalankan Node.js App#

Apabila teman-teman telah mengikuti step 5, maka teman-teman dipersilahkan mengikuti step ini.

Tentunya kita tidak selalu membuka server atau VPS selama 24 jam ⏰ bukan? Sama aja boong kalau punya VPS, namun kita selalu buka device kita untuk mengonlinekan appnya 😂

Caranya gampang banget, kita bisa menggunakan tool PM2 untuk menjalankan program atau app Node.js kita di background. Gimana? Simak dibawah.

Cara installnya gampang banget, perintahnya seperti dibawah ya

npm i -g pm2

Untuk verifikasi instalasi dapat mengetik perintah pm2, apabila muncul help info dari pm2, maka dipastikan instalasi sukses.

Selanjutnya gimana? Masih di direktori project yang sama, kita jalankan perintah sebagai berikut,

pm2 start src/index.js --name "Nama Project"
pm2 save

pm2 startup
NOTE

Nama Project bisa diganti dengan nama app sesuka hati kalian. Dan, src/index.js juga bisa diganti dengan lokasi file program Node.js yang akan dijalankan (misal program yang ingin dijalankan adalah index.js, maka ganti saja dengan index.js)

Command pm2 save berfungsi untuk menyimpan state app yang kalian buat.

Sedangkan pm2 startup berfungsi untuk memberikan command kepada kita untuk dijalankan sehingga pm2 akan berjalan otomatis walaupun VM di reboot. pm2 startup img

Apabila sukses, akan muncul output seperti gambar dibawah pm2 startup success

Udah selesai? Iya udah 😎 EH-nggak dong WKWK, kita belum setup NGINX nya loh 🤩😋

Step 7 - NGINX Setup#

Untuk konfigurasi NGINX-nya kita akan bagi menjadi dua, yaitu:,

  1. Direct IP dengan SSL
  2. Domain dengan/tanpa SSL

Direct IP dengan SSL#

Tentunya sewaktu-waktu kita pengen akses app kita secara langsung tanpa harus ribet beli domain example.com, abcd.com, inidomain.id, dan seterusnya supaya bisa diakses dengan SSL.

Secara default, jika menggunakan yang gratisan (free) yakni letsencrypt, jenis SSL ini hanya berfungsi pada alamat yang berdomain, dan tidak berlaku pada IP Address.

Salah satu solusi yang saya temukan adalah dengan menggunakan layanan SSL gratis oleh ZeroSSL. Hanya dibutuhkan akun, dan alamat IP VM saja, kita bisa mendapatkan sertifikat SSL secara gratis.

ZeroSSL Verification#
  1. Kita mendaftar/signup atau registrasi akun di ZeroSSL
  2. Ketika masuk ke bagian homepage setelah registrasi akun, klik “New Certificate” new cert
  3. Setelah itu, teman-teman akan masuk ke halaman form validasi. Silahkan isi field “Domain” dengan alamat IP VPS teman-teman, dan klik “Next Step” zerossl field domain
  4. Selanjutnya silahkan pilih validity “90-day” jika ingin yang gratis. Lalu klik “Next Step”
  5. Untuk addons, “CSR & Contact”, dan field finalize order, kita langsung skip saja dengan klik “Next Step” juga.
  6. Nah, sampai juga dengan halaman verifikasi server. Kurang lebih tampilannya seperti berikut, silahkan pilih metode “HTTP File Upload” zerossl verif zerossl http file up
  7. Silahkan teman-teman download file teks “Download File Auth”, kemudian jalankan perintah dibawah di VPSnya teman-teman
sudo mkdir -p /var/www/well-known/pki-validation
NOTE

Perintah mkdir -p /var/www/well-known/pki-validation berfungsi untuk membuat directory /var/www/well-known/pki-validation

  1. Jika sudah, silahkan teman-teman copy nama filenya dan isinya yang sudah teman-teman download tadi. Dan, jalankan perintah dibawah,
sudo nano /var/www/well-known/pki-validation/NAMA_FILE_DICOPY
IMPORTANT

NAMA_FILE_DICOPY diganti dengan nama file yang sudah dicopy tadi, jangan lupa apabila berakhiran .txt, hal tersebut juga dimasukan. Intinya semua nama filenya dimasukan.

  1. Setelah itu, teman-teman silahkan paste isi file yang sudah dicopy tadi. Jika sudah, silahkan CTRL+X, dan apabila ditanya Save modified buffer?, maka ketik saja Y lalu enter.

  2. Jika sudah, silahkan teman-teman copy teks berikut:

 location /.well-known {
    autoindex on;
    alias /var/www/well-known;
 }
  1. Lalu silahkan teman-teman edit kembali file /etc/nginx/sites-available/default dengan editor nano
nano /etc/nginx/sites-available/default
  1. Kemudian scroll ke bawah, sehingga menemukan line seperti berikut
location / {
    ....
}

# isi disini
IMPORTANT

Silahkan ganti # isi disini dengan konfigurasi yang telah dicopy sebelumnya.

  1. Jika konfigurasi kurang lebih seperti dibawah, silahkan CTRL+X, dan save. Lalu keluar. zerossl nginx cfg
  2. Kembali ke halaman verifikasi ZeroSSL, lalu klik “Next Step”, dan terakhir “Verify Domain”
  3. Jika kamu mendapatkan gambar seperti dibawah, maka verifikasi kamu berhasil. verifikasi done zerossl
  4. Jika proses pembuatan sertifikat SSL sudah selesai, silahkan pilih “Server Type” menjadi NGINX, dan download file .zip sertifikatnya.
NGINX Setup#
  1. Silahkan teman-teman copy konten file certificate.crt dan private.key.
IMPORTANT
  • Silahkan buat file certificate.pem di folder /etc/ssl/certs dengan perintah sebagai berikut:
nano /etc/ssl/certs/certificate.pem

Lalu paste isi dari file certificate.crt di file certificate.pem tersebut.

  • Lalu, lakukan hal yang sama dengan file private.key seperti cara diatas.
  1. Silahkan copy konfigurasi dibawah lalu paste ke /etc/nginx/sites-available/app-reverse menggunakan editor nano
server {
        listen 80;
        listen [::]:80;

        server_name IP_VPS;
        return 301 https://$host$request_uri;
}

server {
        listen 443 ssl;
        listen [::]:443 ssl;

        server_name IP_VPS;

        ssl_certificate /etc/ssl/certs/certificate.pem;
        ssl_certificate_key /etc/ssl/certs/private.key;

        location / {
                proxy_pass http://127.0.0.1:5000/;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
        }
}
IMPORTANT
  • Untuk IP_VPS silahkan diganti dengan IP VPSnya teman-teman.
  • Untuk http://127.0.0.1:5000, angka 5000 bisa diganti dengan port app node.js-nya teman-teman.
  1. Kemudian, kita akan apply changes nginx dengan cara dibawah
sudo ln -s /etc/nginx/sites-available/app-reverse /etc/nginx/sites-enabled/app-reverse
sudo systemctl restart nginx
  1. Enjoy! Sekarang IP VPS kalian bisa diakses secara langsung dengan HTTPs dan mengarah ke project Node.js-nya teman-teman 😎

Domain dengan/tanpa SSL#

Cara disini kurang lebih hampir sama dengan ini

Tanpa SSL#

Tanpa SSL adalah paling gampang banget, karena konfigurasinya hanya seperti ini

server {
    listen 80;
    listen [::]:80;

    server_name domain_kalian.id;

    location / {
        proxy_pass http://127.0.0.1:5000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
IMPORTANT
  • Untuk domain_kalian.id silahkan diganti dengan domain milik teman-teman.
  • Untuk http://127.0.0.1:5000, angka 5000 bisa diganti dengan port app node.js-nya teman-teman.

Lalu sisa di paste ke file /etc/nginx/sites-available/app-reverse-http menggunakan editor nano. Kemudian jalankan perintah dibawah untuk mengaktifkannya,

sudo ln -s /etc/nginx/sites-available/app-reverse-http /etc/nginx/sites-enabled/app-reverse-http
sudo systemctl restart nginx
Dengan SSL#

Kalau dengan SSL, gimana? Sama aja kayak ini, bedanya ditambah server 443 nya doang 😋

Jadi confignya gimana? Seperti dibawah ya

server {
    listen 80;
    listen [::]:80;

    server_name domain_kalian.id;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name domain_kalian.id;

    ssl_certificate /etc/ssl/certs/certificate.pem;
    ssl_certificate_key /etc/ssl/certs/private.key;

    location / {
        proxy_pass http://127.0.0.1:5000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Udah gitu doang, cuman butuh SSL Certificate aja dari LetsEncrypt, untuk tutorialnya bakal saya buatkan di artikel selanjutnya ✌️ (Lihat Disini)

Setelah itu, sisanya sama seperti cara di NGINX Setup Domain - Tanpa SSL ❤️

Penutup#

Baiklah, mungkin itu saja petunjuk dan solusi yang dapat saya berikan dalam artikel ini. Dan, berikut dibawah merupakan hasil dari upaya diatas, connection ke IP VPS sudah menjadi secure karena sudah terpasang SSL certificate dari ZeroSSL. gambar jadi

Kurang lebih dan kesalahan kata, saya mohon maaf, tinggalkan komentar jika berkenan, sampai bertemu kembali di artikel selanjutnya 😋

Bagaimana cara setup Node.js App + NGINX di VPS?
https://blog.hansputera.dev/posts/04-deploy-nodejs-nginx/
Author
Hanif Dwy Putra S
Published at
2024-08-24