likes
comments
collection
share

cenos7 下 docker -----> Jenkins 部署 Vue3 项目

作者站长头像
站长
· 阅读数 6

前置

  • 使用到的jenkins 插件有：Git Paramete，nodeJS，Generic Webhook Trigger，
  • 本系列是基于持续集成，自动部署 编写的，各位同学取实际项目所需即可
  • 交互思路：

cenos7 下 docker -----> Jenkins 部署 Vue3 项目

正文

本文是基于 Jenkins node 插件 编写的，如果需要基于 Dockerfile 方式可以将 node 相关 放到 Dockerfile文件内

第一步：在vue3项目 根目录 下 新建一份 Dockerfile 文件（名字不可改，没有后缀）
FROM nginx:latest
MAINTAINER 聿小翼
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf
第二步：在Jenkins 里面新建任务（建议任务名称与 GitHub 的项目名称保持一致）
  1. 在任务管理 ——> 源码管理 中找到 构建触发器 勾选 Generic Webhook Trigger 根据提示 配置 GitHub webhooks 用的 地址：**http://Jenkins访问的地址:端口/generic-webhook-trigger**/invoke?token=xxxx (xxxx 为自定义的token)
  2. 进入 对应的 GitHub 项目 ——> 设置 ——> Webhooks （此处看不懂的，可以 去看：这位大佬写的教程 # 【超详细傻瓜式教程】向GitHub提交代码时触发Jenkins自动构建）
  3. 关键的一步来了：Build Steps 选择：执行 shell 若如 作者 一样没有勇气一步到位，建议编辑2次
  • 首次运行/或者希望重新拉取使用
  #!/bin/bash
cd /var/jenkins_home/workspace/xxxx(这里是Jenkins 的默认项目存放目录，xxxx首页新建任务所填写的名称，建议与github项目名称保持一致)
# 清理缓存
npm cache clean --force
# 安装 rimraf 
npm install rimraf -g
# 执行递归删除node_modules文件夹
rimraf node_modules
# 删除包版本锁
rimraf package-lock.json

# 检查 node
node -v

#重新 
npm install

以下的要根据实际项目 导入 安装语句： （--legacy-peer-deps 的作用是 强制安装，避免版本太高导致异常）
#
npm install terser -D --legacy-peer-deps

npm install element-plus  --save  --legacy-peer-deps
npm install @element-plus/icons-vue  --legacy-peer-deps

#css 预处理器 sass（看习惯）
npm install -D sass sass-loader --legacy-peer-deps
# 国际化，多语言
npm install vue-i18n  --legacy-peer-deps

npm install @intlify/unplugin-vue-i18n --legacy-peer-deps

npm install -D @vitejs/plugin-vue  --legacy-peer-deps

npm install -D typescript  --legacy-peer-deps
# node 声明
npm install @types/node -D --legacy-peer-deps

npm install -D @jridgewell/sourcemap-codec --legacy-peer-deps

# 用axios发送网络请求
npm install axios --legacy-peer-deps

# 自动导入vue3相关函数
npm install -D unplugin-auto-import --legacy-peer-deps

# 自动导入Element Plus 相关函数(components.d.ts)
npm install unplugin-vue-components --legacy-peer-deps
#
npm install unplugin-icons --legacy-peer-deps

# 路由
npm install vue-router@4 --legacy-peer-deps

npm run dev
  1. 保存成功后，点击 立即构建（可通过点击构建历史中的记录，进入 控制台查看具体构建进度） 在显示，有相关类似访问地址的信息后，手动停止构建
  2. 再次进入 项目构建配置页面修改shell 脚本： 二次之后，可以使用 :
  #!/bin/bash
cd /var/jenkins_home/workspace/xxxx(这里是Jenkins 的默认项目存放目录，xxxx首页新建任务所填写的名称，建议与github项目名称保持一致)

if [ -d "dist" ]; then
	echo "dist 目录已存在，删除"
    rm -rf dist
else
	echo "dist 不存在，跳过"
fi
if npm run build; then
# 检查容器是否存在
    if docker inspect jinkins-vue-admin >/dev/null 2>&1; then
        # 停止并删除旧容器
        docker stop jinkins-vue-admin
        docker rm jinkins-vue-admin
        # 删除旧镜像
        docker rmi jinkins-vue
    fi

    # 构建镜像
    docker build -t jinkins-vue .

    # 运行新容器
    docker run --name jinkins-vue-admin -p 8080:80 -d jinkins-vue
else
    echo "npm run build 失败"
fi
  1. 保存成功后，点击 立即构建（可通过点击构建历史中的记录，进入 控制台查看具体构建进度）

至此 jerkin 部署vue3 项目就折腾好了，与 Dockerfile 方式 不一样的，就是 上述的 node 命令以及 node 安装位置存放那里的差别

有把握的可以这样编写shell ：

  #!/bin/bash
