【Jenkins+gitee+docker实现CI/CD（之四）】jenkins自动部署前端vue项目

如何实现jenkins自动部署前端vue项目？

我的思路是代码存放在gitee上，通过git提交代码，触发jenkins自动摘取gitee中的代码，并打包后移动并覆盖至安装并运行了nginx的docker容器中映射到linux服务器中的文件目录

要实现这一系列步骤，我们需要以下准备工作 

1. 一台安装了centOS的linux服务器
2. gitee帐户以及项目
3. linux 安装docker
4. linux安装jenkins
5. linux安装node.js(方便打包vue项目及安装项目依赖)

了解这些准备工作后，我们就一一照做

 

 

1，在服务器上安装docker

网上有很多在 centOSk中安装docker的教程，这里就不多说了

安装完成后

#启动
systemctl start docker
#加入自启
systemctl enable docker
#验证是否安装成功
docker version

 

2，创建对应的容器并映射好服务器上的路径

这个也很容易，可以参考之前的教程

 

3，在linux服务器上安装node,参考网上教程，此步坑比较多，注意以下问题

1. 自己的服务器类型和要安装的node类型要匹配，后面贴上node官网的安装文件类型，巨坑无比
2. 安装完成后将node和npm以软链接形式挂载到全局，类似我们在window上的环境变量，它这个目录也是不同类型的操作系统目录也不同，具体以我们执行node -v时系统提示的目录为主

 

 

 

 

wget  https://nodejs.org/dist/v16.18.0/node-v16.18.0-linux-x64.tar.xz

ln -s /usr/local/nodejs/node-v16.18.0-linux-x64/bin/node /usr/local/bin
ln -s /usr/local/nodejs/node-v16.18.0-linux-x64/bin/npm /usr/local/bin

# 查看当前目录
pwd

 

4，在jenkins的项目设置中添加shell脚本，来执行将在gitee中拉取到项目空间中的代码进行打包后替换到第2步中创建nginx容器映射到服务器中的路径里

node -v
#################【安装项目依赖】################################
npm install 
#################【删除jenkins之前打包文件】######################
rm -rf ./dist/*
#################【开始打包文件】#################################
npm run build
#################【删除nginx容器之前打包文件】#####################
rm -rf /var/project/data-collection/v3-admin/*
#################【复制新打包的文件到nginx容器】####################
cp -rf ./dist/* /var/project/data-collection/v3-admin
#################【操作成功！】####################################

 

 5，项目失败！！！ T_T

新手版的服务器资源太差，jenkins使用shell脚本安装vue项目直接跑到服务器死机，寻找其他途径吧

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 其他存档

 开启服务器上的docker对应的端口

#查看docker状态
systemctl status docker
#找到并打开docker的配置文件 
vim /usr/lib/systemd/system/docker.service
#原：
ExecStart=/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock
#改为：
ExecStart=/usr/bin/dockerd -H fd:// -H unix:///var/run/docker.sock -H tcp://0.0.0.0:2376 --containerd=/run/containerd/containerd.sock
#新加载服务的配置文件
systemctl daemon-reload
#重启docker服务
systemctl restart docker

 

 

3，开启服务器上的2376端口 

 

4, 使用jenkins的插件Docker Plugin配置连接Docker引擎

 目前搞不定阿里云的2376端口对外开放，还要处理【证书】什么的，提交了工单也没处理成功

这里换一种思路，就不用每次构建时候jenkins连接Docker引擎先删除原有docker镜像，再重新打包创建一个新镜像的办法了

这里是创建好项目目录，再创建对应的docker容器挂载到上一步的项目目录中，每次构建直接替换对应的项目目录中的上一个版本的文件

1. 创建docker内部网段，

   1. #创建一个名为data-collection-net的网段
      docker network create --subnet=172.18.0.0/16 data-collection-net
      
      # 删除网段
      docker network rm data-collection-net
      
      #给python窗口分配网段
      docker run --it --net data-collection-net --ip 172.18.0.2  python:3.8 bash
      
      #注意：172.18.0.1是网段的网关地址，是不能用的

      

       以上是我创建的对应的服务器目录，以方便后续挂载到docker容器中

2. 创建对应的项目容器，这个我有在上续博客中介绍个，直接可以【点这个】去查看

 

 

 

 

 

 

 

 

 

 

<useSecurity>true</useSecurity>
  <authorizationStrategy class="hudson.security.FullControlOnceLoggedInAuthorizationStrategy">
    <denyAnonymousReadAccess>true</denyAnonymousReadAccess>
  </authorizationStrategy>
  <securityRealm class="hudson.security.HudsonPrivateSecurityRealm">
    <disableSignup>true</disableSignup>
    <enableCaptcha>false</enableCaptcha>
  </securityRealm>