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

最新推荐文章于 2024-07-23 11:18:54 发布

爱吃香菜

最新推荐文章于 2024-07-23 11:18:54 发布

阅读量938

点赞数 11

分类专栏：软件测试自动化测试程序员文章标签：测试工具程序员功能测试面试 Docker Jenkins Nginx

本文链接：https://blog.csdn.net/wx17343624830/article/details/140156134

版权

软件测试同时被 3 个专栏收录

2880 篇文章 35 订阅

订阅专栏

程序员

2531 篇文章 2 订阅

订阅专栏

自动化测试

2368 篇文章 14 订阅

订阅专栏

软件测试面试刷题，这个小程序（永久刷题），靠它可以快速找到工作！https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502

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

前提条件

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

准备工作

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

安装docker

1.卸载docker的旧版本

[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相关

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

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

分别执行下面的两条命令

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

[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

得到的版本信息如下：

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

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

8.2 往daemon.json中添加配置

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

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

执行信息如下：

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

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

sudo apt-get install git //安装git

git --version //验证

安装jdk

一、检查系统是否自带jdk

java --version

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

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

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

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

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

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

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

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

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

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

三、配置环境变量

vim /etc/profile

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

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拉取镜像，

docker pull jenkins/jenkins:2.426.2-lts

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

2、创建挂载目录

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

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

//授权权限
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容器的相关信息

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

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

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

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

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

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

添加构建步骤

输入命令

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 自动完成，大大提高了部署效率和代码发布的可靠性。希望这篇文章能帮助你搭建自己的前端自动化部署流程。

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】

软件测试面试文档

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

在这里插入图片描述

爱吃香菜

关注

11
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Docker + Jenkins + Nginx 实战前端自动化部署

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

扫一扫

专栏目录