Skip to content

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

New issue
New issue
Closed
#41
Closed
Phase 6: CI/CD の更新 - Monorepo 移行対応#40
#41
@takaokouji

Description

@takaokouji
takaokouji
opened on Jan 25, 2026

概要

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日

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions