Este artículo explica cómo contenerizar una aplicación Next.js con un Dockerfile para un despliegue personalizable. Alternativamente, puedes desplegar una aplicación Next.js en Kinsta utilizando el despliegue automático.

Con Docker, empaquetamos una aplicación, su entorno y sus dependencias en un contenedor aislado. Un contenedor consiste en una aplicación que se ejecuta en una versión reducida de Linux. Una imagen Docker es la plantilla para un contenedor, y el contenedor es una instancia en ejecución de una imagen.

Para contenerizar una aplicación, utilizamos un método declarativo a través de un Dockerfile. Docker lee y ejecuta los scripts definidos en este archivo para construir y desplegar tu aplicación.

Ventajas de Contenerizar tu Aplicación

La contenedorización de una aplicación tiene muchas ventajas, como la portabilidad, la estabilidad, la escalabilidad, la seguridad y el rendimiento. Al desplegar una aplicación en Kinsta con un Dockerfile, también aprovechas su personalización.

Portabilidad

Docker encapsula todo lo que una aplicación necesita para ejecutarse, lo que permite conmutarlas fácilmente entre entornos. Tanto si la ejecutas localmente como en un ordenador con un sistema operativo diferente, o en entornos staging y en producción, Docker construye la aplicación con los mismos componentes, lo que facilita su programación, prueba y despliegue.

Escalabilidad

Con Docker, puedes ejecutar varias instancias de tu contenedor en diferentes servidores. Los orquestadores de contenedores gestionan el aumento de tráfico sin afectar al rendimiento de tu aplicación.

Estabilidad

Al ejecutar tu aplicación en un contenedor aislado, obtienes resultados predecibles al mover el código entre los sistemas de desarrollo, prueba y producción. Dado que tu contenedor contiene versiones exactas de las bibliotecas y paquetes necesarios, minimiza el riesgo de errores debidos a diferentes revisiones de dependencias.

Además, cuando tu aplicación se despliega en un servidor de producción, Docker la mantiene aislada de otras aplicaciones, minimizando el riesgo de que se vea afectada por sus picos de tráfico.

Seguridad

Los contenedores Docker proporcionan un entorno más seguro para tus cargas de trabajo que los modelos tradicionales. Como descomponen tus aplicaciones en componentes mucho más pequeños y débilmente acoplados, cada uno aislado del otro, se reduce significativamente la superficie de ataque. Los contenedores Docker disminuyen la posibilidad de que los hackers exploten tus sistemas informáticos y dificultan la propagación de una brecha en caso de ataque. Más información en este artículo: 9 Buenas Prácticas de Seguridad para Contenedores Docker.

Rendimiento

Los contenedores no contienen un sistema operativo completo como las máquinas virtuales y los servidores tradicionales. Por ello, los contenedores ocupan mucho menos espacio y son más rápidos de construir y poner en marcha.

Despliegue Personalizado

Con Kinsta, puedes desplegar tus aplicaciones automáticamente utilizando Buildpacks y Nixpacks. Pero cuando el proceso de construcción se activa automáticamente basándose en el código base de tu aplicación, no tienes mucho espacio para personalizaciones. Si despliegas en Kinsta con un Dockerfile, puedes configurar con precisión cómo quieres construir y desplegar tu aplicación.

Requisitos

Para desplegar una aplicación Next.js con Docker, necesitas:

Empezar con una Aplicación Next.js

Si partes de una aplicación existente, puedes saltarte este paso. Si empiezas desde cero, crea una nueva aplicación Next.js:

  1. Abre tu terminal e instala create-next-app:
npm i -g create-next-app@latest
  1. Navega hasta el directorio donde quieras instalarlo y crea una nueva aplicación Next.js en su propio directorio:
npx create-next-app@latest new-app

Next te pide que especifiques una serie de opciones de configuración para tu nueva aplicación. Para este tutorial, puedes simplemente aceptar los valores predeterminados sugeridos.

  1. Para previsualizar tu nueva aplicación, navega hasta el directorio new-app y ejecútala:
npm run dev

Como referencia, hemos creado una aplicación de ejemplo utilizando este método.

Contenedorizar una Aplicación Next.js con un Dockerfile

Para contenerizar tu aplicación Next.js y desplegarla con Docker, crea un Dockerfile en el directorio root de tu aplicación.

Etapa Build (de Construcción)

En tu Dockerfile, empieza creando la etapa build de la app para construir tu aplicación:

  1. Utiliza la última imagen estable oficial de Node.js alpine como imagen base para la etapa build:
FROM node:18-alpine AS build
WORKDIR /app
  1. Copia los archivos package.json y package-lock.json en el contenedor:
COPY package*.json ./
  1. Instala las dependencias de la app con:
