1
8.8K
Visualizações¿Cómo implementar NextJS con NGINX?
Entonces sé cómo implementar una aplicación React en un servidor.
- compilación de ejecución de npm
- cree un bloque de servidor y apunte la raíz a la compilación de la carpeta de mi aplicación de reacción ( raíz /var/www/xfolder/build; )
- systemctl reiniciar nginx
- ejecute mi servidor de nodos (servidor de nodos nohup &&) y listo.
Me siento un poco tonto por no entender esto con NextJS. Ejecuto npm run build 
Estoy esperando algo como una carpeta de compilación. Intenté configurar la raíz del bloque del servidor en /var/www/xfolder/.next pero la página aún muestra 403 prohibido. ¿Y necesito ejecutar npm run start? Estoy confundido sobre cómo implementar correctamente la aplicación. Estoy usando Ubuntu, NginX (droplet de 1 gb) en DigitalOcean.
4 Respostas
Responde à pergunta0
Logré hacerlo funcionar. El problema está en mi bloque de servidor Nginx. Solo agrego este bloque
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; }entonces corre
npm start 
0
Prefiero pm2 para iniciar el servicio nextJs y Nginx para publicarlo
pm2 cmd:
pm2 start yarn --name nextjs --interpreter bash -- start pm2 show nextjs Puede insertar esa configuración en /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; } }0
Mira esto: https://gist.github.com/ZaHuPro/2ecdb934a7362e979e3aa5a92b181153
Referencia para HTTP/HTTPS: https://gist.github.com/ZaHuPro/2ecdb934a7362e979e3aa5a92b181153
Inicie el servicio PM2 nextJS en el puerto 8080:
-
cd PROJECT_DIRECTORY -
pm2 start "npm run start -- -p 8080" --name contractverifier
Configurar Nginx:
Reemplace este archivo con el siguiente código /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; }