Skip to content

使用 Docker 构建你的 Astro 站点

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

¥Docker is a tool to build, deploy, and run applications using containers.

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

¥Docker images and containers can be deployed to many different platforms, like AWS, Azure, and Google Cloud. This recipe won’t cover how to deploy your site to a specific platform but will show you how to set up Docker for your project.

先决条件

标题部分 先决条件

¥Prerequisites

创建 Dockerfile

标题部分 创建 Dockerfile

¥Creating a Dockerfile

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

¥Create a file called Dockerfile in your project’s root directory. This file contains the instructions to build your site, which will differ depending on your needs. This guide can’t show all possible options but will give you starting points for SSR and static mode.

如果你使用 npm 之外的其他包管理器，则需要相应地调整命令。

¥If you’re using another package manager than npm, you’ll need to adjust the commands accordingly.

SSR

标题部分 SSR

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

¥This Dockerfile will build your site and serve it using Node.js on port 4321 and therefore requires the Node adapter installed in your Astro project.

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

添加 .dockerignore

标题部分 添加 .dockerignore

¥Adding a .dockerignore

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

¥Adding a .dockerignore file to your project is best practice. This file describes which files or folders should be ignored in the Docker COPY or ADD commands, very similar to how .gitignore works. This speeds up the build process and reduces the size of the final image.

.dockerignore
.DS_Store
node_modules
dist

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

¥This file should go in the same directory as the Dockerfile itself. Read the .dockerignore documentation for extra info

静止的

标题部分 静止的

¥Static

Apache (httpd)

标题部分 Apache (httpd)

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

¥The following Dockerfile will build your site and serve it using Apache httpd on port 80 with the default configuration.

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

标题部分 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

为了构建上面的 Dockerfile，你还需要为 NGINX 创建一个配置文件。在项目的根目录中创建一个名为 nginx 的文件夹，并在其中创建一个名为 nginx.conf 的文件。

¥In order to build the Dockerfile above, you’ll also need to create a configuration file for NGINX. Create a folder called nginx in your project’s root directory and create a file called nginx.conf inside.

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）

标题部分 多阶段构建（使用 SSR）

¥Multi-stage build (using SSR)

下面是一个更高级的 Dockerfile 示例，借助 Docker 的 多阶段构建，它可以在仅源代码发生更改时不重新安装 npm 依赖，从而优化站点的构建过程。这甚至可以将构建时间缩短几分钟，具体取决于依赖的大小。

¥Here’s an example of a more advanced Dockerfile that, thanks to Docker’s multi-stage builds, optimizes the build process for your site by not reinstalling the npm dependencies when only the source code changes. This can reduce the build time even by minutes, depending on the size of your dependencies.

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

秘诀

标题部分 秘诀

¥Recipe

  1. Build your container by running the following command in your project’s root directory. Use any name for <your-astro-image-name>:

    终端窗口
    docker build -t <your-astro-image-name> .

    This will output an image, which you can run locally or deploy to a platform of your choice.

  2. To run your image as a local container, use the following command.

    Replace <local-port> with an open port on your machine. Replace <container-port> with the port exposed by your Docker container (4321, 80, or 8080 in the above examples.)

    终端窗口
    docker run -p <local-port>:<container-port> <your-astro-image-name>

    You should be able to access your site at http://localhost:<local-port>.

  3. Now that your website is successfully built and packaged in a container, you can deploy it to a cloud provider. See the Google Cloud deployment guide for one example, and the Deploy your app page in the Docker docs.

Astro 中文网 - 粤ICP备13048890号