Docker + Jenkins + Nginx 实战前端自动化部署

在现代前端开发中，自动化部署变得越来越重要。通过使用 Docker、Jenkins 和 Nginx，我们可以实现高效的前端自动化部署。本文将详细介绍如何使用这三种工具完成一个前端应用的自动化部署过程。

前提条件

已安装 Docker 和 Docker Compose
已安装 Jenkins
拥有一个前端项目的代码库（例如 GitHub）

准备工作

服务器一台（本系统CentOS 7.3 64位）

安装docker

1.卸载docker的旧版本

ini 复制代码

[root@VM-4-16-centos ~]# sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine

2. yum安装gcc相关

csharp 复制代码

[root@VM-4-16-centos ~]# yum -y install gcc
 
[root@VM-4-16-centos ~]# yum -y install gcc c++

3. 安装软件包和国内的镜像仓库

分别执行下面的两条命令

ini 复制代码

[root@VM-4-16-centos ~]# sudo yum install -y yum-utils
 
[root@VM-4-16-centos ~]# sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

4. 下载阿里云仓库

执行这个步骤是为了处理后续安装docker-ce时有些包下不了的问题

arduino 复制代码

[root@VM-4-16-centos ~]# wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo

5. 安装docker引擎

ini 复制代码

[root@VM-4-16-centos ~]# sudo yum install docker-ce docker-ce-cli containerd.io

6. 启动docker

ini 复制代码

[root@VM-4-16-centos ~]# sudo systemctl start docker

7. 查看docker版本

csharp 复制代码

[root@VM-4-16-centos ~]# docker version

得到的版本信息如下：

yaml 复制代码

[root@VM-20-11-centos ~]# docker version
Client: Docker Engine - Community
 Version:           26.1.4
 API version:       1.45
 Go version:        go1.21.11
 Git commit:        5650f9b
 Built:             Wed Jun  5 11:32:04 2024
 OS/Arch:           linux/amd64
 Context:           default

Server: Docker Engine - Community
 Engine:
  Version:          26.1.4
  API version:      1.45 (minimum version 1.24)
  Go version:       go1.21.11
  Git commit:       de5c9cf
  Built:            Wed Jun  5 11:31:02 2024
  OS/Arch:          linux/amd64
  Experimental:     false
 containerd:
  Version:          1.6.33
  GitCommit:        d2d58213f83a351ca8f528a95fbd145f5654e957
 runc:
  Version:          1.1.12
  GitCommit:        v1.1.12-0-g51d5e94
 docker-init:
  Version:          0.19.0
  GitCommit:        de40ad0

8. 腾讯云配置镜像加速源

配置镜像加速源分三步

8.1 编辑daemon.json文件

csharp 复制代码

[root@VM-4-16-centos ~]# vim /etc/docker/daemon.json

8.2 往daemon.json中添加配置

json 复制代码

{
   "registry-mirrors": [
       "https://mirror.ccs.tencentyun.com"
  ]
}

8.3 重启docker

ini 复制代码

[root@VM-4-16-centos ~]# sudo systemctl restart docker

执行hello-world检查docker是否启动成功

ini 复制代码

[root@VM-4-16-centos ~]# sudo docker run hello-world

执行信息如下：

vbnet 复制代码


Hello from Docker!  # 打出这句话就说明docker已经安装成功
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

安装Git

arduino 复制代码

sudo apt-get update //更新包索引

sudo apt-get install git //安装git

git --version //验证

安装jdk

一、检查系统是否自带jdk

css 复制代码

java --version

如果有的话，找到对应的文件删除第一步：先查看Linux自带的JDK有几个，用命令：

第二步:删除JDK，执行命令

perl 复制代码

rpm -qa | grep -i java | xargs -n1 rpm -e --nodeps
#rpm -qa:查询所安装的所有rpm包
#grep -i:忽略大小写
#xargs -n1:表示每次只传递一个参数
#rpm -e --nodeps:强制卸载软件

第三步：检查是否删除成功

perl 复制代码

#查看是否还在即可
rpm -qa | grep -i java
#或者查看java版本
java -version

二、通过wget下载jdk1.8并解压

1、进入home文件夹并创建jdk文件夹

arduino 复制代码

cd /home   //进入home文件夹
mkdir jdk  //创建jdk文件夹
cd jdk     //进入jdk文件夹

2、进入jdk文件通过wget下载jdk1.8

