从零到全流程 CI/CD：多技术栈项目自动化部署实战与优化指南

本文从本地开发到自动化部署，完整讲解多技术栈项目（React、Vue、Node.js）在 Windows 和 Linux 服务器上的 CI/CD 流程。文章通过 Git 仓库配置、Secrets 设置、前后端构建、GitHub Actions Workflow 编写与触发、自动化测试、多环境管理及版本回滚的实践示例，帮助开发者快速搭建高效可靠的持续集成与交付体系，并提供可拓展优化思路。

一、项目准备与版本管理

在开始自动化部署之前，确保项目结构完整，并使用 Git 进行版本管理。

1. 本地项目初始化

假设你有一个 React 项目：

bash 复制代码

cd /your/react/project
npm install
npm run build  # 生成 build/ 文件夹

Node.js 后端示例：

perl 复制代码

mkdir my-node-app
cd my-node-app
npm init -y
npm install express

Vue 前端示例：

perl 复制代码

vue create my-vue-app
cd my-vue-app
npm install
npm run build  # 生成 dist/ 文件夹

2. Git 仓库关联

sql 复制代码

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin git@github.com:username/my-app.git
git push -u origin main

版本管理不仅便于团队协作，也是 CI/CD 自动化的前提。

二、GitHub 仓库 Secrets 配置

在 GitHub 仓库中保存敏感信息（FTP/SSH/环境变量）：

打开仓库 → Settings → Secrets → Actions → New repository secret
示例 Secrets：

Name	Value 示例	用途
`FTP_HOST`	`ftp.example.com`	FTP 服务器地址
`FTP_USERNAME`	`username`	FTP 用户名
`FTP_PASSWORD`	`password`	FTP 密码
`SSH_PRIVATE_KEY`	`-----BEGIN PRIVATE KEY-----...`	SSH 登录服务器
`PROD_DIR`	`/var/www/html/app`	生产环境路径
`STAGING_DIR`	`/var/www/html/staging`	测试环境路径

在 Workflow 中可以通过 ${{ secrets.NAME }} 调用。

三、本地构建与手动部署演示

1. 前端 React（Windows + Nginx）

构建产物：

arduino 复制代码

npm run build  # build/ 文件夹

手动上传到 Windows Nginx：

javascript 复制代码

# C:/nginx/html/my-app

2. 前端 Vue（Linux + Nginx）

构建产物：

arduino 复制代码

npm run build  # dist/ 文件夹

上传到 Linux：

perl 复制代码

scp -r dist/* user@linux-server:/var/www/html/my-vue-app

Nginx 配置：

bash 复制代码

location / {
    try_files $uri /index.html;
}

3. Node.js 后端（Linux + PM2）

sql 复制代码

ssh user@server_ip "cd /var/www/my-node-app && git pull && npm install && pm2 restart all"

可选 Docker 构建：

perl 复制代码

docker build -t my-node-app:latest .

四、GitHub Actions Workflow 自动化部署

在项目根目录创建 .github/workflows/ci-cd.yml：

yaml 复制代码

name: Multi-stack CI/CD

on:
  push:
    branches: [main, develop]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Deploy Frontend via FTP
        uses: SamKirkland/FTP-Deploy-Action@4.4.0
        with:
          server: ${{ secrets.FTP_HOST }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: build  # React 或 dist/Vue
          server-dir: ${{ github.ref == 'refs/heads/main' && secrets.PROD_DIR || secrets.STAGING_DIR }}
          dry-run: false

      - name: Deploy Node.js backend
        run: |
          ssh -i ${{ secrets.SSH_PRIVATE_KEY }} user@server_ip \
          "cd /var/www/my-node-app && git pull && npm install && pm2 restart all"

说明：

Workflow 放在 .github/workflows/ 下，GitHub 自动识别
on: push 定义触发条件，可按分支或 Pull Request
使用 Secrets 避免明文密码或 Key 泄露
支持多环境自动选择部署目录

五、探索性思考与优化

1. 多环境部署

ini 复制代码

if: github.ref == 'refs/heads/main'

main 分支 → 生产环境
develop 分支 → 测试环境

2. 自动化测试与代码质量

前端 ESLint & 单元测试：

yaml 复制代码

- name: Run ESLint
  run: npm run lint

- name: Run Unit Tests
  run: npm test

后端 Mocha 测试：

arduino 复制代码

- name: Run Mocha Tests
  run: npm run test

3. 高可用与版本回滚

ruby 复制代码

# 上传版本化产物
scp -r build/* user@server:/var/www/html/my-app/build-$(git rev-parse --short HEAD)

# 更新 symlink 指向最新版本
ssh user@server "ln -sfn /var/www/html/my-app/build-<commit_id> /var/www/html/my-app/current"

# 回滚
ssh user@server "ln -sfn /var/www/html/my-app/build-<previous_commit> /var/www/html/my-app/current"

4. 跨技术栈统一模板

使用条件执行区分前端/后端：

arduino 复制代码

if: contains(matrix.stack, 'frontend')

Docker 化部署保证跨系统一致性
模板化可复用，提高大型团队效率

六、总结

本文展示了多技术栈项目从本地开发到自动化部署的完整 CI/CD 流程：

Git 仓库初始化与 Secrets 配置
本地构建与手动部署演示
GitHub Actions Workflow 自动化部署
自动化测试、环境区分与版本回滚
跨技术栈模板化及拓展实践

通过完整命令、配置和示例，读者可从头到尾实操，同时理解如何在项目中灵活优化和扩展 CI/CD 流程。