Jenkins Docker 自动部署 React 项目
简介
Jenkins 是一个开源的自动化服务器，可以用于自动化构建、测试和部署软件项目。Docker 是一个开源的容器化平台，可以帮助开发者将应用程序及其依赖项打包成一个轻量级、可移植且自包含的容器。本文将介绍如何使用 Jenkins 和 Docker 自动部署 React 项目。
准备工作
- 安装 Docker: 在服务器上安装 Docker，确保 Docker 守护进程正在运行。
- 安装 Jenkins: 在服务器上安装 Jenkins，确保 Jenkins 服务正在运行。
流程图
flowchart TD
A(代码提交) --> B(触发 Jenkins 构建)
B --> C(Jenkins 构建 Docker 镜像)
C --> D(推送 Docker 镜像到 Docker 仓库)
D --> E(在服务器上拉取 Docker 镜像)
E --> F(运行 Docker 容器)
Jenkins 配置
- 创建一个新的 Jenkins 项目。
- 在构建触发器部分选择 "构建后的操作"，并勾选 "推送到 Docker 仓库"。
- 在构建环境部分选择 "使用 Docker 容器"。
- 在 Docker 配置部分填写 Docker 仓库的认证信息。
- 在构建部分选择 "执行 shell" 并输入以下命令：
# 构建 React 项目
npm install
npm run build
# 构建 Docker 镜像
docker build -t myapp .
# 推送 Docker 镜像到 Docker 仓库
docker push myapp
Docker 配置
- 在服务器上创建一个新的 Dockerfile，用于构建 React 项目的 Docker 镜像。
FROM node:12-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "start"]
- 在服务器上创建一个新的
docker-compose.yml文件，用于运行 Docker 容器。
version: "3"
services:
myapp:
image: myapp
ports:
- 8080:80
React 项目配置
- 在 React 项目的根目录中创建一个新的 Dockerfile，用于构建 React 项目的 Docker 镜像。
FROM node:12-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
- 在项目的根目录中创建一个新的
.dockerignore文件，用于指定在构建 Docker 镜像时要忽略的文件。
node_modules
build
运行流程
- 开发者将代码提交到版本控制系统中。
- Jenkins 监听到代码提交，并触发项目的构建。
- Jenkins 在 Docker 容器中构建 React 项目，并构建 Docker 镜像。
- Jenkins 将 Docker 镜像推送到 Docker 仓库。
- 在服务器上拉取 Docker 镜像。
- 启动 Docker 容器，部署 React 项目。
- 访问服务器的 IP 地址和端口号，即可查看部署的 React 项目。
类图
classDiagram
class Jenkins {
+ startBuild()
+ pushImage()
+ ...
}
class Docker {
+ buildImage()
+ pushImage()
+ ...
}
class ReactProject {
+ build()
+ ...
}
Jenkins --> Docker
Docker --> ReactProject
总结
使用 Jenkins 和 Docker 自动部署 React 项目可以大大简化部署过程，提高开发效率。通过设置 Jenkins 的构建流程以及 Docker 配置，开发者只需提交代码，即可自动构建、测试和部署 React 项目。这种自动化部署方式可以确保每次部署都是一致的，并且可以轻松地进行回滚和扩展。
