Jenkins+Nginx实现前端部署github/svn项目

一只勤劳的二哈
772 阅读5分钟

系统: CentOS7.9

环境: jdk11

CentOS 安装 JDK

参考地址：CentOS 7 安装 JDK 1.8 环境教程

系统版本：CentOS7.9

1. 查看云端 yum 库中目前支持安装的 jdk 软件包

yum search java|grep jdk

jdk版本列表.png

2. 选择版本安装 jdk

yum install -y java-11-openjdk*

3. 安装完成后，验证是否安装成功

java -version

java版本查看.png

4. 查找 jdk 安装位置

find / -name 'java'

jdk安装位置.png

默认安装路径一般为： /usr/lib/jvm/java-11-openjdk-11.0.15.0.9-2.el7_9.x86_64/bin/java

CentOS 防火墙设置

参考地址：CentOS 防火墙设置（掘金）

系统版本：CentOS7.9

开启对应端口号，外网才能访问

查看防火墙状态

systemctl status firewalld

Active: active (running)，防火墙已开启

shell> systemctl status firewalld
● firewalld.service - firewalld - dynamic firewall daemon
   Loaded: loaded (/usr/lib/systemd/system/firewalld.service; disabled; vendor preset: enabled)
   Active: active (running) since Mon 2020-04-06 00:03:45 CST; 2s ago
     Docs: man:firewalld(1)
 Main PID: 5463 (firewalld)
   CGroup: /system.slice/firewalld.service
           └─5463 /usr/bin/python2 -Es /usr/sbin/firewalld --nofork --nopid

启动防火墙

systemctl start firewalld

停止防火墙

systemctl stop firewalld

重启防火墙

systemctl restart firewalld

允许开机启动

systemctl enable firewalld

禁止开机启动

systemctl disable firewalld

查看防火墙规则

firewall-cmd --list-all

ports 是已开启端口号

shell> firewall-cmd --list-all
public (active)
  target: default
  icmp-block-inversion: no
  interfaces: enp2s0
  sources:
  services: ssh dhcpv6-client
  ports: 3888/tcp 2181/tcp
  protocols:
  masquerade: no
  forward-ports:
  source-ports:
  icmp-blocks:
  rich rules:

添加端口

firewall-cmd --add-port=2888/tcp --permanent

shell> firewall-cmd --add-port=2888/tcp --permanent
success
shell> firewall-cmd --add-port=65001-65010/tcp --permanent
shell> firewall-cmd --reload
success
# 查看是否添加成功
shell> firewall-cmd --list-ports
3888/tcp 2181/tcp 2888/tcp

删除端口

firewall-cmd --remove-port=2888/tcp --permanent

添加端口范围

firewall-cmd --add-port=65001-65010/tcp --permanent

重新加载（修改防火墙规则后需要执行 reload）

firewall-cmd --reload

CentOS 安装 Jenkins

参考地址 1：官网 参考地址 2：CentOS 7 安装 jenkins（腾讯云） 参考地址 3：前端工程化：保姆级教学 Jenkins 部署前端项目（掘金） 参考地址 4：linux 安装 jenkins 【详细教程】（简书）

系统版本：CentOS7.9

前置要求：已安装 jdk，已开启防火墙相应端口号

  1. 使用 jenkins 的安装仓库
sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo --no-check-certificate

sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key

Jenkins 资源设置完成

Jenkins资源设置.png

  1. 使用 yum 安装
yum install -y jenkins

Jenkins 安装完成

jenkin安装完成.png

  1. 查找 Jenkins 所在目录
whereis jenkins

jenkins所在目录.png

查看 Jenkins 安装位置

find / -name jenkins

jenkins安装位置.png

端口号配置文件

/etc/sysconfig/jenkins

JDK 环境变量配置文件

/etc/init.d/jenkins

  1. 进入 jenkins.war 所在目录启动 jenkins

启动 Jenkins

