在现代 web 开发中，持续集成 (CI) 和持续部署 (CD) 是保持高质量和可部署软件的关键实践。本文将引导你使用 Docker 和 Jenkins 为 React.js 应用程序设置 CI/CD 管道。到文章结束时，你将拥有一套完全自动化的系统，用于构建、测试和部署你的 React 应用程序的功能。
要为什么使用 Docker 和 Jenkins 来部署 React.js？Docker 简化了部署过程，为你的应用创建了一个一致的环境。使用 Docker，你可以将 React.js 应用及其所有依赖包打包成一个容器，确保它在开发、测试和生产环境中一致运行。
Jenkins 是一个强大的 CI/CD 持续集成与持续交付工具，能够自动构建、测试和部署你的应用。将 Jenkins 与 Docker 配套使用可以使流程更顺畅，Jenkins 负责构建 Docker 镜像并运行测试，并将应用部署到你选择的环境中。
为React.js构建Dockerfile（Dockerfile）设置 CI/CD 管道时的第一步是为你的 React.js 应用程序创建一个 Dockerfile 文件。这个 Dockerfile 文件定义了如何在 Docker 容器中构建和运行你的 React 应用程序。这里有一个 Dockerfile 的示例：
# 步骤 1：构建 React 应用程序
FROM node:18 AS build
# 设置容器中的工作目录
WORKDIR /app
# 复制 package.json 和 package-lock.json（或 yarn.lock）
COPY package*.json ./
# 安装依赖项
RUN npm install
# 复制应用程序的其余文件
COPY . .
# 构建 React 应用程序
RUN npm run build
# 步骤 2：运行 React 应用程序
FROM nginx:alpine
# 复制构建输出
COPY --from=build /app/build /usr/share/nginx/html
# 公开端口 80
EXPOSE 80
# CMD ['nginx', '-g', 'daemon off;']，此命令启动 Nginx 服务器并使其不脱离控制终端。- 建设阶段 ：
- 使用
node:18镜像来安装依赖包并构建 React 应用。 - 构建时会在
/app/build目录下生成静态文件。
2. 服务步骤:
- 使用
nginx:alpine镜像来服务构建的静态文件。 - 从上一阶段复制构建的静态文件，并配置 Nginx 在 80 端口上服务这些文件。
准备好 Dockerfile 之后，下一步是进行配置 Jenkins 来自动化构建、测试和部署的过程。以下是一个定义 CI/CD 流水线的示例 Jenkinsfile：
pipeline {
agent any
environment {
DOCKER_IMAGE_NAME = 'my-react-app'
DOCKER_REGISTRY = 'my-docker-registry.example.com'
DOCKER_REGISTRY_CREDENTIALS_ID = 'docker-registry-credentials'
DEPLOYMENT_SERVER_IP = 'your.server.ip.address'
DEPLOYMENT_PATH = '/var/www/my-react-app'
SSH_CREDENTIALS_ID = 'ssh-credentials-id'
}
stages {
stage('检出代码') {
steps {
// 从仓库检出源代码
git url: 'https://github.com/your-repo/react-app.git', branch: 'main'
}
}
stage('构建Docker镜像') {
steps {
script {
// 构建名为 'my-react-app:latest' 的Docker镜像
docker.build("${DOCKER_IMAGE_NAME}:latest")
}
}
}
stage('测试（未实现）') {
steps {
script {
// 测试占位符
}
}
}
stage('推送Docker镜像') {
steps {
script {
// 登录Docker仓库
docker.withRegistry("https://${DOCKER_REGISTRY}", "${DOCKER_REGISTRY_CREDENTIALS_ID}") {
// 将Docker镜像推送到仓库
docker.image("${DOCKER_IMAGE_NAME}:latest").push('latest')
}
}
}
}
stage('通过SSH部署Docker镜像到服务器') {
steps {
script {
// 通过SSH部署Docker镜像到服务器
sh '''
ssh -i ${SSH_CREDENTIALS_ID} user@${DEPLOYMENT_SERVER_IP} '
docker pull ${DOCKER_REGISTRY}/${DOCKER_IMAGE_NAME}:latest &&
docker stop my-running-container || true &&
docker rm my-running-container || true &&
docker run -d --name my-running-container -p 80:80 ${DOCKER_REGISTRY}/${DOCKER_IMAGE_NAME}:latest
'
'''
}
}
}
}
post {
always {
// 构建后清理工作区
cleanWs()
}
success {
// 部署成功
echo '部署成功'
}
failure {
// 部署失败
echo '部署失败'
}
}
}它是怎么工作的：
结账环节:
- 从你的 Git 仓库里取回源代码
构建 Docker 镜像的步骤:
使用 Dockerfile 构建一个 Docker 镜像，并将其标记为 latest 标签。
测试阶段。
- 此为运行测试的占位符。您可以在此阶段自定义并运行您具体的测试。
推送 Docker 镜像的步骤:
- 登录到你的 Docker 注册表并推送新构建的镜像。
部署阶段:
- 使用 SSH 连接到您的部署服务器，拉取最新的 Docker 镜像，如果存在旧容器，则停止并删除它，然后用更新的镜像启动一个新的容器。
发帖后的操作:
- 清理Jenkins工作区环境，并根据部署是否成功记录相应的日志消息。
通过结合Docker和Jenkins，你可以为你的React.js应用程序实现一个流畅的CI/CD流水线。Docker确保在所有阶段保持一致的环境，而Jenkins则自动化构建、测试和部署的过程。这样不仅提高了开发效率，还提升了部署的可靠性和可扩展性。
随时随地看视频
