Cara Install dan Membuat Project Next.js di VPS Ubuntu dengan Nginx

Next.js adalah framework JavaScript yang digunakan untuk mengembangkan aplikasi web modern dengan menggunakan React.

Jika ingin mengembangkan aplikasi web modern dengan menggunakan Next.js, sebuah framework JavaScript yang berbasis React, Anda mungkin ingin menjalankannya di lingkungan server dengan menggunakan Nginx sebagai web server. Pada panduan ini, kami akan membahas langkah-langkah untuk menginstal dan membuat project Next.js di VPS Ubuntu dengan Nginx.

Cara Install dan Membuat Project Next.js di VPS Ubuntu dengan Nginx

Langkah pertama yang perlu dilakukan adalah mempersiapkan VPS Ubuntu dan memastikan sistem operasi sudah diperbarui. Pastikan juga Node.js dan npm terinstal di VPS . Setelah itu, Anda dapat memulai dengan membuat project Next.js baru. di panduan ini kami Menggunakan Ubuntu versi 20,04

Kami akan menginstal Node.js v18 menggunakan Nodesource. Untuk menginstal Node.js, pertama-tama kita harus menginstal dan menjalankan script Nodesource:

curl -sL https://deb.nodesource.com/setup_18.x | sudo bash

Ini akan menginstal versi Node.js terbaru ke VPS. Kita sekarang dapat menginstal Node.js dari apt dengan perintah berikut:

sudo apt install nodejs -y

Untuk memverifikasi bahwa Node.js terinstal, kita dapat menjalankan perintah berikut:

node -v # 18.x.x

Kemudian disini kita akan menginstal nginx sebagai Web server utama pada VPS.

Kami akan menginstal NGINX menggunakan apt. Untuk menginstal NGINX, kita dapat menjalankan perintah berikut:

sudo apt install nginx -y

Kita harus menyiapkan firewall untuk hanya mengizinkan port tertentu di VPS. Kami hanya mengizinkan 22 untuk SSH, 80 untuk HTTP, dan 443 untuk HTTPS

sudo ufw allow ssh # 22
sudo ufw allow "Nignx Full" # 80 and 443

Untuk memverifikasi ini berfungsi, Anda dapat menjalankan perintah berikut

sudo ufw status

Jika firewall disabled, Anda dapat menjalankan perintah berikut untuk mengaktifkannya

sudo ufw enable

Berikutnya setelah setup VPS dan Web server nginx selesai, Kita bisa langsung membuat sample project next.js

Untuk mengkloning project Next.js pastikan untuk masuk ke VPS. Kami akan menggunakan git untuk mengkloning projet dari GitHub ke VPS.

git clone https://github.com/jetorbit/nextjstest.git

ganti URL ini dengan repo Anda,

Jika Anda belum menginstal git di VPS, Silahkan install dengan command berikut :

sudo apt install git -y

Setelah project di clone, kita harus mengubah direktori ke folder project.

cd nextjstest

Sekarang kita dapat menginstal dependensi:

# Ganti ini dengan manajer paket pilihan Anda
npm install

Setelah semua dependensi terinstal, kita dapat membangun client sehingga siap untuk digunakan.

npm run build

Sekarang kita dapat memulai project di background menggunakan pm2. Ini akan memulai project pada port 3000 di background. Anda dapat melihat log apa pun dengan menjalankan log pm2.

# `run start` adalah perintah start yang akan dijalankan.
pm2 start npm --name my-project -- run start

Yang Terakhir kita perlu mengkonfigurasu nginx Terlebih dahulu.

Mulailah dengan membuka file berikut dengan editor teks: /etc/nginx/sites-available/default. Disini kami menggunakan Nano :

nano /etc/nginx/sites-available/default

Anda akan melihat beberapa konfigurasi, silahkan dapat menghapusnya dengan aman.

sekarang dapat mulai mengedit file ini dan menambahkan blok server kami sendiri.

server {
  # the name of your domain, www is optional.
  server_name my-domain.com www.my-domain.com;
 
  location / {
    # this must stay localhost. The port must be the same as your Next.js project
    proxy_pass http://localhost:3000;
    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;
  }
 
  # simple headers
  add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
  add_header X-XSS-Protection          "1; mode=block" always;
  add_header X-Frame-Options DENY always;
 
  # this will serve the project on port 80
  listen 80;
}

Setelah selesai mengedit, simpan dan keluar dari editor dan verifikasi file konfigurasi dengan perintah berikut:

nginx -t

kami menjalankan project pada port 80. Ini bagus untuk saat ini, karena belum menginstal sertifikat ssl. Jika Anda tidak memerlukan situs yang secured, maka dapat skip langkah ini.

Certbot dapat diinstal dengan banyak cara dan di banyak mesin dengan konfigurasi yang berbeda, oleh karena itu silakan ikuti Certbot’s installation guide.

Setelah mengikuti instruksi Certbot, Anda harus memverifikasi apakah itu mengubah konfigurasi NGINX, buka file konfigurasi dan lihat perubahan yang dilakukan.

nano /etc/nginx/sites-available/default

Sekarang Anda akan melihat bahwa blok server akan melayani project di port 443 (HTTPS)!

Sebagai langkah terakhir kita, kita harus me-restart NGINX dengan perintah berikut:

sudo systemctl reload nginx

Kesimpulan

Dalam panduan ini, kami telah membahas langkah-langkah untuk menginstal dan membuat project Next.js di VPS Ubuntu dengan bantuan Nginx sebagai web server. Next.js adalah framework JavaScript yang kuat untuk mengembangkan aplikasi web modern, sedangkan Nginx adalah server web yang dapat diandalkan dan efisien.

Demikian panduan Terkait Cara Install dan Membuat Project Next.js di VPS Ubuntu dengan Nginx, Semoga bermanfaat 🙂