Construye tu sitio de Astro con Docker

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

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

Requisitos previos

Docker instalado en tu máquina local. Puedes encontrar instrucciones de instalación para tu sistema operativo aquí.
Un Dockerfile en tu proyecto. Puedes aprender más sobre Dockerfiles aquí y usar los Dockerfiles de la siguiente sección como punto de partida.

Crear un Dockerfile

Crea un archivo llamado Dockerfile en el directorio raíz de tu proyecto. Este archivo contiene las instrucciones para compilar tu sitio, que diferirán dependiendo de tus necesidades. Esta guía no puede mostrar todas las opciones posibles pero te dará puntos de partida para SSR y modo estático.

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

SSR

Este Dockerfile compilará tu sitio y lo servirá usando Node.js en el puerto 4321 y por lo tanto requiere el Node adapter instalado en tu proyecto de Astro.

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"]

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

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

Añadir un .dockerignore

Añadir un archivo .dockerignore a tu proyecto es una buena práctica. Este archivo describe qué archivos o carpetas deberían ser ignorados en los comandos COPY o ADD de Docker, muy similar a cómo funciona .gitignore. Esto acelera el proceso de build y reduce el tamaño de la imagen final.

.DS_Store
node_modules
dist

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

Estático

Apache (httpd)

El siguiente Dockerfile compilará tu sitio y lo servirá usando Apache httpd en el puerto 80 con la configuración por defecto.

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

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 compilar 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 crea un archivo llamado nginx.conf dentro.

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;
    }
  }
}

Build multi-stage (usando SSR)

Aquí hay un ejemplo de un Dockerfile más avanzado que, gracias a los multi-stage builds de Docker, optimiza el proceso de build de tu sitio al no reinstalar las dependencias de npm cuando solo cambia el código fuente. Esto puede reducir el tiempo de build incluso por minutos, dependiendo del tamaño de tus dependencias.

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 --omit=dev

FROM base AS build-deps
RUN npm install

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

Compila tu contenedor ejecutando el siguiente comando en el directorio raíz de tu proyecto. Usa cualquier nombre para <your-astro-image-name>:
Ventana de la terminal
```
docker build -t <your-astro-image-name> .
```
Esto producirá una imagen, que puedes ejecutar localmente o desplegar en la plataforma que elijas.
Para ejecutar tu imagen como un contenedor local, usa el siguiente comando.

Reemplaza <local-port> con un puerto abierto en tu máquina. Reemplaza <container-port> con el puerto expuesto por tu contenedor de Docker (4321, 80, o 8080 en los ejemplos anteriores.)
Ventana de la terminal
```
docker run -p <local-port>:<container-port> <your-astro-image-name>
```
Deberías poder acceder a tu sitio en http://localhost:<local-port>.
Ahora que tu sitio se ha compilado y empaquetado en un contenedor con éxito, puedes desplegarlo en un proveedor de cloud. Consulta la guía de despliegue de Google Cloud para un ejemplo, y la página Deploy your app en la documentación de Docker.

Contribuir Comunidad Patrocinar