使用jenkins和GitHub自动部署静态网站

介绍

采用jenkins和git自动部署网站,这里使用的jenkins非docker安装的jenkins,git仓库采用GitHub,使用的服务器为阿里云ubuntu18.04 64位

首先在 GitHub 上边建立一个仓库

在GitHub建一个仓库

在jenkins上边新建一个任务

1. 新建任务,选择构建自由风格的项目

在jenkins上新建任务
选择新建任务类型

2. 配置任务

  1. 源码管理,输入仓库地址,用户名和密码
源码管理
  1. 选择构建触发器
选择构建触发器
  1. 在jenkins全局配置中设置 GitHub Server,并查找 webhook(建议新开一个窗口设置)
查看webhook
  1. 在GitHub上边设置webhook
在GitHub上边设置webhook
  1. 书写构建中执行的操作,写完后点击保存
构建中执行的操作

3. 推送代码构建

  1. 使用git提交代码,并推送到GitHub上边,看到jenkins自动构建(如下图)
推送代码到GitHub,查看构建

配置 nginx

1. 安装 nginx

# 安装 nginx
apt install nginx
# 启动 nginx 服务
service nginx start

2. 配置 nginx

  1. 进入 nginx 配置文件夹
cd /etc/nginx/conf.d
  1. 生成 test.conf 文件并编辑
# 生成 test.conf 文件
vim test.conf
# 编辑文件为以下内容
server {
    #服务启动时监听的端口
    listen 8010;
    #服务启动时文件加载的路径(因为没有将jenkins从GitHub上pull下来的代码移到别的地方,这里加载的文件路径为jenkins工作目录)
    root /var/lib/jenkins/workspace/test/;
    #默认加载的第一个文件
    index index.php index.html index.htm index.nginx-debian.html;
    #页面访问域名,如果没有域名也可以填写_
    server_name localhost;
}
# 重新加载下 nginx 配置文件
service nginx reload

至此整个配置已经结束,可以访问网址加上8010端口便可查看部署的静态网站。

【参考文章】
https://www.jianshu.com/p/9db976b675b2
https://blog.mhwang.club/jenkins搭建前端上线系统小试
https://www.arayzou.com/2016/09/20/前端工程师应该知道的nginx