cd /var/jenkins_home/workspace/xxxx(这里是Jenkins 的默认项目存放目录，xxxx首页新建任务所填写的名称，建议与github项目名称保持一致)
# 检查是否为首次构建
if [ "$BUILD_NUMBER" == "1" ]; then
    echo "首次构建，执行 npm install"
    npm install

    以下的要根据实际项目 导入 安装语句： （--legacy-peer-deps 的作用是 强制安装，避免版本太高导致异常）
    #
    npm install terser -D --legacy-peer-deps

    npm install element-plus  --save  --legacy-peer-deps
    npm install @element-plus/icons-vue  --legacy-peer-deps

    #css 预处理器 sass（看习惯）
    npm install -D sass sass-loader --legacy-peer-deps
    # 国际化，多语言
    npm install vue-i18n  --legacy-peer-deps

    npm install @intlify/unplugin-vue-i18n --legacy-peer-deps

    npm install -D @vitejs/plugin-vue  --legacy-peer-deps

    npm install -D typescript  --legacy-peer-deps
    # node 声明
    npm install @types/node -D --legacy-peer-deps

    npm install -D @jridgewell/sourcemap-codec --legacy-peer-deps

    # 用axios发送网络请求
    npm install axios --legacy-peer-deps

    # 自动导入vue3相关函数
    npm install -D unplugin-auto-import --legacy-peer-deps

    # 自动导入Element Plus 相关函数(components.d.ts)
    npm install unplugin-vue-components --legacy-peer-deps
    #
    npm install unplugin-icons --legacy-peer-deps

    # 路由
    npm install vue-router@4 --legacy-peer-deps
else
    echo "非首次构建，跳过 npm install"
fi

# 检查 node_modules 目录是否存在
if [ -d "node_modules" ]; then
  echo "node_modules 目录已存在，跳过 npm install"

else
    echo "node_modules 目录不存在，执行 npm install"
    npm install

    以下的要根据实际项目 导入 安装语句： （--legacy-peer-deps 的作用是 强制安装，避免版本太高导致异常）
    #
    npm install terser -D --legacy-peer-deps

    npm install element-plus  --save  --legacy-peer-deps
    npm install @element-plus/icons-vue  --legacy-peer-deps

    #css 预处理器 sass（看习惯）
    npm install -D sass sass-loader --legacy-peer-deps
    # 国际化，多语言
    npm install vue-i18n  --legacy-peer-deps

    npm install @intlify/unplugin-vue-i18n --legacy-peer-deps

    npm install -D @vitejs/plugin-vue  --legacy-peer-deps

    npm install -D typescript  --legacy-peer-deps
    # node 声明
    npm install @types/node -D --legacy-peer-deps

    npm install -D @jridgewell/sourcemap-codec --legacy-peer-deps

    # 用axios发送网络请求
    npm install axios --legacy-peer-deps

    # 自动导入vue3相关函数
    npm install -D unplugin-auto-import --legacy-peer-deps

    # 自动导入Element Plus 相关函数(components.d.ts)
    npm install unplugin-vue-components --legacy-peer-deps
    #
    npm install unplugin-icons --legacy-peer-deps

    # 路由
    npm install vue-router@4 --legacy-peer-deps
fi

if npm run build; then
# 检查容器是否存在
    if docker inspect jinkins-vue-admin >/dev/null 2>&1; then
        # 停止并删除旧容器
        docker stop jinkins-vue-admin
        docker rm jinkins-vue-admin
        # 删除旧镜像
        docker rmi jinkins-vue
    fi

    # 构建镜像
    docker build -t jinkins-vue .

    # 运行新容器
    docker run --name jinkins-vue-admin -p 8080:80 -d jinkins-vue
else
    echo "npm run build 失败"
fi

课外知识

停止：sudo systemctl stop docker

查看：sudo systemctl status docker

启动：sudo systemctl start docker

sudo systemctl enable docker

查看已构建镜像
docker images

删除  镜像
docker rmi <镜像ID>

查看正在运行的容器
docker ps 

查看所有容器
docker container ls -a

停止/删除容器

docker stop <容器ID>

docker rm <容器ID>

启动镜像

docker start <容器ID>

重启镜像

docker restart <容器ID>


进入容器
docker exec -it -uroot <容器ID> bash

退出容器
exit

选择使用哪种方式来构建和部署 Vue 3 项目（使用 Docker Node 镜像还是 Jenkins 的 Node 插件）取决于您的具体需求和项目环境。以下是对两种方式的简要比较：

  1. 使用 Docker Node 镜像：

    • 优点：

      • Docker 提供了环境隔离和可移植性，使得在不同的环境中构建和部署项目更加一致和可靠。
      • 可以方便地在不同的环境中使用相同的 Docker 镜像来构建和部署项目，减少了配置和依赖项的管理工作。
      • 可以通过 Docker Compose 等工具来管理和编排多个容器，实现更复杂的部署场景。

    • 缺点：

      • 需要一定的学习和配置成本来设置和管理 Docker 环境。
      • 需要额外的资源来运行 Docker 容器，可能会增加部署的复杂性。

  2. 使用 Jenkins 的 Node 插件：

    • 优点：

      • 可以直接在 Jenkins 环境中使用 Node 插件来构建和部署项目，无需额外的配置和管理。
      • 可以与其他 Jenkins 插件和功能集成，如持续集成、自动化测试、部署流水线等。
      • 可以使用 Jenkins 提供的用户界面和功能来管理和监控构建和部署过程。

    • 缺点：

      • 需要配置和维护 Jenkins 环境，包括节点和构建代理等。
      • Jenkins 插件可能有一些限制和局限性，需要根据具体需求进行调整和扩展
转载自:https://juejin.cn/post/7330916433559601192
评论
请登录