Knowledge Base

How to publish nodejs, nextjs, react projects using Nginx

You can use the sample codes below to publish your nodejs, nextjs, react projects using Nginx.

cat >/etc/nginx/sites-enabled/alanadicom_nextjs_frontend <<'END'

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off;
upstream wwwalanadicom {
server 0.0.0.0:3000;
}
server {
listen 80;
server_name www.alanadi.com alanadi.com;

location = /robots.txt {
alias /home/ubuntu/alanadicom_nextjs_frontend/robots.txt;
}

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

server {
listen 443 ssl http2;
location = /robots.txt {
alias /home/ubuntu/alanadicom_nextjs_frontend/robots.txt;
}

keepalive_timeout 40;
client_max_body_size 4G;

access_log off;
server_tokens off;
error_log /home/ubuntu/alanadicom_nextjs_frontend/log_nginx_err.log warn;

ssl on;
ssl_certificate /etc/letsencrypt/live/alanadi.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/alanadi.com/privkey.pem;
ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;

gzip on;
gzip_proxied any;
gzip_comp_level 4;
gzip_types text/css application/javascript image/svg+xml;

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;

location /_next/static {
proxy_cache STATIC;
proxy_pass http://wwwalanadicom;
add_header X-Cache-Status $upstream_cache_status;
}

location /static {
proxy_cache STATIC;
proxy_ignore_headers Cache-Control;
proxy_cache_valid 60m;
proxy_pass http://wwwalanadicom;
add_header X-Cache-Status $upstream_cache_status;
}

location / {
proxy_pass http://wwwalanadicom;
}

 

}END

Finally, we restart Nginx with the systemctl restart nginx command.

 

 

 

systemctl restart nginx