当前位置：首页 > 文章列表 > 文章 > 前端 > CKA 完整课程日 ulti Stage Docker 构建

CKA 完整课程日 ulti Stage Docker 构建

来源：dev.to 2024-10-25 22:57:56 0浏览收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《CKA 完整课程日 ulti Stage Docker 构建》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

在这篇博文中，我们将探索 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。

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