Como desplegar React con Next.js en un servidor NGINX

por
Tiempo de lectura: 2 minutos

Para desplegar la web que hemos creado con React y Next.js vamos a seguir estos pasos:

  • Preparar la aplicación para producción: Ejecuta npm run build en tu proyecto Next.js para construir la aplicación. Esto generará una carpeta build que contiene los archivos optimizados para producción.
npm run build
  • Configurar Nginx: Debes configurar Nginx para servir tu aplicación Next.js. Puedes hacerlo creando un nuevo bloque de servidor en la configuración de Nginx para tu dominio o subdominio y configurando la ruta hacia la carpeta build de tu aplicación. Aquí tienes un ejemplo de cómo podría ser la configuración en el archivo de configuración de Nginx (nginx.conf o un archivo de configuración específico para tu sitio):
   server {
       listen 80;
       server_name tu-domino.com;

       location / {
           root /ruta/a/tu/aplicacion/build;
           index index.html;
           try_files $uri $uri/ /index.html;
       }
   }

Asegúrate de reemplazar tu-domino.com con tu dominio real y /ruta/a/tu/aplicacion/build con la ruta real de la carpeta build de tu aplicación Next.js.

  • Reiniciar Nginx: Después de actualizar la configuración de Nginx, asegúrate de reiniciar el servicio de Nginx para que los cambios surtan efecto. Puedes hacerlo ejecutando el siguiente comando en tu terminal:
   sudo systemctl restart nginx
  1. Prueba la aplicación: Visita tu dominio en un navegador web para asegurarte de que la aplicación Next.js se esté sirviendo correctamente a través de Nginx. Deberías ver tu aplicación funcionando como se espera.

Es importante tener en cuenta que Nginx solo se encargará de servir los archivos estáticos generados por Next.js. Si tu aplicación Next.js hace uso de funciones del lado del servidor (como getServerSideProps o getInitialProps), deberás asegurarte de que tu configuración de Nginx no interfiera con estas funciones y que tu aplicación esté correctamente configurada para manejar estas solicitudes.

Para hacer que tu aplicación Next.js sea compatible con getServerSideProps o getInitialProps, necesitas configurar Nginx para que redirija las solicitudes que requieren procesamiento del servidor a tu aplicación Next.js.

  • Configurar Nginx para redirigir todas las solicitudes a tu aplicación Next.js:
server {
    listen 80;
    server_name tu-dominio.com;

    location / {
        proxy_pass http://localhost:puerto-de-tu-aplicacion-nextjs;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Asegúrate de reemplazar tu-dominio.com con tu dominio real y puerto-de-tu-aplicacion-nextjs con el puerto en el que se está ejecutando tu aplicación Next.js (por ejemplo, 3000 si estás utilizando el servidor de desarrollo de Next.js).

Esta configuración de Nginx redirige todas las solicitudes a tu aplicación Next.js, lo que permite que getServerSideProps o getInitialProps se ejecuten correctamente en el servidor.

  • Reiniciar Nginx:

Después de actualizar la configuración de Nginx, asegúrate de reiniciar el servicio de Nginx para que los cambios surtan efecto:

sudo systemctl restart nginx

Con esta configuración, todas las solicitudes se redirigen a tu aplicación Next.js, lo que te permite utilizar funciones del lado del servidor como getServerSideProps o getInitialProps para manejar las solicitudes y renderizar la página en el servidor según sea necesario.

Post Views: 9

Deja un comentario