前言

平时在公司工作时，使用的是公司开发的CI/CD（持续集成/持续部署）工具，部署上线只需要动动小手就可以，但是并不知道背后的工作流程。因此，决定亲自搭建一个部署平台来学习一下~ 在这里简单介绍一下本文使用的技术栈：

Docker，用于虚拟环境搭建
Jenkins，开源的持续集成软件
Nginx，反向代理服务器

工作流程

想要实现的工作流程是开发者在本地修改代码并提交远端，自动触发CI/CD。具体工作流程如下：

本地push代码到远端github/gitte仓库
github/gitte仓库触发hook，向Jenkins服务器发送POST请求（包含分支名及改动等）
Jenkins服务器拉取远端仓库代码
Jenkins服务器利用SSH登录部署服务器，将代码传输至指定路径下
Jenkins执行构建命令（本文使用Docker，因此这里进行镜像构建）
使用生成的镜像创建新的Docker实例（在此之前需要删掉旧的容器），运行Docker实例并绑定端口

清楚了整个部署流程我们来实践一下！

一、安装Jenkins

友情提示：本文的教程需要部署服务器安装有Docker~

因为我本身没有购买服务器，所以就拿自己的一台linux台式机作为了部署服务器。现在我们需要在部署服务器上安装Jenkins。有两种选择，一种就是在linux使用命令安装Jenkins，另一种是使用Docker安装。本文使用第二种方法，使用Docker安装Jenkins。

1.Docker安装Jenkins

使用Docker安装就得先安装Jenkins镜像：

docker pull jenkins/jenkins:lts-jdk11

也可以去DockerHub选择自己想要的版本。

镜像拉取之后，运行镜像：

docker run --name jenkins_node -d -v /home/${yourpath}/jenkins_home:/var/jenkins_home -p 8081:8080 -p 50000:50000 jenkins/jenkins:lts

现在我们已经启动了一个Jenkins容器，端口是8081。使用docker ps -a查看，已经有一个容器在运行了：

2.配置Jenkins

在浏览器打开http://localhost:8081

去这个路径拷贝初试密码完成登录

/home/${yourpath}/jenkins_home/secrets/initialAdminPassword

选择推荐安装：

然后进行用户名和密码设置，完成后进入主页面，点击系统管理，去安装SSH插件：

点击插件管理：

搜索Publish Over SSH：

进行下载安装：

安装完成后可能需要重启Jenkins生效，我们使用docker重启Jenkins容器：

docker restart 容器ID

配置SSH

接下来配置SSH：

下拉到Publish over SSH位置：填上你的部署服务器HOST，SSH登录的Username和密码，或者你也可以选择使用密钥登录

点击应用，然后在底部点Test Configuration按钮进行SSH连接测试，成功则显示『Success』

安装Node.js插件

在安装插件的位置，搜索Node.js进行安装，步骤和上面的Publish Over SSH安装一样。然后进行工具配置：

二、上传自己的代码到远端仓库

本文为了测试部署流程，所以简单使用了creatReact命令生成一个前端项目：

npx create-react-app react-demo

配置Dockerfile

在项目的根目录下创建Dockerfile文件，内容如下：

FROM node:16 AS builder

WORKDIR /app

COPY ./ /app

RUN npm install && npm run build


FROM nginx

COPY --from=builder /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

该Dockerfile有两个阶段的镜像，builder是用来构建项目，获取构建产物，然后将构建的产物放在nginx镜像的/usr/share/nginx/html目录下。nginx.conf为Nginx的配置文件：

Nginx配置

在项目根目录下创建nginx.conf文件：

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;
    gzip_types text/plain application/javascript text/css;

    # 虚拟主机server块
    server {
        # 端口
        listen   80;
        # 匹配请求中的host值
        server_name  localhost;
        
        # 监听请求路径
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }

    }

    include /etc/nginx/conf.d/*.conf;
}

然后将项目文件上传至gitee仓库（github也可以）。

三、部署项目

在总面板点击『新建任务』

创建一个自由风格的项目：

git仓库地址：

如果需要执行push操作直接部署，需在『构建触发器』部分选择『Generic Webhook Trigger』，Generic Webhook Trigger是一个插件，需要下载，下载后重启Jenkins即可。

在『Post content parameters』里可以配置，触发的条件

配置master分支触发：

具体的配置可以去这里参考。

此外，还要配置gitte或者github的hook：

URL格式为 http://<User ID>:<API Token>@<Jenkins IP地址>:端口/generic-webhook-trigger/invoke userid和api token在jenkins的系统管理-管理用户-admin-设置里

勾选提供node环境：

在构建后操作部分选择ssh：

图中构建镜像，启动容器的命令为：

docker stop react-demo || true \
 && docker rm react-demo || true \
 && cd /home/apollo/jenkins_home/workspace/react-demo  \
 && docker build  -t react-demo  . \
 && docker run -d -p 8083:80 --name react-demo react-demo

保存后，点击立即构建：

部署成功后，访问http://localhost:8083

上述命令将部署服务器的8083端口与nginx容器的80端口绑定了，所以访问http://localhost:8083 就可以访问到我们部署的服务：

非常适合前端小白的Docker+Jenkins+Nginx前端部署教程

前言