从零搭建remotely-save的CI/CD流程：GitHub Actions自动化部署详解-优快云博客

从零搭建remotely-save的CI/CD流程：GitHub Actions自动化部署详解

【免费下载链接】remotely-save remotely-save/remotely-save - 一个非官方的Obsidian同步插件，支持多种云服务，允许用户在本地和云端之间同步Obsidian知识库。项目地址: https://gitcode.com/gh_mirrors/re/remotely-save

你是否还在手动构建Obsidian插件？每次更新都要重复执行编译、打包、测试流程？本文将带你基于GitHub Actions构建remotely-save插件的全自动化CI/CD流水线，实现从代码提交到自动测试、构建、发布的完整闭环。读完本文你将掌握：

GitHub Actions工作流文件的核心配置方法
Obsidian插件的自动化测试与构建流程
基于环境变量的安全凭证管理方案
语义化版本控制与自动发布策略

1. CI/CD流程设计与环境准备

1.1 核心需求分析

remotely-save作为Obsidian的同步插件，其CI/CD流程需要满足以下关键需求：

mermaid

1.2 技术栈选型

根据项目package.json分析，当前构建工具链为：

工具	作用	关键命令
TypeScript	类型检查	`tsc -noEmit`
Webpack	模块打包	`npm run build`
Mocha	单元测试	`npm test`
Biome	代码格式化	`npm run format`

2. GitHub Actions工作流配置详解

2.1 基础工作流结构

创建文件.github/workflows/ci-cd.yml，基础结构如下：

name: remotely-save CI/CD Pipeline

on:
  push:
    branches: [main]
    tags: ["*"]  # 匹配所有标签，用于版本发布
  pull_request:
    branches: [main]

jobs:
  quality:  # 代码质量检查
  build:    # 构建作业
  release:  # 发布作业

2.2 代码质量检查作业

quality:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: "20.x"
        cache: "npm"  # 缓存npm依赖
        
    - name: Install dependencies
      run: npm ci  # 严格安装package-lock.json版本
      
    - name: Type check
      run: tsc -noEmit -skipLibCheck  # 仅类型检查不生成文件
      
    - name: Code formatting
      run: npm run format  # 执行biome格式化检查
      
    - name: Unit tests
      run: npm test  # 执行mocha测试套件

2.3 构建作业配置

build:
  needs: quality  # 依赖quality作业成功完成
  runs-on: ubuntu-latest
  if: github.event_name == 'push' || github.event.pull_request.merged == true
  steps:
    - uses: actions/checkout@v4
      with:
        lfs: true  # 启用Git LFS支持
        
    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: "20.x"
        cache: "npm"
        
    - name: Install dependencies
      run: npm ci
      
    - name: Build production assets
      run: npm run build
      env:  # 构建环境变量
        NODE_ENV: production
        # 云服务API凭证通过GitHub Secrets注入
        DROPBOX_APP_KEY: ${{ secrets.DROPBOX_APP_KEY }}
        ONEDRIVE_CLIENT_ID: ${{ secrets.ONEDRIVE_CLIENT_ID }}
        
    - name: Upload build artifacts
      uses: actions/upload-artifact@v3
      with:
        name: plugin-assets
        path: |
          main.js
          manifest.json
          styles.css

2.4 自动发布作业

release:
  needs: build
  runs-on: ubuntu-latest
  if: startsWith(github.ref, 'refs/tags/')  # 仅在标签推送时触发
  steps:
    - uses: actions/download-artifact@v3
      with:
        name: plugin-assets
        
    - name: Create GitHub Release
      uses: softprops/action-gh-release@v2
      with:
        files: |
          main.js
          manifest.json
          styles.css
        body_path: CHANGELOG.md  # 从变更日志生成发布说明
        draft: false
        prerelease: false
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

3. 环境变量与安全管理

3.1 敏感凭证处理

项目release.yml中使用了11种云服务凭证，通过GitHub Secrets安全管理：

mermaid

3.2 环境变量注入策略

修改esbuild.config.mjs或webpack.config.js，添加环境变量注入：

// webpack.config.js示例
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.DROPBOX_APP_KEY': JSON.stringify(process.env.DROPBOX_APP_KEY || ''),
      // 其他环境变量...
    })
  ]
};

4. 高级优化与最佳实践

4.1 缓存策略优化

为加速构建流程，配置多级别缓存：

