🚀 5分钟搞定！前端云效流水线部署实战

黑黑_
86 阅读2分钟

🔖 大纲

  1. 准备工作（账号/主机/路径规划）
  2. 创建第一条流水线（模板选取→Git 源→触发规则）
  3. nodeJS打包
  4. 主机组部署
  5. 回滚策略与在线 Debug

1️⃣ 准备工作

事项推荐做法
① 云效账号阿里云账号直接登录
② 代码仓库CodeUp / GitHub / Gitee 均可
③ 目标主机阿里云 ECS 或自有主机

2️⃣ 流水线创建

进入「云效 → 流水线 → 新建」，根据自己的需求选取合适的部署模块

image.png

3️⃣ 码源及触发规则

  • 支持 CodeUp / GitHub / Gitee / 自建 GitLab
  • 选择触发分支，触发方式

image.png

4️⃣ 代码扫描（可选，有的项目扫描时间久的话不开也行）

image.png

5️⃣ nodeJS打包

image.png

  • 打包命令yarn install yarn build就行，根据自己用的包依赖工具就行。
  • 下面是我的打包命名，我的项目的话是非常老的项目，依赖版本也很老所以下包很麻烦做了处理
  • 构建物上传的路径和本地打包一样（dist）
#!/bin/bash
set -e

CACHE_TAR="/root/.cache/node_modules_tar/node_modules.tar"
CACHE_MD5="/root/.cache/lock_md5/last_lock.md5"

#------- 取缓存 -------
if [ -f "$CACHE_TAR" ]; then
  echo "✅ 命中云效缓存，开始解压"
  tar -xf "$CACHE_TAR"
else
  echo "❌ 无缓存，将全量安装"
fi

#------- 锁对比 -------
LOCK_MD5_VAL=$(md5sum yarn.lock | awk '{print $1}')
if [ -f "$CACHE_MD5" ] && [ "$LOCK_MD5_VAL" = "$(cat "$CACHE_MD5")" ]; then
  echo "lock 未变，跳过 install"
else
  echo "lock 变化，重新安装并更新缓存"
  rm -rf node_modules "$CACHE_TAR" "$CACHE_MD5"
  yarn install --frozen-lockfile
  mkdir -p "$(dirname "$CACHE_TAR")" "$(dirname "$CACHE_MD5")"
  tar -cf "$CACHE_TAR" node_modules
  echo "$LOCK_MD5_VAL" > "$CACHE_MD5"
fi

#------- 构建 -------
yarn build

6️⃣ 主机部署

  • 选择上一步上传的制品
  • 添加主机
  • 1.流水线 → 主机组 → 新建 → 复制 一键安装命令
  • 2.到服务器执行，5 s 即可看到“在线”
  • 下载制品到服务器指定路径（一般放到服务器存放前端的地方）
  • 部署脚本
  • 1.清旧文件
  • 2.直接解压到目标目录
  • 3.平滑重载nginx
  • 清除下载的制品包
#!/bin/bash
set -e

# 1. 清旧文件（保留目录本身）
rm -rf /u01/www/fms-adl-web/dist/*

# 2. 直接解压到目标目录
tar zxvf /u01/www/fms-adl-web/package.tgz -C /u01/www/fms-adl-web/dist

# 3. 平滑重载
/u01/nginx/sbin/nginx -t
/u01/nginx/sbin/nginx -s reload

# 4. 删除下载的制品包
rm -f /u01/www/fms-adl-web/package.tgz

最终效果

image.png

一键回滚

image.png

还可以自己加功能，如审批，群机器人通知之类的

image.png

image.png

  • 如果本文帮到你，欢迎 点赞 + 收藏 + 评论」 ❤️
  • 另外主页还有JAVA微服务部署教程欢迎学习❤️
avatar
文章
阅读
粉丝