Phase 6: CI/CD の更新 - Monorepo 移行対応

[takaokouji]

概要

Monorepo 移行（smalruby3-gui/scratch-vm → smalruby3-editor）に伴い、smalruby3-editor リポジトリの CI/CD ワークフローを更新します。

関連 Issue: #29 (Phase 6)

統合先

smalruby3-editor リポジトリ (NOT smalruby3-develop)

既存の gui/smalruby3-editor/.github/workflows/ を修正して CI/CD を実現します。

現状分析

smalruby3-editor の現在の CI/CD 構成

.github/workflows/ci.yml

• build ジョブ:
  • パッケージのビルド
  • アーティファクト保存
• test ジョブ (マトリックス戦略):
  • 各パッケージごとにテスト実行
• preview ジョブ:
  • GitHub Pages へのプレビューデプロイ（ブランチ別）

その他のワークフロー

• commitlint.yml - commit message チェック ✅ 維持
• gha-debug.yml - デバッグ情報 ✅ 維持
• publish.yml - npm publish ❌ 削除予定
• update-i18n.yml - i18n 更新 ❌ 削除予定
• signature-assistant.yml - CLA アシスタント ❌ 削除予定
• ghpages-cleanup.yml - GitHub Pages クリーンアップ ❌ 削除予定

smalruby3-gui の CI/CD 構成（参考）

.github/workflows/ci-cd.yml

• test ジョブ (Pull request のみ):
  • npm run setup-scratch-vm
  • npm run test:lint
  • npm run test:unit
• build-and-deploy ジョブ:
  • npm run setup-scratch-vm
  • npm run build
  • npm run test:integration
  • GitHub Pages デプロイ（3パターン）

移行後の CI/CD 要件

基本方針

ワークフロー構造を smalruby3-gui に倣う:

1. ✅ Job 1: test - lint + unit test（全パッケージ）
2. ✅ Job 2: build-and-deploy - build + integration test + deploy

段階的アプローチ:

• ✅ Phase 1: Job 1 (lint + unit test) をパスさせる ← まずここから
• ✅ Phase 2: Job 2 (build + integration test + deploy) を実装

デプロイ先:

• ✅ https://smalruby-jp.github.io/smalruby3-editor/ (smalruby3-editor リポジトリの GitHub Pages)
• ✅ https://smalruby.app/ (production)

不要なワークフローを削除:

• ❌ publish.yml - npm publish（必要になったら復元）
• ❌ update-i18n.yml - i18n 更新（必要になったら復元）
• ❌ signature-assistant.yml - CLA アシスタント（必要になったら復元）
• ❌ ghpages-cleanup.yml - GitHub Pages クリーンアップ（必要になったら復元）

対象パッケージ

lint + unit test を実行するパッケージ:

• task-herder
• scratch-svg-renderer
• scratch-render
• scratch-vm
• scratch-gui

integration test を実行するパッケージ:

• scratch-vm
• scratch-gui

実装タスク

Phase 1: test ジョブの実装（最優先）

6.1.1. test ジョブの作成

• .github/workflows/ci-cd.yml の作成
  • test ジョブの実装
    • トリガー: Pull request のみ（develop/main/master への直接プッシュは除外）
    • Node.js セットアップ (.nvmrc 参照)
    • 依存パッケージのインストール
    • 全パッケージの lint 実行
      • npm run lint:gui (scratch-gui)
      • npm run lint:vm (scratch-vm)
      • 他のパッケージの lint（必要に応じて）
    • 全パッケージの unit test 実行
      • npm run test:unit:gui (scratch-gui)
      • npm run test:unit:vm (scratch-vm)
      • 他のパッケージの unit test（必要に応じて）
    • テスト結果のアーティファクト保存

6.1.2. package.json の確認

• 各パッケージの scripts 確認

  • packages/task-herder/package.json - lint, test:unit スクリプト
  • packages/scratch-svg-renderer/package.json - lint, test:unit スクリプト
  • packages/scratch-render/package.json - lint, test:unit スクリプト
  • packages/scratch-vm/package.json - lint, test:unit スクリプト
  • packages/scratch-gui/package.json - test:lint, test:unit スクリプト

• ルート package.json の scripts 更新（必要に応じて）

  • lint スクリプトで全パッケージの lint を実行
  • test:unit スクリプトで全パッケージの unit test を実行

6.1.3. テストの動作確認

• ローカルでのテスト実行確認

  • npm run lint が成功すること
  • npm run test:unit が成功すること

• Pull request でのテスト実行確認

  • test ジョブが実行されること
  • lint が成功すること
  • unit test が成功すること

Phase 2: build-and-deploy ジョブの実装

6.2.1. build-and-deploy ジョブの作成

• build-and-deploy ジョブの実装
  • トリガー: すべてのイベント
  • Node.js セットアップ
  • 依存パッケージのインストール
  • ビルド
    • npm run build (全パッケージ)
  • integration test
    • npm run test:integration:gui (scratch-gui)
    • npm run test:integration:vm (scratch-vm)
  • ビルド成果物のアーティファクト保存
  • GitHub Pages デプロイ（条件付き）