- name: Cache node_modules
  uses: actions/cache@v4
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    
- name: Cache LFS objects
  uses: actions/cache@v4
  with:
    path: .git/lfs/objects
    key: ${{ runner.os }}-lfs-${{ hashFiles('.lfs-assets-id') }}

4.2 版本管理自动化

实现基于标签的语义化版本管理：

# package.json scripts添加
"bump:patch": "npm version patch -m 'chore: bump version to %s'",
"bump:minor": "npm version minor -m 'chore: bump version to %s'",
"bump:major": "npm version major -m 'chore: bump version to %s'"

配合提交信息验证：

- name: Validate commit messages
  if: github.event_name == 'pull_request'
  run: |
    git log --pretty=format:"%s" ${{ github.event.pull_request.base.sha }}..${{ github.event.pull_request.head.sha }} | \
    grep -E '^(feat|fix|docs|style|refactor|test|chore): ' || {
      echo "ERROR: Commit messages must follow Conventional Commits format"
      exit 1
    }

4.3 多环境部署策略

jobs:
  build:
    strategy:
      matrix:
        environment: [development, production]
        include:
          - environment: development
            build-command: npm run dev
            artifact-name: dev-build
          - environment: production
            build-command: npm run build
            artifact-name: prod-build
    steps:
      - name: Build ${{ matrix.environment }}
        run: ${{ matrix.build-command }}

5. 完整工作流文件

以下是完整的.github/workflows/ci-cd.yml配置：

name: remotely-save CI/CD Pipeline

on:
  push:
    branches: [main]
    tags: ["*"]
  pull_request:
    branches: [main]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20.x"
          cache: "npm"
          
      - name: Install dependencies
        run: npm ci
      
      - name: Type check
        run: tsc -noEmit -skipLibCheck
      
      - name: Code formatting
        run: npm run format
      
      - name: Unit tests
        run: npm test

  build:
    needs: quality
    runs-on: ubuntu-latest
    if: github.event_name == 'push' || github.event.pull_request.merged == true
    steps:
      - uses: actions/checkout@v4
        with:
          lfs: true
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20.x"
          cache: "npm"
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
        env:
          DROPBOX_APP_KEY: ${{ secrets.DROPBOX_APP_KEY }}
          ONEDRIVE_CLIENT_ID: ${{ secrets.ONEDRIVE_CLIENT_ID }}
          ONEDRIVE_AUTHORITY: ${{ secrets.ONEDRIVE_AUTHORITY }}
          GOOGLEDRIVE_CLIENT_ID: ${{ secrets.GOOGLEDRIVE_CLIENT_ID }}
      
      - name: Upload artifacts
        uses: actions/upload-artifact@v3
        with:
          name: plugin-assets
          path: |
            main.js
            manifest.json
            styles.css

  release:
    needs: build
    runs-on: ubuntu-latest
    if: startsWith(github.ref, 'refs/tags/')
    steps:
      - uses: actions/download-artifact@v3
        with:
          name: plugin-assets
      
      - name: Create Release
        uses: softprops/action-gh-release@v2
        with:
          files: |
            main.js
            manifest.json
            styles.css
          token: ${{ secrets.GITHUB_TOKEN }}
          make_latest: true

6. 部署与验证

6.1 首次部署步骤

将上述配置文件提交到仓库
在GitHub仓库设置中添加所需Secrets

推送测试提交验证CI流程：

git add .github/workflows/ci-cd.yml
git commit -m "feat: add CI/CD workflow"
git push origin main

6.2 版本发布流程

# 1. 更新版本号
npm version patch  # 或 minor/major

# 2. 推送标签触发发布
git push --tags

6.3 关键检查点

检查项	验证方法	预期结果
类型检查	查看GitHub Actions日志	无类型错误输出
测试覆盖率	检查测试步骤输出	所有测试通过
构建产物	查看发布页面资产	main.js等文件存在

7. 总结与扩展方向

本文构建的CI/CD流程已实现remotely-save插件的自动化测试、构建和发布。未来可进一步扩展：

多平台构建：添加Windows和macOS构建环境
自动化版本号：集成semantic-release实现智能版本管理
发布通知：添加Discord/Slack通知webhook
夜间构建：定期执行完整测试矩阵
依赖更新：集成Dependabot自动更新依赖

通过这套自动化流程，团队可以将精力集中在功能开发上，大幅减少手动操作成本和人为错误，同时确保每次发布的代码质量和安全性。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考