升级Jenkins：发布和代理 VUE 项目

2022-04-11 15:52:04 浏览数 (1)

(海上生明月，_ _ _ _ _)

书接上回，在之前的几篇文章中，我们主要通过几篇文章来讲解了如何通过一个镜像，快速的创建Jenkins容器实例，然后搭建我们的持续集成和持续部署的平台，相关的文章呢如下，我这里简单列举一下，省得大家查找了：

文章目录

《CI/CD系列：使用Docker安装Jenkins》

《使用Jenkins来发布和代理.NetCore项目》

通过这两篇文章，我简单的说明了如何通过docker镜像来创建Jenkins镜像，并如何在此基础上，部署netcore项目，现在大家看到的我所有的ASP.NETCore项目，都是通过这种方式来搭建的，每次修改代码，只需要一键构建，即可部署，速度还是很快的，也有相应的操作日志，当然，还是不建议初学者这么玩儿，毕竟这是只为快，不求深入研究。

不过之前都是部署的都是后端项目，那如何构建前端项目呢？我也在视频里说到过如何处理：

视频目录

《Jenkins 安装与项目构建》

《Docker 部署VUE项目》 第一个视频是上边两篇文章的总结和操作，第二个视频，我也尝试了如何把vue项目构建镜像和代理发布等，今天我讲的内容，是在这两篇视频都已经看过的基础上的，如果没看的，建议看看，不然可能有点儿懵。

今天的主题就是：如何通过Jenkins来持续集成前端VUE项目，当前其他前端项目以此类推，触类旁通。

PS：其实除了Jenkins，你还可以简单的通过Github的YML来实现，这也更类似容器编排的味道，下个系列在尝试k8s的时候，我会用yml着手入门。

（基本的核心项目都在这里了）

构建时间基本30秒左右，总体来说还行。

文章来源：老张的哲学

升级Jenkins镜像，以适应前端项目

在上个文章中，我们说到了使用我自己创建的一个组合镜像，来创建Jenkins容器，为什么要使用组合镜像，是因为我们在构建aspnetcore项目的的时候，要使用dotnet命令，当然，我一直想着，如果像挂载docker一样，能把dotnet.exe这种给挂载到Jenkins的容器上就好了，但是我没有找到，这样就不得不把aspnetcore的SDK给融合到Jenkins的镜像里，这也就是我为什么要创建组合镜像的原因，如果读这篇文章的你，正好会把dotnet给挂载到容器上，那欢迎指导一下，不胜感激。

好啦，言归正传，如果想要在Jenkins容器中来部署前端项目，那就肯定离不开build操作来生成dist静态文件，那也就更离不开npm了。

这不，我仿照之前在Jenkins中能使用dotnet的SDK的写法，继续升级了下镜像，把npm也融合进行了。

代码语言：javascript复制
FROM jenkins/jenkins

# Switch to root to install .NET Core SDK
USER root