6.2.2. デプロイワークフローの実装

• smalruby3-editor リポジトリへのデプロイ

  • 対象: develop/main/master ブランチ
  • デプロイ先: https://smalruby-jp.github.io/smalruby3-editor/
  • peaceiris/actions-gh-pages@v4 アクション使用
  • publish_dir: ./packages/scratch-gui/build

• smalruby.app へのデプロイ

  • 対象: develop/main/master ブランチ
  • デプロイ先: https://smalruby.app/
  • 環境変数の設定:
    • GOOGLE_CLIENT_ID
    • GOOGLE_API_KEY
    • MESH_GRAPHQL_ENDPOINT
    • MESH_API_KEY
    • MESH_AWS_REGION
  • デプロイキー: SMALRUBY_APP_DEPLOY_KEY
  • peaceiris/actions-gh-pages@v4 アクション使用
  • CNAME 設定 (smalruby.app)
  • .nojekyll ファイル作成
  • external_repository: smalruby/smalruby.app

6.2.3. ビルドプロセスの確認

• ビルド成果物のパス確認

  • packages/scratch-gui/build/ ディレクトリ
  • デプロイ対象ファイルの確認

• 環境変数の設定確認

  • GitHub Secrets の設定
  • ビルド時の環境変数適用

6.2.4. integration test の動作確認

• ローカルでの integration test 実行確認

  • npm run test:integration:gui が成功すること
  • npm run test:integration:vm が成功すること

• CI での integration test 実行確認

  • integration test が成功すること
  • Chrome/Chromium のセットアップが正しいこと

6.2.5. デプロイの動作確認

• develop ブランチへのマージでの確認

  • ビルドが成功すること
  • integration test が成功すること
  • smalruby3-editor リポジトリへのデプロイが成功すること
  • smalruby.app へのデプロイが成功すること

• デプロイ後の動作確認

  • https://smalruby-jp.github.io/smalruby3-editor/ でアプリが正常に動作すること
  • https://smalruby.app/ でアプリが正常に動作すること
  • すべてのリソースが正しく読み込まれること

6.3. 不要なワークフローの削除

• ワークフローファイルの削除

  • gui/smalruby3-editor/.github/workflows/publish.yml 削除
  • gui/smalruby3-editor/.github/workflows/update-i18n.yml 削除
  • gui/smalruby3-editor/.github/workflows/signature-assistant.yml 削除
  • gui/smalruby3-editor/.github/workflows/ghpages-cleanup.yml 削除

• 削除の確認

  • GitHub Actions でワークフローが表示されないこと
  • 必要に応じて後で復元できること（Git履歴に残っている）

6.4. commitlint.yml の維持

• commitlint.yml の動作確認
  • Pull request で commit message チェックが実行されること
  • 既存の設定がそのまま動作すること

6.5. gha-debug.yml の維持

• gha-debug.yml の動作確認
  • デバッグ情報が正しく出力されること
  • 必要に応じて設定を更新

技術的詳細

ディレクトリ構造

smalruby3-develop/
└── gui/
    └── smalruby3-editor/
        ├── .github/
        │   └── workflows/
        │       ├── ci-cd.yml          # 新規作成（ci.ymlを置き換え）
        │       ├── commitlint.yml     # 維持
        │       └── gha-debug.yml      # 維持
        └── packages/
            ├── task-herder/
            ├── scratch-svg-renderer/
            ├── scratch-render/
            ├── scratch-vm/
            └── scratch-gui/

ワークフロー実行フロー（Phase 1）

graph TD
    A[Pull Request] --> B{test ジョブ}
    B --> C[npm ci]
    C --> D[Lint 全パッケージ]
    D --> E[Unit tests 全パッケージ]
    E --> F[テスト結果保存]

Loading

ワークフロー実行フロー（Phase 2）

graph TD
    A[Push/PR] --> B{test ジョブ}
    B --> C[Lint + Unit tests]

    A --> H{build-and-deploy ジョブ}
    H --> I[npm ci]
    I --> J[Build 全パッケージ]
    J --> K[Integration tests]
    K --> L{develop/main/master?}
    L -->|Yes| M[Deploy to smalruby3-editor GH Pages]
    L -->|Yes| N[Deploy to smalruby.app]
    L -->|No| O[End]

Loading

環境変数

GitHub Secrets (必要)

• SMALRUBY_APP_DEPLOY_KEY: smalruby.app へのデプロイキー
• GOOGLE_CLIENT_ID: Google API クライアント ID
• GOOGLE_API_KEY: Google API キー
• MESH_GRAPHQL_ENDPOINT: Mesh GraphQL エンドポイント
• MESH_API_KEY: Mesh API キー
• MESH_AWS_REGION: Mesh AWS リージョン

ワークフロー内環境変数

• NODE_OPTIONS: --max-old-space-size=4000
• NODE_ENV: production (ビルド時)
• DETECT_CHROMEDRIVER_VERSION: "true" (integration test 時)

package.json scripts（ルート）

現在の scripts:

