小公司前端 CICD 流程

大桔子1223
39 阅读3分钟

前几份工作都是在有成熟运维团队的公司中工作，不需要业务部门的开发区考虑如何去部署代码，只要按照公司的规范去执行就行。

一般都是有一个 gitlab，一台单独专门用来构建工作的服务器（和业务服务器分离），一个可视化的部署平台查看部署进度及历史部署情况，还有审查流程，如果要部署到生产环境还需审批之后才能进行

有的是在 gitlab push 到制指定分支或是 push tag 即可自动执行 CICD 流程，有的则需在 部 署平台手动点击一下，选择部署 commit/tag、环境、审批人等

一切都很自然，很严谨。这是对于一个成熟的开发团队所必备的制度

但是我现在来到了一个只有各位数开发团队的公司，前端也只有两人，要搭建这么一套 CICD 流程属实有些杀鸡用牛刀了，另外也有一些客观原因就是没有专门构建服务器，并且更离谱的是，前端后端的业务代码都是在一台服务器上（成本原因）

这种情况要做 CICD 流程一般有两种方案：

  1. 选择 github Action 这样的方案把构建工作放到 github 服务器去做，按照其规则编写 yaml 文件
  2. 自己编写脚本在本地构建部署

在此我选择了第二种方案，主要是目前团队人员太少，不需要搞这些复杂的东西，简单便捷

主要步骤如下： 前端极简的 CICD 流程

设置npm 脚本 "deploy-demo": "tsc --noEmit && vite build --mode demo && node deploy/demo.cjs"

  1. 将 build 后的 dist 目录压缩成 zip
  2. 用 scp 方式（需要使用私钥）将 zip 放到目标服务指定位置（对zip文件加上版本号命名）
  3. 在服务器上解压 zip 文件
  4. 删除历史 zip 文件（仅保留最近 5 个 方便回滚）
  5. 回滚到指定版本操作 sudo unzip -q 202508061159.zip -d build/

源码在 github.com/hugeorange/…

注意点：

  1. 确保服务器支持 ssh 访问，私钥保存在本地，公钥放置在服务器指定位置 
    # 在服务器上生成 SSH 密钥（如果还没有）
ssh-keygen -t ed25519 -C "deploy-key"

# 将公钥 (~/.ssh/id_ed25519.pub) 添加到 authorized_keys
cat ~/.ssh/id_ed25519.pub >> ~/.ssh/authorized_keys

# 确保权限正确
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh
  2. 对于普通 spa 项目上面步骤已经足够了，对于 nodejs 或是 next.js 等项目还需要特殊处理一下，zip 不仅仅是 build 或 dist 而是整个项目（包含 node_modules）因为一般 nodejs 项目都是源码执行，不会像 spa 一样打包成单独的几个 js 文件，在本地做 zip 的时候千万要小心不要搞成死循环了，并且由于包含 node_module 所以 zip 的时间会稍微长一些，所以要加个进度条，代码参考 github.com/hugeorange/…
avatar
文章
阅读
粉丝