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

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

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

前言

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

环境准备及介绍

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

安装docker环境

  1. 安装Docker CE
sudo yum install docker-ce
复制代码
  1. 启动Docker服务
sudo systemctl enable docker // 设置开机自启
sudo systemctl start docker // 启动docker
复制代码
  1. 检测是否安装成功

docker -v 查看版本号 image.png

安装 docker-compose

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

Docker Compose 概述

  1. 安装
$ 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
复制代码
  1. 对二进制文件应用可执行权限
$ sudo chmod +x /usr/local/bin/docker-compose
复制代码

3.验证是否成功

image.png

安装 nginx及jenkins 镜像

安装nginx 镜像

docker pull nginx
复制代码

安装jenkins镜像

查看镜像list

docker search jenkins
复制代码

image.png 本次镜像jenkinsci/blueocean(蓝海)

docker pull jenkinsci/blueocean
复制代码

查看镜像

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

image.png

配置目录编写

便于管理,在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
复制代码

image.png

nginx.conf

cd /home/nginx/conf.d
vim nginx.conf
复制代码

image.png

创建容器

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

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

执行docker ps查看容器情况

image.png

Jenkins配置

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

插件配置

进入插件管理

image.png

  1. 安装 Publish Over SSH 作用: 将构建后的编译产出发布到服务器

  2. 安装Generic Webhook Trigger Plugin作用:通用 Webhook 触发器构建

全局配置ssh serve

image.png

全局工具配置 node.js

image.png

新建jenkins任务及配置

新建任务

image.png

任务配置-源码管理

image.png

任务配置-构建触发器

  1. 方式选择Generic Webhook Trigger

image.png

  1. 配置token

image.png

  1. 关联gitee

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

image.png

任务配置-构建环境

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

任务配置-构建

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

image.png

任务配置-构建后操作

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

image.png

Test

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

image.png

结尾

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

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

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

文章分类
前端
文章标签