在这篇博文中，我们将探索 Docker 并逐步使用简单的 Nginx 应用程序创建多阶段 Docker 构建。如果你刚刚开始使用 Docker，别担心，我会一步一步分解所有内容，以便你可以跟着做！

Dockerfile

这是我们将使用的 Dockerfile：

FROM node:18-alpine AS installer

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:latest AS deployer

COPY --from=installer /app/build /usr/share/nginx/html

解压 Dockerfile

现在，让我们一步步解开这个 Dockerfile 中发生的事情：

1. 来自节点：18-alpine AS安装程序

此行从 Docker Hub 中提取官方 Node.js 镜像（Alpine Linux 上的版本 18）。将 Docker Hub 视为一个镜像库。通过使用这一行，我们指定要使用 Node.js 作为构建第一阶段的基础镜像。

2. WORKDIR /应用程序

该命令将容器内的工作目录设置为/app。您可以将其视为在容器内为您的应用程序创建一个专用文件夹，类似于您在桌面上组织文件的方式。

3. 复制包*.json ./

在这里，我们将 package.json 和 package-lock.json 文件从本地目录复制到容器的工作目录。这些文件包含有关我们的应用程序所需的依赖项的信息。

4. 运行 npm install

此命令运行 npm install，它会安装 package.json 中指定的所有依赖项。

5. 复制。 .

这一行将其余的应用程序文件复制到容器中。它将本地目录中的所有内容带到容器内的 /app 目录中。

6. RUN npm run build

现在我们使用命令 npm run build 编译我们的应用程序。此步骤通常将我们的代码（在本例中通常是 React）转换为静态包，准备好提供给用户。此命令的输出将放置在 /app 内的构建目录中。

7. 来自 nginx:最新 AS 部署程序

在这一行中，我们切换到一个新的基础镜像：Nginx。 Nginx 是一个功能强大的 Web 服务器，可以提供静态文件，就像我们刚刚构建的那样。这是多阶段构建过程第二阶段的开始。

8. COPY --from=installer /app/build /usr/share/nginx/html

在这里，我们将前一阶段（安装程序）构建的应用程序文件复制到 Nginx 服务目录中。 --from=installer 标志告诉 Docker 从我们刚刚定义的安装程序阶段获取文件。

运行你的 Docker 容器

设置好 Dockerfile 后，您可以使用以下命令构建并运行 Docker 容器：

docker build -t your-app-name .
docker run -dp 3000:80 your-app-name

确保将 your-app-name 替换为您选择的名称。 -dp 标志将分离您的容器并将主机上的端口 3000 映射到容器中的端口 80，从而允许您通过 http://localhost:3000 访问您的应用程序。

结论

这就是你得到的！您刚刚创建了一个多阶段 Docker 构建，该构建使用 Nginx 将您的应用程序从开发带到生产。如果您对此过程有任何疑问或想法，请随时在下面发表评论！

陷阱：需要注意的事项

使用此设置时的一个常见问题是忘记映射正确的端口号。 Nginx 通常侦听容器内的端口 80，但如果您尝试访问本地计算机上的应用程序，则需要将正确的端口从容器转发到您的计算机。例如，如果您想访问 localhost:3000 上的应用程序，则需要使用 -p 3000:80 标志运行容器，以将计算机上的端口 3000 映射到容器中的端口 80。

错过这一步，您会发现自己想知道为什么一切都构建得很完美，但您无法在浏览器中访问该应用程序！

标签和提及

@piyushsachdeva
第三天视频