• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

1

8.3K
Vistas
How to deploy NextJS with NGINX?

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 enter image description here

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.

about 3 years ago · Santiago Trujillo
4 Respuestas
Responde la pregunta

0

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

enter image description here

about 3 years ago · Santiago Trujillo Denunciar

0

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;
    }
}
about 3 years ago · Santiago Trujillo Denunciar

0

Check this: https://gist.github.com/ZaHuPro/2ecdb934a7362e979e3aa5a92b181153

Reference for HTTP/HTTPS: https://gist.github.com/ZaHuPro/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;
}
about 3 years ago · Santiago Trujillo Denunciar

0

over 2 years ago · Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda