部署对比

手动部署

平时我们在上线一个新项目的时候，可能需要先执行打包指令，然后登录服务器，将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环境

安装docker

sudo yum install docker-ce

启动docker

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

查看版本

docker -v

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

3.安装docker-compose

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

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

创建软链

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

查看版本

docker-compose -v

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

4.安装jenkins环境

安装jenkins镜像

docker pull jenkins/jenkins

查看镜像

docker images

5.编写docker-compose目录

在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                                 # 为了避免一些权限问题 在这我使用了rootrestart: always                            # 重启方式image: jenkins/jenkins:lts                 # 指定服务所使用的镜像 在这里我选择了 LTS (长期支持)container_name: jenkins                    # 容器名称ports:                                     # 对外暴露的端口定义- 8080:8080- 50000:50000volumes:                                   # 卷挂载路径- /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-composedocker_nginx:restart: alwaysimage: nginxcontainer_name: nginxports:- 8090:80- 80:80- 433:433volumes:- /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即可。

基于docker jenkins nginx gitee实现前端自动化部署相关推荐

Jenkins结合Gitee(码云)自动化部署Springboot项目（比较详细）
Jenkins结合码云自动化部署Springboot项目一.准备工作(有的话,可以忽略) 1. 安装wget 2. 安装jdk 3. 安装maven 4. 安装git 二.开始部署 (jenkins ...
docker+Jenkins+nginx实现前端自动部署详细教程
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群本文来自交流群的管理员,亚北大佬的投稿,感谢亚北- 本次部署大概步骤如下: 准备环境安装docker 安装docker-compose ...
Docker搭建 Nginx+PHP+MySQL 环境并部署WordPress实践
本文给大家分享的是作者基于Docker搭建 Nginx+PHP+MySQL 环境并部署WordPress的详细过程,非常的全面,有需要的小伙伴可以参考下 Docker基于LXC实现了把软件封装到一个完 ...
基于 Docker 和 GitLab 的前端自动化部署实践笔记
基于 Docker 和 GitLab 的前端自动化部署实践笔记随着接触的项目越来越多,在部署测试流程上重复耗时工作也越来越多,所以对前端工作的CI/CD实现愈发迫在眉睫. 前端开发由于三大框架的崛 ...
centos+jenkins+nginx+gitlab前端自动化部署全记录
0. 前言我们在开发一个新的项目时,总是需要将前端部署到测试服务器上,给测试或者产品访问.简单的来说,如果想部署前端到服务器,服务器需要提供一个服务来访问前端.如果我们在开发中没有涉及Node.js ...
前端自动化部署，基于scp2，ssh2
前端自动化部署,基于scp2,ssh2 配置文件 deploy/products.js /** @author: linzl* @method: * @param: * @Date: 2021-05- ...
基于Hyper-V、centos、搭建宝塔Linux结合gitLab实现前端自动化部署
本文涉及内容较为繁杂,自己也是头一次接触这方面内容,主要也是作为记录以免睡一觉起来忘了.. 一.准备工作 1.在windows控制面板-程序和功能里开启Hyper-V相关功能: 2.在菜单栏管理工具里 ...
nginx搭建文件服务器脚本,基于docker搭建nginx文件服务器的方法步骤
1.在本机新建配置文件docker_nginx.conf server { listen 7070; server_name localhost; charset utf-8; location /f ...
AWS DevOps – 配合Jenkins和CodeDeploy实现代码自动化部署
AWS DevOps – 配合Jenkins和CodeDeploy实现代码自动化部署 Amazon ElastiCache 连接至 Redis 节点通过 AWS Command Line Inter ...

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