# 指定端口后台启动
# nohup java -jar /usr/share/jenkins/jenkins.war --httpPort=8080 /var/log/jenkins/jenkins-$(date +%Y-%m-%d).log 2>&1 &

# 指定端口后台启动
nohup jenkins --httpPort=8080 /var/log/jenkins/jenkins-$(date +%Y-%m-%d).log &

Jenkins 密钥

jenkins密钥.png

查看 Jenkins 进程

ps -ef | grep jenkins

关闭进程

kill -9 进程id

使用 systemctl 命令管理 Jenkins 服务

# 启动 Jenkins 服务
systemctl start jenkins
# 重启 Jenkins 服务
systemctl restart jenkins
# 停止 Jenkins 服务
systemctl stop jenkins
# 查看 Jenkins 服务状态
systemctl status jenkins

jenkins 版本对应 jdk 版本

jenkins版本对应jdk版本.png

Jenkins 插件安装

首次打开时安装推荐的插件

下载自动化部署所需插件

  1. ==nvm-wrapper==[plugins.jenkins.io/nvm-wrapper…]

Node 版本管理器：允许您轻松安装、管理和使用多个 Node.js 环境

  1. ==Subversion==[plugins.jenkins.io/subversion/]

SVN：添加 Subversion 支持（通过 SVNKit）

  1. ==Git plugin==[plugins.jenkins.io/git/]

GIT: 提供基本的 git 操作。可以轮询、获取、签出、分支、列出、合并、标记和推送存储库

下面是 Jenkins 安装插件步骤示例

进入系统管理，点击插件管理

jenkins安装插件1.png

选择可选插件，在右上角输入需要安装的插件名称进行搜索，选中搜索列表中需要安装的插件，点击Download now and install after restart

jenkins安装插件2.png

插件正在安装，选中安装完成后重启 Jenkins(空闲时)

jenkins安装插件3.png

Jenkins 创建一个任务（github）

前置要求：已安装插件 nvm-wrapper、Git plugin，nginx 服务

1. 生成 git sshkey

参考地址：官网

ssh-keygen -t ed25519 -C "github 邮箱账号"

==记录生成的私钥和公钥文件的路径==，进入该路径下，可分别查看私钥和公钥的具体内容

生成git-sshkey.png

2. github 公钥配置

登录 github，在Settings中找到SSH and GPG keys，点击New SSH key

github-sshkey配置1.png

输入title（自定义），将前边生成的公钥复制到Key中，点击Add SSH key

github-sshkey配置2.png

新增 SSH key 成功，可以在SSH Keys列表中看到刚刚配置的 SSH key

github-sshkey配置3.png

3. jenkins 配置全局凭证（github-sshkey）

进入用户凭据，点击Stores from parent中的Jenkins

jenkins全局凭证配置1.png

点击全局凭据 (unrestricted)

jenkins全局凭证配置2.png

点击添加凭据

jenkins全局凭证配置3.png

类型选择SSH Username with private key，ID（会自动生成，建议不填），描述（有助于区分类似凭据的可选说明，建议填写），将生成的私钥复制到Private Key处，点击保存

jenkins全局凭证配置4.png

新增凭据成功，可以在全局凭证列表中找到刚刚配置的凭证，后续也可以更新凭证信息

jenkins全局凭证配置5.png

4. 创建任务

点击新建任务

jenkins创建任务1.png

输入任务名称(建议输入项目名称)，选择构建一个自由风格的软件项目，点击确定

jenkins创建任务2.png

源码管理选择Git，将项目的 github ssh 链接复制到Repository URL，会出现类似无法连接到仓库的提示，此时在Credentials下拉选择刚刚配置的全局凭证，即可连接到 github 仓库，在指定分支处填写要部署的代码的分支

jenkins创建任务3.png

构建环境勾选Run the build in an NVM managed environment，此处依赖插件nvm-wrapper，在Node version处填写项目构建所对应的 node 版本

jenkins创建任务4.png

