使用 Docker 构建你的 Astro 站点

Docker 是一个用于使用容器构建、部署和运行应用程序的工具。

Docker 镜像和容器可以部署到许多不同的平台，如 AWS、Azure 和 Google Cloud。本指南不会介绍如何将你的网站部署到特定平台，但会向你展示如何为你的项目设置 Docker。

先决条件

在你的本地计算机上安装 Docker。你可以在这里找到你的操作系统的安装说明。
你的项目中有一个 Dockerfile。你可以在这里了解更多关于 Dockerfile 的信息，并使用下一节中的 Dockerfile 作为起点。

创建 Dockerfile

在你的项目根目录中创建一个名为 Dockerfile 的文件。这个文件包含了构建你的网站的指令，这些指令会根据你的需求而有所不同。本指南无法展示所有可能的选项，但会为你提供 SSR 和静态模式的起点。

如果你使用的包管理器不是 npm，你需要相应地调整命令。

SSR

这个 Dockerfile 将构建你的网站，并使用 Node.js 在端口 4321 上提供服务，因此需要在你的 Astro 项目中安装 Node 适配器。

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

这些只是 Dockerfile 的示例。你可以根据自己的需要进行定制。例如，你可以使用另一个镜像，比如 node:lts-alpine

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

添加 .dockerignore 文件

在你的项目中添加一个 .dockerignore 文件是最佳实践。这个文件描述了在 Docker 的 COPY 或 ADD 命令中应该忽略哪些文件或文件夹，这与 .gitignore 的工作方式非常相似。这可以加快构建过程并减小最终镜像的大小。

.DS_Store
node_modules
dist

这个文件应该与 Dockerfile 本身放在同一个目录中。阅读 .dockerignore 文档以获取更多信息

静态

Apache (httpd)

下面的 Dockerfile 将构建你的网站，并使用 Apache httpd 在端口 80 上以默认配置提供服务。

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

为了构建上面的 Dockerfile，你还需要为 NGINX 创建一个配置文件。在你的项目根目录中创建一个名为 nginx 的文件夹，并在其中创建一个名为 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;
    }
  }
}

多阶段构建 (使用 SSR)

这是一个更高级的 Dockerfile 示例，它利用 Docker 的多阶段构建来优化你网站的构建过程，当只有源代码发生变化时，它不会重新安装 npm 依赖。根据你的依赖项的大小，这甚至可以将构建时间减少几分钟。

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

方案

在你的项目根目录中运行以下命令来构建你的容器。为 <your-astro-image-name> 使用任何名称。
终端窗口
```
docker build -t <your-astro-image-name> .
```
这将输出一个镜像，你可以在本地运行它，或者将它部署到你选择的平台上。
要将你的镜像作为本地容器运行，请使用以下命令。

将 <local-port> 替换为你机器上的一个开放端口。将 <container-port> 替换为你的 Docker 容器暴露的端口（在上面的示例中是 4321、80 或 8080）。
终端窗口
```
docker run -p <local-port>:<container-port> <your-astro-image-name>
```
你应该能够通过 https://:<local-port> 访问你的网站。
现在你的网站已成功构建并打包到容器中，你可以将其部署到云提供商。有关示例，请参阅 Google Cloud 部署指南，以及 Docker 文档中的部署你的应用页面。

贡献社区赞助