使用Docker和Jenkins简化React.js应用的持续集成与持续部署流程：一份实用指南

在现代 web 开发中，持续集成 (CI) 和持续部署 (CD) 是保持高质量和可部署软件的关键实践。本文将引导你使用 Docker 和 Jenkins 为 React.js 应用程序设置 CI/CD 管道。到文章结束时，你将拥有一套完全自动化的系统，用于构建、测试和部署你的 React 应用程序的功能。

Docker 简化了部署过程，为你的应用创建了一个一致的环境。使用 Docker，你可以将 React.js 应用及其所有依赖包打包成一个容器，确保它在开发、测试和生产环境中一致运行。

Jenkins 是一个强大的 CI/CD 持续集成与持续交付工具，能够自动构建、测试和部署你的应用。将 Jenkins 与 Docker 配套使用可以使流程更顺畅，Jenkins 负责构建 Docker 镜像并运行测试，并将应用部署到你选择的环境中。

设置 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 服务器并使其不脱离控制终端。

1. 建设阶段 ：

• 使用 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则自动化构建、测试和部署的过程。这样不仅提高了开发效率，还提升了部署的可靠性和可扩展性。