基于docker jenkins nginx gitee实现前端自动化部署

部署对比

手动部署

平时我们在上线一个新项目的时候，可能需要先执行打包指令，然后登录服务器，将dist包丢到服务器nginx/html的文件下，看似很简单，但是当项目频繁迭代，一直重复性的操作也是很浪费时间。

自动部署

当然使用自动部署的时候，当我们每次推代码到仓库的时候，后台自动打包，同步nginx文件，实现自动部署，我们只需要执行git push origin xx即可，想想是不是很香。

自动部署流程介绍

通过Jenkins和gitee仓库打通,当我们往指定的分支push代码后,会触发webhook的钩子，这个钩子会像jenkins发送一个请求，会自动触发Jenkins的任务. 通过Jenkins任务, 执行脚本,通过脚本自动打包,并将打包好的dist文件自动更新到Nginx指定的目录中,来达到前端自动化部署的目的。整个流程不是很复杂，也不是那么难以理解。但是要配置的东西比较多，下面就介绍如何实现前端自动化部署.

前期准备

• gitee仓库
• 阿里云服务器一台
• 远程链接工具(xshell xftp)

环境:

• 阿里云服务器: macos 8.2
• 远程链接工具：finalshell
• nginx: 1.10.3
• docker: 20.10.11
• docker-compose: 1.27.3
• nodejs: 14.9.0
• jenkins镜像

1.安装nginx环境

https://www.linuxidc.com/Linux/2016-09/134907.htm
安装nginx请看上面这个链接的文章，本人也是全程按照上述操作执行，也是成功安装。
nginx安装包下载

2.安装docker环境

1. 安装docker

sudo yum install docker-ce

2. 启动docker

sudo systemctl enable docker // 设置开机自启
sudo systemctl start docker // 启动docker

3. 查看版本

docker -v

显示docker版本号，代表安装成功

3.安装docker-compose

1. 访问 https://github.com/docker/compose/releases GitHub 版本发行页面
2. 下载 docker-compose-Linux-x86_64 文件并上传至服务器，然后执行如下命令将其移动到 /usr/local/bin，并改名为docker-compose
   docker-compose安装包
3. 提升权限

 sudo chmod +x /usr/local/bin/docker-compose

4. 创建软链

sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose

5. 查看版本

docker-compose -v

显示版本号，代表安装成功

4.安装jenkins环境

1. 安装jenkins镜像

docker pull jenkins/jenkins

2. 查看镜像

docker images

5.编写docker-compose目录

1. 在nginx根目录的home文件夹下新建compose 和 jenkins文件夹,及其子文件

+ compose
  - docker-compose.yml  // docker-compose执行文件
+ jenkins
  - jenkins_home       // jenkins挂载卷

6.编写docker-compose.yml

version: '3'
services:                                      # 集合
  docker_jenkins:
    user: root                                 # 为了避免一些权限问题 在这我使用了root
    restart: always                            # 重启方式
    image: jenkins/jenkins:lts                 # 指定服务所使用的镜像 在这里我选择了 LTS (长期支持)
    container_name: jenkins                    # 容器名称
    ports:                                     # 对外暴露的端口定义
      - 8080:8080
      - 50000:50000
    volumes:                                   # 卷挂载路径
      - /home/jenkins/jenkins_home/:/var/jenkins_home  # 这是我们一开始创建的目录挂载到容器内的jenkins_home目录
      - /var/run/docker.sock:/var/run/docker.sock
      - /usr/bin/docker:/usr/bin/docker                # 这是为了我们可以在容器内使用docker命令
      - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
  docker_nginx:
    restart: always
    image: nginx
    container_name: nginx
    ports:
      - 8090:80
      - 80:80
      - 433:433
    volumes:
      - /home/nginx/conf.d/:/etc/nginx/conf.d
      - /home/webserver/static/jenkins/dist/:/usr/share/nginx/html

7.启动docker-compose（创建容器）

回到compose目录下，执行如下指令

docker-compose up -d

执行 docker ps 查看容器情况

在容器启动后，如上图所示代表成功，这个时候可以在浏览器输入服务器ip:8080进入jenkins管理界面。

注意：密码在 /home/jenkins/jenkins_home/secrets/initialAdiminPassword

输入密码之后下载jenkins插件，它会让你注册账号密码，可以直接跳过，下次登录jenkins管理页面的时候，默认账号为admin，密码就是/home/jenkins/jenkins_home/secrets/initialAdiminPassword里的密码

安装成功进入下面这个界面

8. 安装jenkins插件

• 安装 Publish Over SSH 作用: 将构建后的编译产出发布到服务器
• 安装Generic Webhook Trigger插件 实现Jenkins+WebHooks持续集成
• 安装nodejs插件
  

9.全局配置ssh serve

配置完之后点击test，返回success代表配置成功，如果报错根据报错结果查看自己是不是服务器地址还是什么写错了

10. 全局工具配置 node.js

11. jenkins 和 gitee 集成

11.1 在服务器生成ssh秘钥，配置用于免密登录

ssh-keygen -t rsa //生成ssh秘钥命令

我生成的秘钥在/root/.ssh/(不知道你们在哪，会有提示，进入对应文件夹即可)
id_rsa: 私钥，需放在jenkins的凭证里
id_rsa.pub: 公钥， 需放在gitee里
authorized_keys：就是为了让两个 Linux 机器之间使用 ssh 不需要用户名和密码。采用了数字签名 RSA 或者 DSA 来完成这个操作。

11.2 将生成的私钥 id_rsa添加到jenkins凭据中

11.3 登陆gitee，在gitee设置中配置id_rsa.pub公钥

12. 在jenkins里面新建项目

12.1 jenkens首页点击新建任务，创建一个任务

12.2 源码管理

12.3 构建触发器

12.3.1 方式选择Generic Webhook Trigger（一开始下载的插件）

12.3.2 配置token

12.3.3 关联gitee

12.4 构建环境

选择事先在全局工具中配置的node.js

12.5 构建

12.5.1 构建选择执行shell

12.5.2 将编译产物打tar包，留作构建后操作使用

node -v &&
npm -v &&
pwd &&
echo '构建的版本号:'${BUILD_NUMBER}
npm install &&
npm install @vue/cli-service &&
npm run build:prod &&
tar -zcvf dist.tar ./dist
echo '构建完成'

12.6 构建后操作

12.6.1 将tar包放到服务器指定目录

12.6.2 解压tar包，将物料放置在nginx工作目录下

13. 写在最后

现在只需要向gitee的master分支推送代码，然后等待jenkins的脚本跑完，访问http:xx.xx.xx.xx:9091即可。