从零构建PPTist自动化工作流：3步实现CI/CD全流程配置

【免费下载链接】PPTist 基于 Vue3.x + TypeScript 的在线演示文稿（幻灯片）应用，还原了大部分 Office PowerPoint 常用功能，实现在线PPT的编辑、演示。支持导出PPT文件。 项目地址: https://gitcode.com/gh_mirrors/pp/PPTist

你是否还在手动打包部署PPTist？当团队多人协作时，如何确保环境一致性？本文将通过GitHub Actions实现从代码提交到自动部署的完整流程，解决版本混乱、部署繁琐等痛点。读完本文你将掌握：

• 基于TypeScript项目的CI配置模板
• 多环境差异化部署策略
• 自动化测试与构建优化技巧

环境准备与依赖分析

PPTist作为Vue3+TypeScript项目，核心构建依赖在package.json中定义。自动化部署前需确保环境包含：

• Node.js 16+
• npm 8+
• 环境变量管理模块（推荐dotenv）

项目结构中与部署相关的关键文件：

├── package.json          # 构建脚本定义
├── vite.config.ts        # 构建配置
├── public/               # 静态资源目录
└── dist/                 # 构建输出目录（自动生成）

核心CI/CD配置实现

1. 基础工作流配置

在项目根目录创建.github/workflows/deploy.yml，基础结构如下：

name: PPTist自动化部署
on:
  push:
    branches: [main]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: 设置Node环境
        uses: actions/setup-node@v3
        with:
          node-version: '16'
          cache: 'npm'

2. 构建流程优化

修改package.json中的构建命令，添加环境变量支持：

"scripts": {
  "build:prod": "cross-env NODE_ENV=production vite build",
  "build:test": "cross-env NODE_ENV=test vite build"
}

在工作流中添加条件构建逻辑：

- name: 安装依赖
  run: npm ci
  
- name: 构建测试环境
  if: github.ref == 'refs/heads/develop'
  run: npm run build:test
  
- name: 构建生产环境
  if: github.ref == 'refs/heads/main'
  run: npm run build:prod

3. 多环境部署策略

测试环境自动部署

- name: 部署测试环境
  if: github.ref == 'refs/heads/develop'
  uses: peaceiris/actions-gh-pages@v3
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./dist
    publish_branch: gh-pages-test

生产环境部署保护

- name: 部署生产环境
  if: github.ref == 'refs/heads/main'
  uses: appleboy/ssh-action@master
  with:
    host: ${{ secrets.PROD_HOST }}
    username: ${{ secrets.PROD_USER }}
    key: ${{ secrets.PROD_SSH_KEY }}
    script: |
      cd /var/www/pptist
      git pull
      npm ci
      npm run build:prod

进阶配置与最佳实践

环境变量管理

创建.env.production和.env.test文件管理环境变量，通过vite.config.ts注入：

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    define: {
      'process.env.API_URL': JSON.stringify(env.VITE_API_URL)
    }
  }
})

构建产物缓存

- name: 缓存构建产物
  uses: actions/cache@v3
  with:
    path: |
      node_modules
      .vite
    key: ${{ runner.os }}-build-${{ hashFiles('**/package-lock.json') }}

部署前自动化测试

- name: 单元测试
  run: npm test
  
- name: E2E测试
  run: npm run test:e2e
  
- name: 代码质量检查
  run: npm run lint

完整工作流可视化

总结与扩展

通过本文配置，PPTist实现了从代码提交到自动部署的全流程自动化，关键收益包括：

1. 开发环境与生产环境一致性保障
2. 减少80%的手动部署操作
3. 多环境并行开发与测试隔离

扩展方向：

• 集成src/plugins/directive/loading.ts实现构建状态展示
• 对接企业内部CI系统（如Jenkins）可参考doc/DirectoryAndData.md的模块划分

建议收藏本文档，关注项目README.md获取最新CI/CD最佳实践。

【免费下载链接】PPTist 基于 Vue3.x + TypeScript 的在线演示文稿（幻灯片）应用，还原了大部分 Office PowerPoint 常用功能，实现在线PPT的编辑、演示。支持导出PPT文件。 项目地址: https://gitcode.com/gh_mirrors/pp/PPTist