Saltearse al contenido

Construye tu sitio de Astro con Docker

Docker es una herramienta para construir, desplegar y ejecutar aplicaciones utilizando contenedores.

Las imágenes y contenedores de Docker se pueden implementar en muchas plataformas diferentes, como AWS, Azure y Google Cloud. Esta guía no cubrirá cómo implementar tu sitio en una plataforma específica, pero te mostrará cómo configurar Docker para tu proyecto.

Prerrequesitos

Creando un Dockerfile

Crea un archivo llamado Dockerfile en el directorio raíz de tu proyecto. Este archivo contiene las instrucciones para construir tu sitio, las cuales variarán según tus necesidades. Esta guía no puede mostrar todas las opciones posibles, pero te proporcionará puntos de partida para los modos SSR y estático.

Si estás usando otro gestor de paquetes que no sea npm, deberás ajustar los comandos en consecuencia.

SSR

Este Dockerfile construirá tu sitio y lo servirá utilizando Node.js en el puerto 4321, por lo tanto, requiere tener instalado el adaptador de Node en tu proyecto de Astro.

Dockerfile
FROM node:lts AS runtime
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
ENV HOST=0.0.0.0
ENV PORT=4321
EXPOSE 4321
CMD node ./dist/server/entry.mjs

Agregar un .dockerignore

Agregar un archivo .dockerignore a tu proyecto es una buena práctica. Este archivo describe qué archivos o carpetas deben ignorarse en los comandos COPY o ADD de Docker, muy similar a cómo funciona .gitignore. Esto acelera el proceso de construcción y reduce el tamaño de la imagen final.

.dockerignore
.DS_Store
node_modules
dist

Este archivo debe ir en el mismo directorio que el Dockerfile en sí. Lee la documentación de .dockerignore para obtener información adicional.

Estático

Apache (httpd)

El siguiente Dockerfile construirá tu sitio y lo servirá utilizando Apache htppd en el puerto 80 con la configuración predeterminada.

Dockerfile
FROM node:lts AS build
WORKDIR /app
COPY . .
RUN npm i
RUN npm run build
FROM httpd:2.4 AS runtime
COPY --from=build /app/dist /usr/local/apache2/htdocs/
EXPOSE 80

NGINX

Dockerfile
FROM node:lts AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine AS runtime
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 8080

Para construir el Dockerfile anterior, también necesitarás crear un archivo de configuración para NGINX. Crea una carpeta llamada nginx en el directorio raíz de tu proyecto y dentro de ella crea un archivo llamado nginx.conf.

nginx.conf
worker_processes 1;
events {
worker_connections 1024;
}
http {
server {
listen 8080;
server_name _;
root /usr/share/nginx/html;
index index.html index.htm;
include /etc/nginx/mime.types;
gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
error_page 404 /404.html;
location = /404.html {
root /usr/share/nginx/html;
internal;
}
location / {
try_files $uri $uri/index.html =404;
}
}
}

Construcción de múltiples etapas (usando SSR)

Aquí hay un ejemplo de un Dockerfile más avanzado que, gracias a las construcciones de varias etapas de Docker, optimiza el proceso de compilación de tu sitio al no reinstalar las dependencias de npm cuando solo cambia el código fuente. Esto puede reducir el tiempo de compilación incluso en minutos, dependiendo del tamaño de tus dependencias.

Dockerfile
FROM node:lts AS base
WORKDIR /app
# By copying only the package.json and package-lock.json here, we ensure that the following `-deps` steps are independent of the source code.
# Therefore, the `-deps` steps will be skipped if only the source code changes.
COPY package.json package-lock.json ./
FROM base AS prod-deps
RUN npm install --production
FROM base AS build-deps
RUN npm install --production=false
FROM build-deps AS build
COPY . .
RUN npm run build
FROM base AS runtime
COPY --from=prod-deps /app/node_modules ./node_modules
COPY --from=build /app/dist ./dist
ENV HOST=0.0.0.0
ENV PORT=4321
EXPOSE 4321
CMD node ./dist/server/entry.mjs

Receta

  1. Para construir tu contenedor, ejecuta el siguiente comando en el directorio raíz de tu proyecto. Utiliza cualquier nombre para <tu-nombre-de-imagen-de-astro>:
Terminal window
docker build -t <tu-nombre-de-imagen-de-astro> .

Esto generará una imagen que podrás ejecutar localmente o implementar en una plataforma de tu elección.

  1. Para ejecutar tu imagen como un contenedor local, utiliza el siguiente comando.

Reemplaza <puerto-local> con un puerto abierto en tu máquina. Reemplaza <puerto-de-contenedor> con el puerto expuesto por tu contenedor Docker (4321, 80 o 8080 en los ejemplos anteriores).

Terminal window
docker run -p <puerto-local>:<puerto-de-contenedor> <tu-nombre-de-imagen-de-astro>

Deberías poder acceder a tu sitio en http://localhost:<puerto-local>.

  1. Ahora que tu sitio web se ha construido y empaquetado correctamente en un contenedor, puedes implementarlo en un proveedor de servicios en la nube. Consulta la guía de implementación en Google Cloud para obtener un ejemplo y la página Deploy your app en la documentación de Docker.