Vue项目+Nginx+Jenkins+Gitee实现项目的自动化部署

1.下载nginx服务器：

下载地址：http://nginx.org/

2.上传nginx并安装：

首先下载工具：xftp、xshell工具。

下载地址：https://www.xshell.com/zh/xshell/

用xftp上传下载好的nginx到服务器

3.用xshell登录服务器终端,解压安装nginx

切换到你上传的目录：cd /opt

解压文件：tar -zxvf nginx-1.23.4.tar.gz -C /opt 会在目录下得到：nginx-1.23.4 文件

安装依赖：

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

4.生成MakeFile可编译文件

进入解压后的nginx-1.23.4 目录。

cd nginx-1.23.4

执行执行configure脚本，设置安装nginx的初始化配置（--with-http_ssl_module：启动 SSL 的支持），生成 Makefile 可编译文件

生成可编译文件：./configure --with-http_ssl_module

编译：make

安装：make install

5.启动nginx

进入 nginx 安装目录下的sbin目录

cd nginx 安装目录（默认 /usr/local/nginx/sbin）

执行脚本启动 nginx 服务： ./nginx

查看 nginx 进程：ps -ef | grep nginx

查看进程id 所占用的端口号：netstat -nap | grep 进程id

查看已开放端口：sudo firewall-cmd --zone=public --list-ports

开放 端口（端口可随意填写，建议不要用80端口，因为一般会被占用）：sudo firewall-cmd --zone=public --add-port=8080/tcp --permanent

重启防火墙：sudo firewall-cmd --reload

如果嫌防火墙麻烦，可以直接关闭防火墙，systemctl stop firewalld

永久关闭防火墙：systemctl disable firewalld

关于nginx的命令：

nginx -s reopen #重启Nginx

nginx -s reload #重新加载Nginx配置文件

nginx -s stop #强制停止Nginx服务

nginx -t #检测配置文件是否有语法错误，然后退出

6.使用nginx

防火墙开启端口后，还需要在服务器开启端口，使用宝塔面板或者登录服务器的管理界面，设置公网ip访问规则，增加端口访问就可以了。入方向和出方向都要增加规则。

然后就直接用服务器的IP地址+端口号就能访问了。比如：192.168.16.230:8081

7.配置nginx

配置nginx开机自启：使用：whereis nginx 找出nginx的安装目录然后进入。cd /usr/local/nginx/conf

打开配置文件：vim nginx.conf

然后配置项目访问路径：在配置文件找到server关键字，然后配置前端访问端口和IP地址，192.168.16.230:8888.

项目存放路径：/opt/vue_project 这个目录是我项目存放的路径，所以这点要换成你项目的存放目录。index.html文件必须要在这个目录下，否则浏览器访问不了。

下一步需要解决跨域问题，仍然在这个配置文件中添加如下命令：

最后一步一定别搞忘了。重启nginx使配置生效，进入nginx主目录sbin。然后使用命令：./nginx -s reload

8.上传项目源码到nginx指定的目录

和前面一样用xftp上传

最后在浏览器输入：192.168.16.230:8888就可以访问了。

9.使用Jenkins工具实现自动部署

安装jenkins，在官网下载jenkins，下载地址：Jenkins download and deployment

根据你的服务器下载对应版本。我下载的是CentOS稳定版的

下载好后用xftp上传到服务器，这里不在赘述，步骤和前面nginx一样的。

我上传到了/opt目录。jenkins的部署还可以使用Docker容器进行部署。如果要自定义jenkins安装目录可在文件：/etc/profile中添加jenkins的home目录。使用命令：vim /etc/profile ，然后在文件末尾追加：JENKINS_HOME = /opt/jenkins 然后输入":"，”wq“ 保存退出，使环境变量配置生效:source /etc/profile

jenkins就只会安装在这个目录。

使用命令：java -jar jenkins.war --httpPort=8080 & 启动jenkins服务，启动服务之前还需要配置JDK环境，这里不在说明，可自行百度。

然后使用命令：ps -ef |grep jenkins 查看jenkins服务是否启动。

使用docker部署jenkins：

docker的拉取：docker pull jenkins/jenkins:2.346.3-2-lts-jdk11

运行jenkins：docker run -p 8080:8080 -p 50000:50000 -v jenkins_home:/var/jenkins_home --name jenkins -d jenkins/jenkins:2.346.3-2-lts-jdk11

-d 后台运行容器，并返回容器ID

-uroot 使用 root 身份进入容器，推荐加上，避免容器内执行某些命令时报权限错误

-p 8080:8080 将容器内8080端口映射至宿主机8080端口，这个是访问jenkins的端口

-p 50000:50000 将容器内50000端口映射至宿主机50000端口

--name jenkins 设置容器名称为jenkins

-v jenkins_home:/var/jenkins_home /var/jenkins_home目录为容器jenkins工作目录，我们将硬盘上的一个目录挂载到这个位置，方便后续更新镜像后继续使用原来的工作目录

-v /etc/localtime:/etc/localtime 让容器使用和服务器同样的时间设置

jenkins/jenkins 镜像的名称，这里也可以写镜像ID

如果发现启动服务失败，很可能是端口被占用。ps -ef |grep 被占用的端口号 ，查看pid然后使用命令：kill -9 被占用的端口号pid 杀死进程。再重新使用命令启动jenkins服务。

启动成功后可在浏览器输入服务器IP+端口号访问jenkins，在服务器上查看管理员密码，使用命令：

cat /var/lib/jenkins/secrets/initialAdminPassword 输入密码后就可以进入了，然后下载jenkins启动需要的插件。

安装好后我们需要下载插件：Gitee、Git、Email Extension plugin，安装好后重启jenkins：systemctl restart jenkins。

接下来就是创建一个项目。

系统管理进行系统配置、全局工具配置。

系统配置：jenkins访问地址、管理员邮箱、Gitee远程仓库地址/身份认证、邮件通知

配置gitee的API令牌：

配置邮箱通知

全局工具配置：配置JDK路径、Git的安装路径。这点的JDK和Git都需要现在服务器上配置好，不然会出错。具体教程可以自行百度。

jenkins配置好了，就可在创建的目录里面，进行项目的配置。

设置gitee构建规则;

设置gitee项目远程地址：

构建定时触发器，每到设置时间就执行一次。

添加gitee webhook，登录gitee进入项目，点击设置，在web hook 填入jenkins上的gitee webhook密码，webhook就设置好了。

构建环境：

10.自动拉取gitee上面的项目代码，实现自动化部署

在第9步，我们在构建的环境中，输入以下shell命令

#! bash

cd /opt/vue_project && /opt/git/bin/git pull https://gitee.com/liangcan.git # 这一步是将gitee上面的项目代码拉取到我前面nginx配置文件上设置的项目路径上，前面设置的定时触发器设置的好久触发一次，这儿就是好久自动从gitee拉取代码执行一次。当gitee上开发人员提交了新的代码，也会自动拉取代码执行。

最后添加邮件通知的触发器，项目执行完后自动发送执行情况到接收人邮箱。

至此项目的自动化部署就实现了。