Last active
November 12, 2022 14:40
-
-
Save zgramming/bafead8bd6375da84bb0213dd25badc3 to your computer and use it in GitHub Desktop.
Deploy Next JS into VPS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment