Deploy Next JS into VPS

next js step install

TUTORIAL INSTALL PROJECT NEXT JS / REACT JS KE VPS
Referensi : https://medium.com/@handri.pangestiaji/next-js-serve-multiple-next-js-app-dengan-pm2-dan-nginx-8f71f71626c3
Referensi subdomain : https://adamtheautomator.com/nginx-subdomain/

sudo apt update
sudo apt upgrade
sudo mkdir /var/www/NAMA_FOLDER_PROJECT
Install NVM ( Node Version Manager)
    * curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
    * nvm install --lts
Install PM2
    * npm install -g pm2
    * pm2 install typescript
Download project / clone ke directory yang dibutuhkan
Masuk ke directory project next js (/var/www/zeffry-reynando), lalu build projectnya menggunakan npm run build
cd /var/www/zeffry-reynando && pm2 start npm --name zeffry-reynando -- start -- -p 3000 (sesuaikan port jika mau banyak project Nextjs di 1 VPS yang sama)

sudo chown -R $USER:$USER /var/www
sudo chown -R $USER:$USER /etc/nginx/sites-available
sudo chmod -R 775 /var/www
sudo chmod -R 775 /etc/nginx/sites-available
Install Nginx
    - sudo apt install nginx certbot python3-certbot-nginx
    - sudo nano /etc/nginx/sites-available/NAMA_FOLDER_WEBSITE_DARI_VAR_WWW , lalu gunakan config(1.0)
    - sudo ln -s /etc/nginx/sites-available/NAMA_FOLDER_PROJECT /etc/nginx/sites-enabled
    - https://www.cyberciti.biz/faq/linux-unix-bsd-nginx-413-request-entity-too-large/ (Setting max file upload yang defaultnya 2mb)
    - sudo nginx -t (memastikan kalau tidak ada syntax error saat config nginx)
    - sudo systemctl restart nginx (restart nginx)


1.0
server {
	listen 80;
            listen [::]:80;
	root /var/www/zeffry-reynando;
	index index.html index.htm index.nginx-debian.htm;
	server_name nextjs-one.com www.nextjs-one.com;

	location / {
			proxy_pass http://127.0.0.1:3000;
			# Allow the use of websockets
			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;
	}
}


SETUP SSL DI DOMAIN / SUBDOMAIN
sudo apt-get install certbot python3-certbot-nginx -y
sudo certbot certonly --agree-tos --email YOUR_EMAIL@gmail.com -d YOUR_DOMAIN.COM && choose number 1 Nginx Web Server plugin (nginx)
After that, remember certificate & the key location
    - /etc/letsencrypt/live/zeffry.my.id/fullchain.pem (certificate)
    - /etc/letsencrypt/live/zeffry.my.id/privkey.pem (key)
sudo chown -R $USER:$USER /etc/letsencrypt (to grant access)
sudo chmod -R 775 /etc/letsencrypt
ls /etc/letsencrypt/live/*zeffry.my.id/ (check if certificate exists)
sudo nano /etc/nginx/sites-available/YOUR_DOMAIN (gunakan 2.0)
sudo nginx -t (pastikan tidak ada masalah)
sudo systemctl restart nginx (restart nginx)
Ulangi langkah 2 untuk register domain/subdomain lainnya


2.0 changes sites-available after setup ssl
server {
	# Binds the TCP port 80.
	listen 80;
	
	# Defines the domain or subdomain name. 
	# If no server_name is defined in a server block then 
	# Nginx uses the 'empty' name
	
	server_name zeffry.my.id;
	# Redirect the traffic to the corresponding 
	# HTTPS server block with status code 301
	return 301 https://$host$request_uri;
}

server {
	listen 443 ssl;

	root /var/www/zeffry-reynando;
	index index.html index.htm index.nginx-debian.htm;
	server_name zeffry.my.id www.zeffry.my.id;

	# SSL Configuration
	
	# Path of the SSL certificate
	ssl_certificate /etc/letsencrypt/live/zeffry.my.id/fullchain.pem;
	ssl_certificate_key /etc/letsencrypt/live/zeffry.my.id/privkey.pem;
	
	# Use the file generated by certbot command.
	include /etc/letsencrypt/options-ssl-nginx.conf;
	
	# Define the path of the dhparam.pem file.
	ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

	location / {
			proxy_pass http://127.0.0.1:3000;
			# Allow the use of websockets
			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;
	}
}