点击增加构建步骤，选择执行 Shell，将需要执行的 shell 命令填入输入框内

jenkins创建任务5.png

==以下是 shell 命令示例==(此处示例需要 nginx 服务)

# 项目名称
PROJECT_NAME="vue-test"

# nginx服务的资源目录
NGINX_DIR="/usr/share/nginx/html"

# jenkins中当前项目的工作空间
JENKINS_WORKSPACE="/root/.jenkins/workspace/${PROJECT_NAME}"

node --version

echo "开始安装依赖......"
npm cache clear --force
npm install
echo "安装依赖成功！"

echo "开始构建项目......"
npm run build
echo "构建项目成功！"


# 进入nginx服务的资源目录
cd ${NGINX_DIR}

echo "删除nginx服务中当前项目的资源目录"
rm -rf ${PROJECT_NAME}
echo "创建nginx服务中当前项目的资源目录"
mkdir ${PROJECT_NAME}

# 进入当前项目在jenkins中的工作空间
cd ${JENKINS_WORKSPACE}

echo "开始打包文件......"
cd dist
tar -cvf dist.tar *
echo "打包文件成功！"

echo "开始释放打包文件到nginx服务中当前项目的资源目录......"
tar -xvf dist.tar -C ${NGINX_DIR}/${PROJECT_NAME}
echo "释放打包文件到nginx服务中当前项目的资源目录成功！"

echo "开始删除当前项目在jenkins工作空间中的dist、node_modules目录......"
cd ..
rm -rf dist
rm -rf node_modules
echo "当前项目在jenkins工作空间中的dist、node_modules目录删除成功！"

echo "开始重启nginx......"
# 重新加载 Nginx 配置文件，然后以优雅的方式重启 Nginx
nginx -s reload
echo "nginx重启成功！"

点击构建后操作步骤，选择Delete workspace when build is done，生成完成后删除工作区

jenkins创建任务6.png

点击立即构建，构建历史列表会出现正在构建的任务，点击进入本次构建

jenkins创建任务7.png

在控制台输出可以查看当前任务的工作空间以及 shell 命令执行日志

jenkins创建任务8.png

构建历史中，本次构建任务为绿色对号图标时，构建成功，如果失败，可以去控制台输出中查找失败原因

jenkins创建任务9.png

Jenkins 创建一个任务（svn）

参考地址：Jenkins 入门教程之安装 svn 插件并配置（九）（CSDN）

系统版本：CentOS7.9

前置需求：已安装 Subversion 插件

以下只阐述与创建 github 任务的不用之处

源码管理选择Subversion

jenkins创建任务-svn1.png

填写 svn 项目地址

jenkins创建任务-svn2.png

添加 svn 用户认证

jenkins创建任务-svn3.png

添加 svn 用户认证，下图为用户名+密码的认证方式

jenkins创建任务-svn4.png

Nginx

参考地址：CentOS 7 下安装配置 Nginx（腾讯云） 参考地址：Nginx 入门教程

系统版本：CentOS7.9

前置要求：已开启防火墙相应端口号

安装

1. 配置 EPEL 源

sudo yum install -y epel-release

sudo yum -y update

2. 安装 Nginx

sudo yum install -y nginx

输入命令启动 nginx 服务

nginx

本文档 Nginx 相关文件夹分别如下：

  • ==默认的网站目录为：/usr/share/nginx/html==

  • ==默认的配置文件为：/etc/nginx/nginx.conf==

  • 自定义配置文件目录为: /etc/nginx/conf.d/

命令

参考地址：🚗 🚗 🚗 前端仔也需要懂的 nginx 内容（掘金）

以下命令仅供参考：

查看服务是否启动成功

ps -ef | grep nginx

CentOS 6.x 和 CentOS 7.x 中 Nginx 的操作命令（启动/重启/退出/...）

--------- CentOS 6.x 中 Nginx 的操作命令 ---------

