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

聿小翼2024-02-04 10:58

前置

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

正文

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

第一步：在vue3项目 根目录 下 新建一份 Dockerfile 文件（名字不可改，没有后缀）
javascript 复制代码 
FROM nginx:latest
MAINTAINER 聿小翼
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf
第二步：在Jenkins 里面新建任务（建议任务名称与 GitHub 的项目名称保持一致）

GitHub 配置 此处忽略 可拜读一下《cenos7 下 docker -----> Jenkins 私钥配置 git （避坑指南）》

  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次
  • 首次运行/或者希望重新拉取使用
bash 复制代码 
  #!/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 脚本： 二次之后，可以使用 :
bash 复制代码 
  #!/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 ：

bash 复制代码 
  #!/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

课外知识

xml 复制代码 
停止：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 插件可能有一些限制和局限性，需要根据具体需求进行调整和扩展
相关推荐
LCG元6 小时前
Vue.js组件开发-使用vue-pdf显示PDF
vue.js
哥谭居民00017 小时前
将一个组件的propName属性与父组件中的variable变量进行双向绑定的vue3（组件传值）
javascript·vue.js·typescript·npm·node.js·css3
烟波人长安吖～7 小时前
【目标跟踪+人流计数+人流热图（Web界面）】基于YOLOV11+Vue+SpringBoot+Flask+MySQL
vue.js·pytorch·spring boot·深度学习·yolo·目标跟踪
PleaSure乐事8 小时前
使用Vue的props进行组件传递校验时出现 Extraneous non-props attributes的解决方案
vue.js
土豆炒马铃薯。8 小时前
【Vue】前端使用node.js对数据库直接进行CRUD操作
前端·javascript·vue.js·node.js·html5
赵大仁9 小时前
深入解析 Vue 3 的核心原理
前端·javascript·vue.js·react.js·ecmascript
bidepanm9 小时前
Vue.use()和Vue.component()
前端·javascript·vue.js
Ashore_11 小时前
从简单封装到数据响应：Vue如何引领开发新模式❓❗️
前端·vue.js
顽疲11 小时前
从零用java实现 小红书 springboot vue uniapp （6）用户登录鉴权及发布笔记
java·vue.js·spring boot·uni-app
&活在当下&12 小时前
ref 和 reactive 的用法和区别
前端·javascript·vue.js
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04【一文读懂】NTN（非地面网络）技术介绍05优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间06HCIA-datacom数通题库和录播视频资料07新手学习VR全景需要知道的几个问题08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09支付宝短视频平台创作分成激励项目10【数学建模】建筑工地开工问题