jenkins 前端自动化部署模板

使用该模板可以快速实现项目CI，免去nginx配置，简化jenkins配置。

使用前提

安装docker、docker-compose方法传送门：https://www.yuque.com/debugksir/blog/ubhnro

Git库主页：https://gitee.com/debugksir/jenkins_module

使用方法

  1. 在服务器上创建工作目录/home/jenkins
  2. 切换到工作目录克隆模板代码 
  1. cd /home/jenkins
  2. git clone https://gitee.com/debugksir/jenkins_module.git
  1. 将克隆下来的jenkins_module重命名成前端git库项目名称
  1. cd /home/jenkins
  2. mv ./jenkins_module/ ./new_name/
  1. 编辑docker-compose.yml，根据需要改写端口和项目名称，如下4000为jenkins对宿主机暴露端口，4001为nginx对宿主机暴露端口，将project_name替换成自己前端项目名称，需要与前端项目git库同名
  1. version: '3'
  2. services:
  3.   docker_jenkins:
  4.     user: root
  5.     restart: always
  6.     image: jenkinsci/blueocean
  7.     container_name: jenins_project_name
  8.     ports:
  9.       - 4000:8080
  10.       - 50000:50000
  11.     volumes:
  12.       - /home/jenkins/project_name/jenkins_home/:/var/jenkins_home
  13.       - /var/run/docker.sock:/var/run/docker.sock
  14.       - /usr/bin/docker:/usr/bin/docker
  15.       - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
  16.   docker_nginx:
  17.     restart: always
  18.     image: nginx
  19.     container_name: nginx_project_name
  20.     ports:
  21.       - 4001:80
  22.     volumes:
  23.       - /home/jenkins/project_name/nginx/conf.d:/etc/nginx/conf.d
  24.       - /home/jenkins/project_name/jenkins_home/workspace/project_name/dist:/usr/share/nginx/html
  1. 启动docker-compose
  1. docker-compose up -d
  1. 检查是否启动成功使用docker ps
  2. 前往浏览器访问ip:4000配置jenkins

查看初始密码(project_name替换成你设置的名称)： 

  1. # 初始密码放在容器中的 /var/jenkins_home/secrets/initialAdminPassword 
  2. docker exec -it jenkins_project_name /bin/bash
  3. cat /var/jenkins_home/secrets/initialAdminPassword
  5. # 或者通过我们映射的宿主路径查看也是一样的
  6. cat /home/jenkins/project_name/jenkins_home/secrets/initialAdminPassword
  1. 下载需要的插件
    系统设置>插件管理>搜索并安装Generic Webhook Trigger和NodeJS两个插件

安装好后，NodeJS需要通过全局工具配置安装，如下图：
image.png

  1. 新建项目，根据需要配置，实例如下

image.png

  1. 如何添加webhook，这里以gitee为例

image.png

  1. 添加webhook后，每次往前端git库master分支推送代码都会触发jenkins自动构建脚本，在jenkins构建完后，访问ip:4001即可看到前端项目效果了，快去试试吧！
  2. 如需要额外的nginx配置，可自行编辑项目中/nginx/conf.d/nginx.conf文件