RUN npm ci
  1. Copia el resto del código de la aplicación al contenedor con:
COPY . .
  1. Construye la aplicación:
RUN npm run build

Etapa Runtime (de Ejecución)

Crea la etapa runtime para desplegar tu aplicación:

  1. Utiliza la última imagen estable oficial de Node.js alpine como imagen base para la etapa runtime:
FROM node:18-alpine AS runtime
  1. Establece el directorio de trabajo en /app:
WORKDIR /app
  1. Copia los archivos package.json y package-lock.json en el contenedor:
COPY package*.json ./
  1. Instala sólo las dependencias de producción:
RUN npm ci --only=production
  1. Copia la aplicación creada de la etapa build a la etapa runtime:
COPY --from=build /app/.next ./.next
  1. Copia la carpeta public de la etapa build a la etapa runtime:
COPY --from=build /app/public ./public
  1. Expón el puerto 3000:
EXPOSE 3000
  1. Ejecuta el contenedor como usuario sin privilegios:
USER node
  1. Inicia la aplicación Next.js:
CMD ["npm", "start"]

Obtendremos el siguiente archivo Dockerfile:

FROM node:18-alpine AS build

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:18-alpine AS runtime

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY --from=build /app/.next ./.next
COPY --from=build /app/public ./public

EXPOSE 3000
USER node
CMD ["npm", "start"]

Despliega la Aplicación Localmente con Docker

Aunque puedes previsualizar tu aplicación con run npm dev, ejecútala localmente con Docker para imitar el entorno de producción y para probar y previsualizar cualquier cambio que hagas en el Dockerfile de tu aplicación.

Para previsualizar tu aplicación

  1. Construye la aplicación con docker build:
docker build -t next-docker .
  1. Ejecuta el contenedor para previsualizar tu aplicación:
docker run -p 3000:3000 next-docker
  1. En tu navegador, abre http://localhost:3000.

Despliega la Aplicación Next.js en Contenedores en Kinsta

Sigue los pasos que se indican a continuación para desplegar tu aplicación en Kinsta utilizando su archivo Dockerfile.

  1. Aloja el código base de tu aplicación en un repositorio Git (en GitHub, GitLab o Bitbucket).
  2. Inicia sesión en tu cuenta MyKinsta o crea una nueva para acceder a tu panel de control.
  3. Haz clic en Añadir servicio y selecciona Aplicación.
  4. Selecciona tu proveedor Git, repositorio y la rama desde la que quieres desplegar.
  5. Marca la casilla de Despliegue automático al hacer commit si deseas desplegar tu aplicación con cada push a tu repositorio.
  6. Selecciona el centro de datos más cercano a tu audiencia y haz clic en Continuar.
  7. Elige tu entorno de construcción y selecciona Usar Dockerfile para configurar la imagen del contenedor.
  8. Si tu Dockerfile no está en la raíz de tu repositorio, utiliza Contexto para indicar su ruta y haz clic en Continuar.
  9. Puedes dejar vacía la entrada Comando de inicio. Kinsta utiliza npm start para iniciar tu aplicación.
  10. Selecciona el tamaño del pod y el número de instancias más adecuados para tu aplicación y haz clic en Continuar.
  11. Rellena los datos de tu tarjeta de crédito y haz clic en Crear aplicación.

Tu aplicación está lista para el despliegue. Si marcaste la casilla Despliegue automático al hacer commit en el paso 5, Kinsta iniciará el despliegue automáticamente.

Resumen

En este artículo, hemos discutido algunas ventajas del uso de Docker sobre los modelos tradicionales; hemos explicado cómo crear un Dockerfile para una aplicación Next.js, construirla y desplegarla con Docker localmente, y desplegarla en Kinsta.

El alojamiento de aplicaciones de Kinsta hace que tu flujo de trabajo de desarrollo sea sencillo y eficiente.

Funciones como aplicaciones en contenedores en infraestructura GCP que se ejecutan en máquinas C2 con 37 centros de datos disponibles, integración premium con Cloudflare para una CDN de alto rendimiento que sirve tu sitio desde 260+ Puntos de Presencia, protección DDoS con cortafuegos de nivel empresarial, Edge Caching y supervisión del tiempo de actividad (con una garantía de tiempo de actividad del 99%), garantizan que tu aplicación se ejecute de forma rápida, segura y esté disponible de forma fiable en Internet.

Marcia Ramos Kinsta

Soy el Jefe del Equipo Editorial de Kinsta. Soy una entusiasta del código abierto y me encanta programar. Llevo más de 7 años escribiendo y editando textos técnicos para el sector tecnológico, y me encanta colaborar con la gente para crear contenidos claros y concisos y mejorar los flujos de trabajo.