How to deploy NextJS with NGINX? - reactjs

Question

So I know how to deploy a React app on a server.
npm run build
create a server block and point the root to my react app folder build (root /var/www/xfolder/build;)
systemctl restart nginx
run my node server (nohup node server &&) and its done.
I feel kind of dumb for not understanding this with NextJS. I run npm run build
I'm expecting something like a build folder. I've tried setting the server block root to
/var/www/xfolder/.next but the page still gives 403 forbidden. And do I need to run npm run start? I'm confuse on how to properly deploy the app. I'm using Ubuntu, NginX (1gb droplet) in DigitalOcean.

Answer 1

Check this: https://gist.github.com/iam-hussain/2ecdb934a7362e979e3aa5a92b181153
Reference for HTTP/HTTPS: https://gist.github.com/iam-hussain/2ecdb934a7362e979e3aa5a92b181153
Start PM2 nextJS service on port 8080:
cd PROJECT_DIRECTORY
pm2 start "npm run start -- -p 8080" --name contractverifier
Configure Nginx:
Replace this file with the below code /etc/nginx/sites-available/default
server {
server_name www.DOMAINNAME.com DOMAINNAME.com;
index index.html index.htm;
root /home/ubuntu/PROJECT_FOLDER; #Make sure your using the full path
# Serve any static assets with NGINX
location /_next/static {
alias /home/ubuntu/PROJECT_FOLDER/.next/static;
add_header Cache-Control "public, max-age=3600, immutable";
}
location / {
try_files $uri.html $uri/index.html # only serve html files from this dir
#public
#nextjs;
add_header Cache-Control "public, max-age=3600";
}
location #public {
add_header Cache-Control "public, max-age=3600";
}
location #nextjs {
# reverse proxy for next server
proxy_pass http://localhost:8080; #Don't forget to update your port number
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;
}
listen 80 default_server;
listen [::]:80;
}

Answer 2

I managed to make it work. The problem is on my Nginx server block. I just add this block
location / {
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;
}
then run
npm start

Answer 3

I prefer to pm2 in order to start nextJs service and Nginx for publishing it
pm2 cmd:
pm2 start yarn --name nextjs --interpreter bash -- start
pm2 show nextjs
You can push that config into /etc/nginx/conf.d/your-file.config
/etc/nginx/nginx.config
server {
listen 80; # you can use 443 and letsencrypt to get SSL for free
server_name dicom-interactive.com; # domain name
access_log /var/log/dicom-interactive/access.log; # mkdir dir first
error_log /var/log/dicom-interactive/error.log error;
# for public asset into _next directory
location _next/ {
alias /srv/udemii-fe/.next/;
expires 30d;
access_log on;
}
location / {
# reverse proxy for next server
proxy_pass http://localhost:8000; # your nextJs service and port
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;
# we need to remove this 404 handling
# because next's _next folder and own handling
# try_files $uri $uri/ =404;
}
}