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

前提条件

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

准备工作

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

安装docker

1.卸载docker的旧版本

1. [root@VM-4-16-centos ~]# sudo yum remove docker \

2.                 docker-client \

3.                 docker-client-latest \

4.                 docker-common \

5.                 docker-latest \

6.                 docker-latest-logrotate \

7.                 docker-logrotate \

8.                 docker-engine

2. yum安装gcc相关

1. [root@VM-4-16-centos ~]# yum -y install gcc

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

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

分别执行下面的两条命令

1. [root@VM-4-16-centos ~]# sudo yum install -y yum-utils

3. [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时有些包下不了的问题

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

5. 安装docker引擎

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

6. 启动docker

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

7. 查看docker版本

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

得到的版本信息如下：

1. [root@VM-20-11-centos ~]# docker version

2. Client: Docker Engine - Community

3. Version:           26.1.4

4. API version:       1.45

5. Go version:       go1.21.11

6. Git commit:       5650f9b

7. Built:             Wed Jun 5 11:32:04 2024

8. OS/Arch:           linux/amd64

9. Context:           default

10. ​

11. Server: Docker Engine - Community

12. Engine:

13. Version:         26.1.4

14. API version:     1.45 (minimum version 1.24)

15. Go version:       go1.21.11

16. Git commit:       de5c9cf

17. Built:           Wed Jun 5 11:31:02 2024

18. OS/Arch:         linux/amd64

19. Experimental:     false

20. containerd:

21. Version:         1.6.33

22. GitCommit:       d2d58213f83a351ca8f528a95fbd145f5654e957

23. runc:

24. Version:         1.1.12

25. GitCommit:       v1.1.12-0-g51d5e94

26. docker-init:

27. Version:         0.19.0

28. GitCommit:       de40ad0

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

配置镜像加速源分三步

8.1 编辑daemon.json文件

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

8.2 往daemon.json中添加配置

1. {

2.   "registry-mirrors": [

3.       "https://mirror.ccs.tencentyun.com"

4. ]

5. }

8.3 重启docker

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

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

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

执行信息如下：

1. ​Hello from Docker! # 打出这句话就说明docker已经安装成功

2. This message shows that your installation appears to be working correctly.

3. ​

4. To generate this message, Docker took the following steps:

5. 1. The Docker client contacted the Docker daemon.

6. 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.

7.   (amd64)

8. 3. The Docker daemon created a new container from that image which runs the

9.   executable that produces the output you are currently reading.

10. 4. The Docker daemon streamed that output to the Docker client, which sent it

11.   to your terminal.

12. ​

13. To try something more ambitious, you can run an Ubuntu container with:

14. $ docker run -it ubuntu bash

15. ​

16. Share images, automate workflows, and more with a free Docker ID:

17. https://hub.docker.com/

18. ​

19. For more examples and ideas, visit:

20. https://docs.docker.com/get-started/

21. ​

安装Git

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

2. ​

3. sudo apt-get install git //安装git

4. ​

5. git --version //验证

安装jdk

一、检查系统是否自带jdk

java --version 

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

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

1. rpm -qa | grep -i java | xargs -n1 rpm -e --nodeps

2. #rpm -qa:查询所安装的所有rpm包

3. #grep -i:忽略大小写

4. #xargs -n1:表示每次只传递一个参数

5. #rpm -e --nodeps:强制卸载软件

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

1. #查看是否还在即可

2. rpm -qa | grep -i java

3. #或者查看java版本

4. java -version

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

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

1. cd /home   //进入home文件夹

2. mkdir jdk //创建jdk文件夹

3. cd jdk     //进入jdk文件夹

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

1. wget \

2. --no-check-certificate \

3. --no-cookies \

4. --header \

5. "Cookie: oraclelicense=accept-securebackup-cookie" \

6. 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 

三、配置环境变量

vim /etc/profile 

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

1. export JAVA_HOME=/home/jdk/jdk1.8.0_131

2. export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/

3. export PATH=$PATH:$JAVA_HOME/bin

4. //语法解释

5. //export JAVA_HOME=你自己解压的jdk文件夹路径

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

三、检查是否安装成功

java -version

安装Jenkins

1.下载Jenkins

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

docker pull jenkins/jenkins:2.426.2-lts

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

2、创建挂载目录

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

1. //创建目录

2. mkdir -p /usr/docker/jenkins_data

3. ​

4. //授权权限

5. chmod 777 jenkins_home

3、启动Jenkins容器

启动命令如下：

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容器的相关信息

1. CONTAINER ID   IMAGE                         COMMAND                   CREATED     STATUS       PORTS                                                                                     NAMES

2. 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下面的就是密码

Please use the following password to proceed to installation: ​ a90c1533c8824b17bb49ff932229d22d 

2、查看文件

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

6、修改插件源

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

#进入更新配置目录

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

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

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文件

1. <?xml version='1.1’encoding='UTF-8'?>

2.   <sites>

3.       <site>

4.           <id>default</id>

5.           <url>https://updates.jenkins.io/update-center.json</url>

6.       </site>

7.   </sites>

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

1. <?xml version='1.1encoding='UTF-8'?>

2. <sites>

3.   <site>

4.       <id>default</id>

5.       <urI>http://mirror.esuni.jp/jenkins/updates/update-center.json</url》

6.   </site>

7. </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，用于打包前端项目：

1. FROM nginx

2. COPY dist/ /usr/share/nginx/html/

3. COPY nginx/default.conf /etc/nginx/conf.d/default.conf

AI写代码

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

1. server {

2.   listen       80;

3.   server_name localhost;

4. ​

5.   #charset koi8-r;

6.   access_log /var/log/nginx/host.access.log main;

7.   error_log /var/log/nginx/error.log error;

8. ​

9.   location / {

10.       root   /usr/share/nginx/html;

11.       index index.html index.htm;

12.   }

13. ​

14.   #error_page 404             /404.html;

15. ​

16.   # redirect server error pages to the static page /50x.html

17.   #

18.   error_page   500 502 503 504 /50x.html;

19.   location = /50x.html {

20.       root   /usr/share/nginx/html;

21.   }

22. }

创建任务

输入自己的github地址

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

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

触发器选择GitHub hook trigger for GITScm polling

构建环境选择node

添加构建步骤

输入命令

1. npm install

2. npm run build

3. rm -rf /home/nginx/html/*

4. docker stop vueApp

5. docker rm vueApp

6. docker build -t vuenginxcontainer .

7. docker image ls | grep vuenginxcontainer

8. docker run \

9. -p 3000:80 \

10. -d --name vueApp \

11. vuenginxcontainer

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

这里就开始构建

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

部署流程

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

总结

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

感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你!有需要的小伙伴可以点击下方小卡片领取