# nginx                               // 不指定配置文件启动 Nginx，默认读取 /etc/nginx/nginx.conf 配置文件。
# nginx -c <配置文件>       // 指定配置文件启动 Nginx 。
# nginx -t                           // 测试配置文件是否有语法错误，通过这种方式，也就知道了默认配置文件是哪个文件。
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

# nginx -s reopen       // 重启 Nginx
# nginx -s reload        // 重新加载 Nginx 配置文件，然后以优雅的方式重启 Nginx 。
# nginx -s stop           // 强制停止 Nginx 服务
# nginx -s quit            // 优雅地停止 Nginx 服务（即处理完所有请求后再停止服务）


--------- CentOS 7.x 中 Nginx 的操作命令 ---------

# systemctl start nginx.service            // 启动 Nginx 服务
# systemctl stop nginx.service            // 停止 Nginx 服务
# systemctl restart nginx.service        // 重启 Nginx 服务
# systemctl reload nginx.service        // 重新加载 Nginx 配置文件，然后以优雅的方式重启 Nginx 。
# systemctl status nginx.service        // 查看状态
# systemctl enable nginx.service       // 设置开机自启动
# systemctl disable nginx.service      // 停止开机自启动
————————————————

nginxWebUI

参考地址：nginxWebUI 官网

系统版本：CentOS7.9

前置要求：Nginx 服务，已开启防火墙相应端口号，已安装 jdk

安装

1. 下载最新版发行包 jar

wget -O /home/nginxWebUI/nginxWebUI.jar http://file.nginxwebui.cn/nginxWebUI-3.3.3.jar

2. 启动程序

nohup java -jar -Dfile.encoding=UTF-8 /home/nginxWebUI/nginxWebUI.jar --server.port=8081 --project.home=/home/nginxWebUI/ > /dev/null &

3. 参数说明(都是非必填)

--server.port 占用端口, 默认以8080端口启动

--project.home 项目配置文件目录，存放数据库文件，证书文件，日志等, 默认为/home/nginxWebUI/

--spring.database.type=mysql 使用其他数据库，不填为使用本地h2，可选mysql

--spring.datasource.url=jdbc:mysql://ip:port/nginxwebui 数据库url

--spring.datasource.username=root 数据库用户

--spring.datasource.password=pass 数据库密码

注意Linux命令最后加一个&号, 表示项目后台运行

使用

参考地址：Nginx 入门教程-示例

==Nginx 服务的资源路径/usr/share/nginx/==

==Nginx 服务的默认配置文件路径/etc/nginx/nginx.conf==

==Nginx 服务的网页资源路径/usr/share/nginx/html/==

启用配置

首次启用配置需要进行的操作

  • 设置 Nginx 服务的资源路径

    例：/usr/share/nginx/

  • Nginx 服务的默认配置文件路径

    例：/etc/nginx/nginx.conf

==每次更新配置都需要进行的操作==

依次点击校验文件、替换文件、重新装载

  • 校验文件：校验生成的配置文件是否符合规范

  • 替换文件：将 nginxWebUI 生成的最新配置文件替换掉 Nginx 服务的默认配置文件

  • 重新装载：重新启动 Nginx 服务，使最新配置生效

nginxWebUI启用配置1.png

反向代理

配置好反向代理，才能通过 ip:port 访问网页等

nginxWebUI反向代理1.png

代理静态 html

代理静态 html，才能实现通过 ip:port 来访问网页的功能

  • 监听 ip 端口：填写需要监听的端口号（需要填写防火墙中已添加的端口号，否则无法通过外网访问）

  • 监控路径：==/== 或 ==*==

  • 代理类型：选择==静态 html==

  • 代理目标：依次是模式、资源路径、默认页

    • 模式：==root 模式==
    • 资源路径：==选择要代理的网页资源路径==
    • 默认页：可以不填

  • 可以设置额外的配置参数

下图第一行是代理静态 html 的示例：

