Docker部署Jenkins搭建前端构建环境前言一直想用Docker搭建jenkins构建环境。现在实践操作了下，一

前言

一直想用Docker搭建jenkins构建环境。现在实践操作了下，一套使用gitee+jenkins+nginx部署的环境。

搭建完成后，具体构建运行流程：

本文主要内容有：

docker环境安装

利用docker-compose启动容器

配置jenkins

使用gitee+jenkins+nginx完成构建流程

1. 搭建环境

运行环境：阿里云服务器 2核2G 服务器

1.1 安装docker、docker-compose

查看云服务器厂商官方文档即可。

下载镜像问题可参考文章：三分钟！快速解决Dockerhub镜像站无法访问问题！

1.2 拉取镜像

1.2.1 nginx安装

Nginx安装参考文章：Docker部署nginx发布前端项目中的安装过程。

1.2.2 git安装

Git安装:

// 安装git 
yum install -y git 

// 生成密钥
ssh-keygen -t rsa -C "root" 

// 复制公钥
cat ~/.ssh/id_rsa.pub

需要将公钥添加到Git仓库，方便拉取代码。

步骤如下：

使用cat ~/.ssh/id_rsa.pub 命令，复制公钥内容；
登录到Github或者gitee或者gitlab存储库托管服务（例如 GitHub、GitLab 或 Bitbucket）；
账户设置，找到SSH，添加公钥。

1.2.3 jenkins安装

拉取jenkins镜像：

docker pull jenkins/jenkins:lts

1.3 运行镜像

运行多个镜像文件，使用docker-compose进行启动。

docker-compose.yaml文件：

version: '3'

networks:
  frontend:
    external: true

services:                                      # 容器
  docker_jenkins:
    user: root                                 # root权限
    restart: always                            # 重启方式
    image: jenkins/jenkins:lts                 # 使用的镜像
    container_name: jenkins                    # 容器名称
    environment:
      - TZ=Asia/Shanghai
      #- "JENKINS_OPTS=--prefix=/jenkins_home"  # 自定义 jenkins 访问前缀（上下文context）

    ports:                                     # 对外暴露的端口定义
      - 8080:8080
      - 50000:50000

    volumes:                                   # 卷挂载路径
      - /docker/jenkins_home/:/var/jenkins_home     # 挂载到容器内的jenkins_home目录
      - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
      
      
  docker_nginx_dev:                            # nginx-dev环境
    restart: always
    image: nginx
    container_name: nginx_dev
    ports:
      - 80:80
      - 443:443
    volumes:
      - /docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf #nginx默认配置文件
      - /docker/html:/usr/share/nginx/html # 静态资源文件
      - /docker/nginx/logs:/var/log/nginx # 日志文件
      - /docker/nginx/conf/conf.d:/etc/nginx/conf.d # nginx配置文件，用于单独配置

需要新建文件夹：

mkdir /docker           
mkdir /docker/compose    
mkdir /docker/jenkins_home   
mkdir /docker/nginx      
mkdir /docker/nginx/conf 
mkdir /docker/nginx/conf/conf.d 
mkidr /docker/nginx/logs
mkdir /docker/html

进入/docker/compose/运行docker-compose up -d启动容器。使用docker ps -a可查看容器是否运行。

安装版本如下：

Docker version：26.1.4
Docker Compose version 1.29.2
GIt version：1.8.3.1
Nginx version：1.27.0
Jenkins version：2.452.2

2. jenkins配置

2.1 初始化启动

访问服务器:8080

服务器输入cat /docker/jenkins_home/secrets/initialAdminPassword获取密码登录。

登录后，选择安装推荐的插件

等待安装完成即可，设置自己的登录名和密码。

2.2 模块介绍

进入系统管理，介绍下主要模块：

系统配置：主要配置jenkins访问路径，构建数量设置ssh Server 需要访问的主机凭证等。ssh可以使用账号密码或者使用凭证登录

全局工具配置：如果安装了插件，对应插件的内容在这里配置，可以配置NodeJS版本，为后面构建环境提供node环境

插件管理：增删改查插件

凭据管理：主要用作git的拉取权限

使用git的账号密码

配置完成后全局就可以使用。

2.3 安装插件

使用默认配置后，需要下载的几个插件：

Git Parameter Plug-In：用于构建时分支选择
NodeJS Plugin：node环境版本配置
Publish Over SSH：上传服务器

2.4 配置构建项目

接下来介绍构建的配置步骤：

2.4.1 新建一个任务，选择自由风格

2.4.2 参数化构建过程设置

需要安装Git Parameter插件才会有，这是添加参数，参数名后面会用到。

构建时会有：

2.4.3 源码管理设置

全局的凭据这里可以选择到，$BRANCH是上面设置的git参数名称

2.4.4 构建环境

构建环境在Provide Node & npm bin/ folder to PATH选择node版本

2.4.5 Build Steps

根据自身项目配置打包命令

这里需要说明下，上方配置的git参数，例如是否每次需要安装依赖，可以通过shell脚本进行判断是否安装。

#!/bin/bash
node -v 
npm -v 
if [ $pnpmInstall == 'true' ] 
then
    echo "安装依赖包"
    rm -rf node_modules
    npm i 
else
    echo "跳过依赖包安装"
fi
npm run build
# 如果需要删除原打包文件，使用压缩包传递，进入服务器再解压
tar -zcvf dist.tar ./dist

2.4.6 构建后操作

最后一步，发送到服务器。这一步也可放在上面一步，这个看个人选择。

这里使用插件Publish Over SSH,在系统配置中添加了ssh服务器链接。添加构建步骤，选择Send files or execute commands over SSH

选择已经存在的SSH Server

注意:

源文件是当前项目的根目录的位置，打包后文件为dist 所有设置为dist/**,如果传送过去只需要dist文件下的内容，则Remove prefix需要填dist，相当于移除前缀dist

远程服务器文件夹当前目录已经设置为/,如果部署文件夹为/docker/html/,就直接写

这种方式只考虑传输，没有考虑删除老的打包文件。需要打包后生成压缩文件，

npm run build
# 生成压缩包
tar -zcvf dist.tar ./dist

传输需要更改为

至此，设置已经全部完成。

2.4.7 构建操作

进入对应项目，点击Build with Parameters,选择对应分支，是否需要安装依赖。

构建日志：

进入服务器查看，打包文件已传输成功：

到这一步，前端构建环境已搭建成功。

总结

最后总结一下：本文使用docker搭建Jenkins+Nginx前端构建环境。主要记录下搭建的过程，暂时未考虑回滚操作。

如有错误，请指正O^O!