bash 复制代码

wget \
--no-check-certificate \
--no-cookies \
--header \
"Cookie: oraclelicense=accept-securebackup-cookie" \
http://download.oracle.com/otn-pub/java/jdk/8u131-b11/d54c1d3a095b4ff2b6607d096fa80163/jdk-8u131-linux-x64.tar.gz

3、解压安装包

tar xvf jdk-8u131-linux-x64.tar.gz

三、配置环境变量

bash 复制代码

vim /etc/profile

键盘输入i在文件最后插入以下内容：

ini 复制代码

export JAVA_HOME=/home/jdk/jdk1.8.0_131
export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/
export PATH=$PATH:$JAVA_HOME/bin
//语法解释
//export JAVA_HOME=你自己解压的jdk文件夹路径

最后输入source /etc/profile使其生效

三、检查是否安装成功

java -version

安装Jenkins

1.下载Jenkins

使用下面命令，让docker拉取镜像，

bash 复制代码

docker pull jenkins/jenkins:2.426.2-lts

注：需要指定版本号，不然拉取的镜像版本是比较老的版本

2、创建挂载目录

创建一个挂载目录，用于存放jenkins的数据

arduino 复制代码

//创建目录
mkdir -p /usr/docker/jenkins_data

//授权权限
chmod 777 jenkins_home

3、启动Jenkins容器

启动命令如下：

bash 复制代码

docker run -d -p 8082:8080 -p 50000:50000 -v /usr/docker/jenkins_data:/var/jenkins_home  -v /etc/localtime:/etc/localtime -v /usr/bin/docker:/usr/bin/docker     -v /var/run/docker.sock:/var/run/docker.sock   --restart=on-failure  -u 0 --name myjenkins jenkins/jenkins:2.426.2-lts

指令解析：

-d ：后台运行容器

-p：端口映射，左边是本地端口，右边是docker容器端口，8080是Jenkins Web 界面的工作端口,50000是JNLP（Java Network Launch Protocol）工作端口。这个端口用于 Jenkins 节点和主控节点之间的通信。

-v ：目录挂载，将主机上的 /usr/docker/jenkins_data 目录挂载到容器内的 /var/jenkins_home 目录，用于持久化 Jenkins 的数据。/etc/localtime:/etc/localtime：将本地主机上的时区信息文件挂载到容器内的 /etc/localtime 文件中，确保容器内的时间与主机上的时间一致

-v /usr/bin/docker:/usr/bin/docker: 将主机上的 /usr/bin/docker 文件挂载到容器中的 /usr/bin/docker，这样容器内的 Jenkins 可以直接使用宿主机上的 Docker 命令。在使用 GitLab/Jenkins 等 CI 软件的时候需要使用 Docker 命令来构建镜像，需要在容器中使用 Docker 命令；通过将宿主机的 Docker 共享给容器

-v /var/run/docker.sock:/var/run/docker.sock: 将主机上的 Docker socket 文件挂载到容器中的相同位置，这样容器内的 Jenkins 可以与宿主机上的 Docker 引擎进行通信。

--restart=on-failure：设置容器的重启策略为在容器以非零状态退出（异常退出）时重启。

-u 0：将容器内进程的用户身份设置为 root 用户，等同于-u root。

--name myjenkins：给容器指定一个名称为 myjenkins。

4、验证Jenkins容器是否启动成功

使用下面命令，查看jenkins是否已经在运行

docker ps

如果已经运行，会输出jenkins容器的相关信息

bash 复制代码

CONTAINER ID   IMAGE                         COMMAND                   CREATED      STATUS        PORTS                                                                                      NAMES
2949e82cbfe8   jenkins/jenkins:2.426.2-lts   "/usr/bin/tini -- /u..."   6 days ago   Up 24 hours   0.0.0.0:50000->50000/tcp, :::50000->50000/tcp, 0.0.0.0:8082->8080/tcp, :::8082->8080/tcp   myjenkins

5、获取管理员密码

我们在进入Jenkins的管理页面的时候，是需要管理员密码，所以我们需要获取管理员密码

获取管理员密码有两种方式

1、查看日志

使用下面命令查看jenkins的输出日志，myjenkins是我们在启动jenkins时给jenkins指定的容器名

docker logs myjenkins

找到下面这行代码，Please use the following password to proceed to installation下面的就是密码

css 复制代码

Please use the following password to proceed to installation:

a90c1533c8824b17bb49ff932229d22d

2、查看文件

不看日志，我们也可以直接查看/var/jenkins_home/secrets/initialAdminPassword文件，这个目录在我们进入jenkins 管理页面时会看到

6、修改插件源

Jenkins在安装插件时，下载相关插件包特别慢，我们可以将Jenkins默认的插件数据源变更为国内数据源，然后重启Jenkins

#进入更新配置目录

bash 复制代码

cd {你的Jenkins工作目录}/updates

使用下面命令替换default.json文件中指定的源

arduino 复制代码

sed -i 's/http://updates.jenkins-ci.org/download/https://mirrors.tuna.tsinghua.edu.cn/jenkins/g' default.json && sed -i 's/http://www.google.com/https://www.baidu.com/g' default.json

修改下载地址

cd {你的Jenkins工作目录}/ 找到下面这个文件 hudson.model.UpdateCenter.xml文件

xml 复制代码

 <?xml version='1.1'encoding='UTF-8'?>
    <sites>
        <site>
            <id>default</id>
            <url>https://updates.jenkins.io/update-center.json</url>
        </site>
    </sites>

将url替换为mirror.esuni.jp/jenkins/upd...

xml 复制代码

<?xml version='1.1encoding='UTF-8'?>
<sites>
    <site>
        <id>default</id>
        <urI>http://mirror.esuni.jp/jenkins/updates/update-center.json</url》
    </site>
</sites>

7、登录web页面

使用ip:8082，8082就是我们主机映射到容器8080的端口，如果你使用的是其他端口，那么需要换成其他端口

输入密码之后，就可以安装插件，直接选择安装推荐的插件即可

下载完成，就可以进入jenkins进行操作了

8、插件推荐

除了推荐插件之外，下面是一些常用插件，大家按需安装

Locale（中文插件）

Gitlab Plugin （拉取 gitlab 中的源代码）

Maven Integration（maven构建工具）

Publish Over SSH（远程推送工具）

Role-based Authorization Strategy（权限管理）

Deploy to container（自动化部署工程所需要插件，部署到容器插件）

git parameter（用户参数化构建过程里添加git类型参数）

下载插件在系统管理---插件管理的Available plugins

安装NodeJS

因为我们的Vue项目是基于 NodeJS 来打包构建的，所以需要在 Jenkins 中安装插件：

我这里已经安装你们在Available plugins里面安装一下

配置nodejs

我们进入Dashboard > 系统管理 > 全局工具配置

配置github

我们进入系统配置里面配置github

点击添加

我们去github获取秘钥填写进secret里面

点击连接测试出现这个表示配置成功

点击高级

将这个url复制到github仓库里面进行配置

点击设置

点击Webhooks，在这里粘贴我们刚刚复制的url地址

项目Docker 环境配置

首先，为前端项目创建一个 Dockerfile，用于打包前端项目：

javascript 复制代码

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

创建一个 nginx/default.conf 文件，用于 Nginx 配置：

ini 复制代码

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

创建任务

输入自己的github地址

源码管理，输入git地址，并添加github账号密码

这里的分支要跟你git项目的分支一样

触发器选择GitHub hook trigger for GITScm polling

构建环境选择node

添加构建步骤

输入命令

bash 复制代码

npm install
npm run build
rm -rf /home/nginx/html/*
docker stop vueApp
docker rm vueApp
docker build -t vuenginxcontainer .
docker image ls | grep vuenginxcontainer
docker run \
-p 3000:80 \
-d --name vueApp \
vuenginxcontainer

选择报错我们就配置好了，当我们在git push 就会自动构建

这里就开始构建

访问我们配置的容器地址，就可以看到已经好了

部署流程

提交代码：开发者将代码提交到 GitHub。
触发 Jenkins 构建：Jenkins 通过 Webhook 或定时触发构建。
拉取代码并构建镜像：Jenkins 拉取最新的代码，使用 Dockerfile 构建 Docker 镜像。
推送镜像：将构建的 Docker 镜像推送到 Docker Hub。
部署镜像：在服务器上运行最新的 Docker 镜像，通过 Nginx 反向代理访问前端应用。

总结

通过以上步骤，我们实现了一个完整的前端自动化部署流程。从代码提交到最终部署，全部由 Jenkins 自动完成，大大提高了部署效率和代码发布的可靠性。希望这篇文章能帮助你搭建自己的前端自动化部署流程。