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

• Docker está instalado en tu máquina local. Puedes encontrar las instrucciones de instalación para tu sistema operativo aquí.
• Un archivo Dockerfile en tu proyecto. Puedes obtener más información sobre Dockerfiles aquí y utilizar los Dockerfiles de la siguiente sección como punto de partida.

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

Tenlo en cuenta

Estos son solo ejemplos de Dockerfiles. Puedes personalizarlos según tus necesidades. Por ejemplo, podrías utilizar otra imagen, como node:lts-alpine:

Dockerfile

FROM node:lts as runtime
FROM node:lts-alpine as runtime

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

Recomendación

Utiliza este enfoque para sitios web simples que no necesiten ninguna configuración especial. Para sitios web más complejos, se recomienda utilizar una configuración personalizada, ya sea en Apache o NGINX.

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>:

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.

2. 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).

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>.

3. 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.