部署对比

手动部署

平时我们在上线一个新项目的时候,可能需要先执行打包指令,然后登录服务器,将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
  1. 启动docker
sudo systemctl enable docker // 设置开机自启
sudo systemctl start docker // 启动docker
  1. 查看版本
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
  1. 创建软链
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
  1. 查看版本
docker-compose -v

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

4.安装jenkins环境

  1. 安装jenkins镜像
docker pull jenkins/jenkins
  1. 查看镜像
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即可。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