基于Docker+Nginx+Jenkins的前端自动化部署实践

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

前言

对于前端自动化部署，其实之前写过一篇Jenkins前端自动化部署,实现方式是完全手动配置nginx, jenkins等各种工具环境配置。最近在计划学习docker，所以本次使用docker实践一次前端自动化部署。

环境准备及介绍

服务器： CentOS 7.6
docker
docker-compose
nginx 镜像
jenkins 镜像
gitee 远端项目: 便于方便测试，本次使用码云

安装docker环境

安装Docker CE

sudo yum install docker-ce

启动Docker服务

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

检测是否安装成功 docker -v 查看版本号

安装 docker-compose

Compose 是一个用于定义和运行多容器 Docker 应用程序的工具。借助 Compose，您可以使用 YAML 文件来配置应用程序的服务。然后，使用单个命令，从配置中创建并启动所有服务 Docker Compose 概述

安装

$ sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

对二进制文件应用可执行权限

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

3.验证是否成功

安装 nginx及jenkins 镜像

安装nginx 镜像

docker pull nginx

安装jenkins镜像

查看镜像list

docker search jenkins

本次镜像jenkinsci/blueocean(蓝海)

docker pull jenkinsci/blueocean

查看镜像

安装完成后执行docker images 查看已安装镜像

配置目录编写

便于管理，在docker下我们将Nginx和Jenkins聚集到一个文件目录之中。目录结构如下

+ compose
  - docker-compose.yml  // docker-compose执行文件
+ nginx 
  + conf.d
    - nginx.conf        // nginx配置
+ jenkins
   - jenkins_home       // jenkins挂载卷
+ webserver 
   -static              //存放前端打包后的dist文件

文件配置及创建容器

docker-compose.yml

cd /home/compose
vim docker-compose.yml

nginx.conf

cd /home/nginx/conf.d
vim nginx.conf

创建容器

在 docker-compose.yml文件所在目录下执行命令创建容器

docker-compose up -d 
docker-compose stop //停止nginx和jenkins 两者结合可以进行重启

执行docker ps查看容器情况

Jenkins配置

在容器启动后，可以在浏览器输入服务器ip:8080进入jenkins管理界面。初始化工作忽略，在之前一篇中有说明。

插件配置

进入插件管理

安装 Publish Over SSH 作用: 将构建后的编译产出发布到服务器
安装Generic Webhook Trigger Plugin作用：通用 Webhook 触发器构建

全局配置ssh serve

全局工具配置 node.js

新建jenkins任务及配置

新建任务

任务配置-源码管理

任务配置-构建触发器

方式选择Generic Webhook Trigger

配置token

关联gitee 在gitee项目管理菜单中添加webhook.

任务配置-构建环境

选择事先在全局工具中配置的node.js

任务配置-构建

构建选择执行shell
将编译产物打tar包，留作构建后操作使用

任务配置-构建后操作

将tar包放到服务器指定目录
解压tar包，将物料放置在nginx工作目录下

Test

最后选择应用及保存在本地git项目中向master分支push，会发现远端jenkins 已经触发自动部署

结尾

至此，一套简单的docker 前端自动化部署就完成了。

与传统的配置nginx,jenkins相比，使用docker不仅能快速实施，而且能隔离环境，避免环境依赖。

技术参考: juejin.cn/post/684490…