{
  "build": "npm run build:vm && npm run build:gui",
  "lint": "npm run lint:gui && npm run lint:vm",
  "test": "npm run test:unit && npm run test:integration",
  "test:unit": "npm run test:unit:gui && npm run test:unit:vm",
  "test:integration": "npm run test:integration:gui && npm run test:integration:vm"
}

必要に応じて追加・修正:

• 全パッケージの lint を網羅
• 全パッケージの unit test を網羅

デプロイアクション設定（Phase 2）

smalruby3-editor リポジトリへのデプロイ

- name: Deploy to smalruby3-editor GitHub Pages
  uses: peaceiris/actions-gh-pages@v4
  if: github.ref == 'refs/heads/develop' || github.ref == 'refs/heads/master' || github.ref == 'refs/heads/main'
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./packages/scratch-gui/build
    full_commit_message: "Build for ${{ github.sha }} ${{ github.event.head_commit.message }}"

smalruby.app へのデプロイ

- name: Deploy to smalruby.app
  uses: peaceiris/actions-gh-pages@v4
  if: github.ref == 'refs/heads/develop' || github.ref == 'refs/heads/master' || github.ref == 'refs/heads/main'
  with:
    deploy_key: ${{ secrets.SMALRUBY_APP_DEPLOY_KEY }}
    publish_dir: ./packages/scratch-gui/build
    full_commit_message: "Build for ${{ github.sha }} ${{ github.event.head_commit.message }}"
    cname: smalruby.app
    external_repository: smalruby/smalruby.app

テスト計画

Phase 1 のテスト

• ローカルでのテスト

  • npm run lint が成功
  • npm run test:unit が成功

• Pull request でのテスト

  • test ジョブが実行される
  • lint が成功
  • unit test が成功
  • テスト結果がアーティファクトとして保存される

Phase 2 のテスト

• ローカルでのテスト

  • npm run build が成功
  • npm run test:integration が成功

• CI でのテスト

  • build-and-deploy ジョブが実行される
  • ビルドが成功
  • integration test が成功

• デプロイのテスト

  • develop ブランチへのマージで両方のデプロイが実行される
  • smalruby3-editor GH Pages にデプロイされる
  • smalruby.app にデプロイされる

• デプロイ後の動作確認

  • https://smalruby-jp.github.io/smalruby3-editor/ が正常に動作
  • https://smalruby.app/ が正常に動作

移行チェックリスト

Phase 1

• 既存ワークフローの分析完了
• test ジョブの設計完了
• .github/workflows/ci-cd.yml 作成（test ジョブのみ）
• package.json の scripts 確認・更新
• ローカルでの lint + unit test 成功
• Pull request での test ジョブ成功

Phase 2

• build-and-deploy ジョブの設計完了
• .github/workflows/ci-cd.yml 更新（build-and-deploy ジョブ追加）
• デプロイ設定の追加
• 環境変数の設定確認
• ローカルでの build + integration test 成功
• develop ブランチでのデプロイ成功
• 両方のデプロイ先で動作確認

Phase 3

• 不要なワークフローの削除
• commitlint.yml の動作確認
• gha-debug.yml の動作確認
• 旧 ci.yml の削除
• すべての CI/CD が正常に動作

参考資料

現在のワークフローファイル（smalruby3-editor）

• gui/smalruby3-editor/.github/workflows/ci.yml - 現在の CI
• gui/smalruby3-editor/.github/workflows/commitlint.yml - commitlint
• gui/smalruby3-editor/.github/workflows/gha-debug.yml - デバッグ
• gui/smalruby3-editor/.github/path-filters.yml - パスフィルター

参考ワークフローファイル（smalruby3-gui）

• gui/smalruby3-gui/.github/workflows/ci-cd.yml - smalruby3-gui の CI/CD
• gui/smalruby3-gui/.github/workflows/commitlint.yml - commitlint

package.json

• gui/smalruby3-editor/package.json - ルート package.json
• gui/smalruby3-editor/packages/*/package.json - 各パッケージの package.json

ビルドスクリプト

• gui/smalruby3-gui/scripts/postbuild.mjs - ビルド後処理（PUBLIC_PATH 対応）

完了条件

Phase 1

• Pull request で test ジョブが実行される
• 全パッケージの lint が成功
• 全パッケージの unit test が成功

Phase 2

• develop/main/master ブランチでビルドが成功
• integration test が成功
• smalruby3-editor GH Pages へのデプロイが成功
• smalruby.app へのデプロイが成功
• 両方のデプロイ先でアプリが正常に動作

Phase 3

• 不要なワークフローが削除されている
• commitlint.yml が正常に動作
• gha-debug.yml が正常に動作
• 旧 ci.yml が削除されている

推定工数

1-2日 (Phase 6 全体)

• Phase 1 (test ジョブ): 0.5日
  • ワークフロー作成: 0.25日
  • テスト・デバッグ: 0.25日
• Phase 2 (build-and-deploy ジョブ): 0.5-1日
  • ビルド・デプロイ設定: 0.25日
  • テスト・デバッグ: 0.25-0.5日
• Phase 3 (クリーンアップ): 0.25日
  • 不要ワークフロー削除: 0.1日
  • 最終確認: 0.15日