# Show distro information!
RUN uname -a && cat /etc/*release

# Based on instructiions at https://www.microsoft.com/net/download/linux-package-manager/debian9/sdk-current
# Install dependency for .NET Core 3
RUN apt-get update
RUN apt-get install -y curl libunwind8 gettext apt-transport-https

# Based on instructions at https://www.microsoft.com/net/download/linux-package-manager/debian9/sdk-current
# Install microsoft.qpg
RUN curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
RUN mv microsoft.gpg /etc/apt/trusted.gpg.d/microsoft.gpg
RUN sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/microsoft-debian-stretch-prod stretch main" > /etc/apt/sources.list.d/dotnetdev.list'

# Install the .NET Core framework
RUN apt-get update
RUN apt-get install -y dotnet-sdk-3.1

# Install the npm 
RUN apt-get install -y curl 
  && curl -sL https://deb.nodesource.com/setup_14.x | bash - 
  && apt-get install -y nodejs 
  && curl -L https://www.npmjs.com/install.sh | sh
    
# Install cnpm
RUN npm install cnpm -g

RUN npm -v
RUN cnpm -v

# Switch back to the jenkins user.
USER jenkins

除了NPM以外，也同时把CNPM给添加上了，反正不管你是墙里还是墙外的，都可以使用吧，最终的Jenkins包大小1.35个G，包括了dotnet的SDK、NPM/CNPM的组件Jenkins镜像文件，我是这么命名的，已经提交到了dockerhub：

代码语言：javascript复制
docker pull laozhangisphi/jenkins_with_dnt-cnpm_by_docker:latest

可能你会问，为啥不用之前的镜像呢？主要是害怕影响别人使用，使用新的镜像，直接拉取就行，1.3个G，可以好好的歇会儿了。

那现在有了新的镜像，那具体如何使用呢，继续往下看，有几点需要注意的。

● ● ●

升级我们的Jenkins管理平台

上边我们有了镜像，如果你感觉可以用，那就直接Pull拉取就行了，命令就在上边，从dockerhub中拉取到服务器宿主机即可，然后根据这个新的镜像，生成一个新的Jenkins容器即可：

代码语言：javascript复制
docker run -u root --rm -d -p 3000:8080 --name jenkins 
-v /etc/localtime:/etc/localtime 
-v /usr/bin/docker:/usr/bin/docker 
-v /var/run/docker.sock:/var/run/docker.sock 
-v /home/dockerVolumes2/jenkins_home:/var/jenkins_home 
laozhangisphi/jenkins_with_dnt-cnpm_by_docker

这里的挂载时区好像还是不行，应该需要在上边加一个参数，具体我忘了，建议爱学习的可以研究下，我会在下边评论区留言，当然你可以直接直接在管理平台上修改，执行脚本命令：

代码语言：javascript复制
System.setProperty('org.apache.commons.jelly.tags.fmt.timeZone', 'Asia/Shanghai')

现在我们生成了一个新的容器，那你肯定会问，这样之前的项目，不就需要一个个迁移，重新配置一遍了么？

不会的！

如果你是用我上个文章里写的，将工作区间（主要是代码和Jenkins配置），项目配置文件（主要是项目appconfig.json、log日志文件，以及图片等）都挂载到了宿主机的话，相关的内容和数据都没有丢的，还是可以打开端口下的网站，平台一毛一样。

不信可以打我，而且我之前视频讲解过，挂载是什么意思，如果还怀疑的话，就是要么没挂载，要么没学会。

这个时候就可以把之前的镜像和容器删了，注意你这个新Jenkins的容器端口，要在nginx监听的哟。

目前我项目里一共这么多镜像和容器，然后也有其他的小Task，但是没有数据库：

（全部镜像）

（正在运行容器）

看看系统配置使用情况：

目前这么多已经使用快3个G内存了，所以说，如果搞Jenkins这一套逻辑的话，至少来个2核4G的吧，我这是8G，一年也就几百块钱。

好啦，现在环境已经配置好了，剩下的就是今天的重点，持续集成VUE项目了。

● ● ●

打包 VUE 项目镜像

其实这个具体的写法和上篇部署ASP.NETCore是类似的，我这里快速的说一下吧：

1、创建Dockerfile文件

之前我们说过的，部署vue项目，其实就是起一个nginx服务即可，那配置Dockerfile文件就很简单了：

代码语言：javascript复制
FROM nginx
MAINTAINER vueadmin
ADD dist /usr/share/nginx/html
ADD vueadmin.nginx.conf /etc/nginx/nginx.conf
RUN chown nginx:nginx -R /usr/share/nginx/html
EXPOSE 80
RUN echo 'build admin image successful!!'

其中，又两个ADD，第一个就是Build以后的dist目录，第二个就是当前nginx服务的配置文件，毕竟要起服务，要做相应的配置，比如要url重写，或者压缩什么的。

2、自定义nginx配置文件

直接上代码

代码语言：javascript复制
worker_processes auto; 
 
events {
    worker_connections  1024;
}
  
http {
    include       mime.types;
    default_type  application/octet-stream;

    gzip  on;
    gzip_min_length 5k; 
    gzip_buffers 4 16k; 
    gzip_comp_level 8; 
 
    sendfile        on;

    keepalive_timeout  600;
 
    client_max_body_size   20m;

    server {
        listen       80;
        server_name  localhost;
  
        location / {
          root   /usr/share/nginx/html;
          index  index.html index.htm;
          try_files $uri $uri/ /index.html;
        }
         
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }        
    }
}

不要告诉我看不懂，主要注意下root根目录的地址要和Dockerfile一致，然后就是路由重写那句话，其他的就很简单。

3、配置.dockerignore

目前就是去掉某些文件和文件夹，不过目前看来，如果按照我下边的方案，可能作用不大，因为还是会把node_modules打包进去，如果你仅仅想把dist文件夹打包，那就需要换一种写法了，具体的私聊我吧，其实说白了，就是把Dockerfile文件放到dist文件夹下就行。

代码语言：javascript复制
.DS_Store
node_modules

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

4、设计删除容器和镜像sh文件

这里先说下，为什么要设计这个sh文件。

我们之前说过，如果要修改代码，那就需要重新生成镜像，那一般的操作都是删除之前的镜像和容器，重新生成新的镜像和新的容器，这是很low也很简单的方案。

当然，你也可以来个版本控制线，每次加版本就行，我们公司是这么操作的，不过毕竟我这里用的Jenkins都是docker版本的，就不打算搞那么复杂的情况了，你可以自己尝试，思路就是每次生成的都可以加版本，然后也可以回退版本，保证在线项目一直可以正常访问状态，这也就是持续集成和持续部署的真谛。

现在依然使用删除的方案，但是如果删除的话，会有一个小问题，倘若第一次Jenkins执行，或者中间出错的话，执行stop和rm操作，会报错，这样Jenkins流程就走不下去，只能手动处理，那我们可以把这几个命令拿出来，放到sh文件里，就不会报错了，参考@提伯斯：

代码语言：javascript复制
#!/bin/bash
docker ps|grep ${1}|while read i;do i; 
echo "容器已启动,详细信息:${i}，即将关闭";
docker stop ${1};
docker rm ${1};
docker rmi ${2};
echo "已关闭容器,${1}" ;
done;

其实我看还有的小伙伴是这么操作的，参考@Kawhi：

代码语言：javascript复制
docker stop blogcorecontainer || true 
&& docker rm blogcorecontainer || true 
&& docker build -t blogcoreimage . 
&& docker run -d -p 8186:80 --name blogcorecontainer blogcoreimage

就是使用 || 或者 && 命令可以避免这个问题，这个我没有尝试，你可以自己试试。

最终一个四个文件：

现在就需要配置Jenkins流程了。

配置Jenkins任务，生成容器并代理

1、创建任务，并配置

还是一个自由风格的任务，然后填写下面的步骤

代码语言：javascript复制
# 如果没有更新包的话，可以不执行安装module
#cnpm install

git checkout .

rm -f util/global.js
cp -rf /var/jenkins_home/workspace/SecurityConfig/Blog.Admin/global.js util/global.js

cnpm run build

chmod 777 StopContainerImg.sh
./StopContainerImg.sh vueadmincontainer laozhangisphi/vueadminimg

docker build -t laozhangisphi/vueadminimg .
docker run --name=vueadmincontainer -d  -v /etc/localtime:/etc/localtime -it -p 2001:80 laozhangisphi/vueadminimg

这里有几点，我需要啰嗦下：

1、之前netcore的时候，我都是每次构建就删除工作区间，但是这次是vue项目，如果每次都删除的话，都需要执行install工作，那我们可以尝试用 git checkout 和git pull来保证代码最新，同时不要勾选删除指令。 2、我这里还是用了配置文件，所以你可以参考global.js写法，配置ids4和jwt。 3、StopContainerImg.sh，就是上文提到的文件，用来替换stop和rm命令。

到这里就完成了整体历程，剩下最后一步代理了。

2、修改反向代理配置

现在docker已经多了一个镜像和容器，并监听2001端口，你需要理解一下，为什么会监听2001端口，因为我们启动的本来就是一个nginx服务。

web服务没问题了，那现在就需要反向代理了，毕竟要调后端接口，很简单，在宿主机的nginx.conf中，配置vueadmin的监听：

其他的都不需要改，只需要修改下vueadmin这个域名的代理方式就行，之前是静态文件，现在是代理2001，反向代理还是8081. 重启nginx，就可以看到一切正常了，注意jwt和ids4的切换。

● ● ●

打完收工，到今天，我们Jenkins的相关工作就真的迁移完成了，我们可以不用学会，甚至也可以不用学，毕竟不影响部署docker，因为我们下一步会有一个重头戏来替换，那就是K8s，下一个系列再见。

jenkins 容器 nginx .net

0 人点赞