背景
在前端开发中，我们常常需要将我们的应用部署到服务器上供客户使用。而传统的部署方式需要手动打包，并将打包好的文件上传至服务器，这种方式很麻烦且容易出错。因此，我们需要一个更加高效和可靠的部署方式。
这时候，Docker 和 Jenkins 就发挥了重要作用。Docker 可以帮我们快速构建应用的镜像，并进行容器化部署，而 Jenkins 可以帮我们实现持续集成和持续部署。
搭建部署环境
我们需要先安装 Docker 和 Jenkins，这里不进行详细介绍。安装完之后，我们需要在 Docker 中创建一个名为 react-app 的镜像。假设我们的 React 应用代码已经准备好，代码目录为 /path/to/app。
首先，我们需要在该目录下创建一个 Dockerfile 文件，文件内容如下：
-- -------------------- ---- ------- ---- ----------------------- -- ----- ------- ---- --- ---- ---------------------------- ---- ------------- -- --- --- ------- ---- - - --- --- --- ----- ---- ------------------- ---- ------------ ---------- --------------------- ------ -- --- --------- ----- ------- ------
这个 Dockerfile 的作用是：
- 首先，在 node:14.17.3-alpine3.14 镜像上构建一个中间镜像 build。
- 在中间镜像中安装应用所需的依赖并执行 npm run build 命令构建应用。
- 在 nginx:1.21.3-alpine 镜像上构建一个最终镜像，并将之前中间镜像构建好的应用复制到该镜像中，并暴露容器的 80 端口。
接下来，我们需要使用该 Dockerfile 构建镜像：
docker build -t react-app /path/to/app
构建完成后，我们可以使用 docker images 命令查看到刚才创建的名为 react-app 的镜像。
现在我们需要使用 Jenkins 来实现持续部署。
Jenkins 配置
首先，我们需要在 Jenkins 中安装 Docker 插件。安装完成后，我们需要在 Jenkins 中配置 Docker。
- 在 Jenkins 的系统管理中配置 Docker 地址和连接仓库的凭证。
- 在 Jenkins 的全局工具配置中配置 Docker CLI 工具。在 Name 填写 Docker，选择安装自动安装的 Docker CLI。
接下来，我们需要在 Jenkins 中配置构建任务。我们可以在 Jenkins 中使用 docker-compose 来进行容器化部署。我们需要在应用代码目录下创建一个 docker-compose.yml 文件，文件内容如下：
-- -------------------- ---- -------
-------- ---
---------
----
------ -----------------------
-------- -- -- ---- ------- -- --- ------
--------
- ------
------
- ---------
-----------
- ---
----
------ -----------------------
-------- -- -- ---- ------- -- --- ------
--------
- ------
------
- ---------
------------
- ------------这个 docker-compose.yml 文件的作用是：
- 构建两个镜像 web 和 api。
- 将应用代码目录挂载到容器内。
- 分别在 3000 和 3001 端口上暴露服务。
- web 和 api 之间互相依赖。
接下来，我们需要在 Jenkins 中配置构建任务：
新建任务，选择构建一个自由风格的项目。
在源码管理中配置 Git 仓库地址和凭证，并填写分支。
在构建触发器中可以选择自动触发任务，并配置触发条件。
在构建中选择执行 shell 命令，并填写：
docker-compose build docker-compose down docker-compose up -d
该命令的作用是：构建镜像、停止之前的容器并删除、启动容器。
在 Post-build Actions 中选择 Docker Push Publisher 插件，配置镜像名称和仓库地址，并勾选 push latest tag。
该过程中，我们需要使用到 Jenkins 中的凭证来进行 Docker Hub 权限操作，因此需要先创建凭证并配置到 Jenkins 中。
保存配置。
现在，我们已经成功搭建好了 Docker 和 Jenkins 环境，并完成了部署自动化。
总结
Docker 和 Jenkins 的持续部署对于前端开发来说很重要，它可以帮我们实现自动化部署，提高开发效率，同时增加部署可靠性。在进行持续集成和持续部署之前，我们需要熟悉 Docker 和 Jenkins 的使用，并具备一定的容器化开发能力。
示例代码
- Dockerfile
-- -------------------- ---- ------- ---- ----------------------- -- ----- ------- ---- --- ---- ---------------------------- ---- ------------- -- --- --- ------- ---- - - --- --- --- ----- ---- ------------------- ---- ------------ ---------- --------------------- ------ -- --- --------- ----- ------- ------
- docker-compose.yml
-- -------------------- ---- -------
-------- ---
---------
----
------ -----------------------
-------- -- -- ---- ------- -- --- ------
--------
- ------
------
- ---------
-----------
- ---
----
------ -----------------------
-------- -- -- ---- ------- -- --- ------
--------
- ------
------
- ---------
------------
- ------------- Jenkinsfile
-- -------------------- ---- -------
-------- -
----- ---
----- -
------ --------
-
------ -
------------ ------------ -
----- -
--- ------- --------- -------------- ------------------------ ---- ---------------------------
-
-
------------ ------ ------- -
----- -
-- ---
-------------- -----
-------------- ----
-------------- -- --
---
-
-
----------- ------ ----- -- ------ ----- -
----- -
------------------------------------------------ ------------------------ ----------------- ------------------ ----------------- -------------------- -
-- ------- ----- -- ------------------ -- -------------------
-
-------------------------------------------- ------------------------ -
-- --------------- -----
-
-
-
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb06375ad90b6d041e6473