nginxWebUI反向代理2.png

代理 http 接口请求

举个栗子：

/api ---> www.baidu.com，/google ---> www.google.com

  • 监控路径：例/api（接口路径的匹配规则）

  • 代理类型：选择==动态 http==

  • 代理目标：依次是代理地址、是否携带 Host 参数、是否开启 WebSocket

    • 代理地址：例www.baidu.com
    • 携带 Host 参数：按实际需求选中
    • 开启 WebSocket：按实际需求选中

  • 可以设置额外的配置参数

下图第二行是代理 http 接口请求的示例：

nginxWebUI反向代理2.png

进入启动配置，可以查看到最新生成的配置文件，要时期配置生效，请依次点击校验文件、替换文件、重新装载

nginxWebUI反向代理3.png

设置额外参数(例：兼容 history 等)

举个栗子：==兼容 history 模式==的参数配置

参考地址：【nginx】History 模式的配置细节（掘金）

try_files $uri $uri/ /index.html;

点击设置额外参数

nginxWebUI反向代理-额外参数1.png

在弹窗中，可以通过添加参数进行手动填写，也可以通过添加模板来选择参数模板中已经配置好的通过参数

nginxWebUI反向代理-额外参数2.png

参数模板

配置一些常用的参数，比如兼容 history 模式的参数，可以配置到全局，也可以只是保存，在配置反向代理中的额外参数时进行手动选择

举个栗子：

兼容 history 模式的参数模板

  • 模板名称：router-history（尽量语义化）

  • 默认配置到：代理目标(location)（此参数模板会自动应用到 location,无需在额外参数中手动选择）

  • 名称：参数配置的 key

    try_files

  • 值：参数配置的 value

    $uri $uri/ /index.html

nginxWebUI参数模板1.png

进入启动配置，可以查看到最新生成的配置文件，要时期配置生效，请依次点击校验文件、替换文件、重新装载

nginxWebUI参数模板2.png

http 参数配置(日志等)

参考：Nginx 日志配置详解（SegmentFault） 参考：Nginx 日志配置的详细变量（官网）

对应 Nginx 配置中的 http {......}

可以自定义日志打印的内容等

举个栗子：自定义日志内容：请求地址、请求方法、代理地址、响应时间等

日志规则

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 /usr/share/nginx/logs/access.log main;

nginxWebUI-http参数配置1.png

进入启动配置，可以查看到最新生成的配置文件，要时期配置生效，请依次点击校验文件、替换文件、重新装载

nginxWebUI-http参数配置2.png

Nginx 日志查看

默认访问日志路径：

/var/log/nginx/access.log

默认错误日志路径：

/var/log/nginx/error.log

上边==http 参数配置中手动配置的日志路径==：

/usr/share/nginx/logs/access.log

需要手动添加日志文件，填入正确的日志路径，才能进行日志查看

nginxWebUI日志查看1.png

日志追踪可以实时查看日志

nginxWebUI日志查看2.png

avatar
文章
阅读
粉丝
相关推荐
用上了Jenkins，个人部署项目真方便！
18k阅读
 · 
135点赞
Docker + Jenkins + Nginx实现前端自动化部署
5.0k阅读
 · 
101点赞
听说前端出大事儿了
367k阅读
 · 
1.4k点赞
看完这位小哥的GitHub，我沉默了
115k阅读
 · 
1.2k点赞
三年前端还不会配置Nginx？刷完这篇就够了
58k阅读
 · 
1.3k点赞
写给前端同学的Nginx配置指南
39k阅读
 · 
713点赞
Docker + Jenkins + Nginx 实战前端自动化部署
8.0k阅读
 · 
213点赞
jenkins 自动化部署前端项目
2.9k阅读
 · 
48点赞
一步步实现Nginx +Docker + Jenkins前端自动化部署
12k阅读
 · 
161点赞
前端必备的nginx知识点
32k阅读
 · 
923点赞

友情链接：