GitHub Copilot を活用した GitHub CI/CD 基礎

Appearance

1. 教材を準備する ​

概要 ​

配布された ZIP を展開し、依存関係、テスト、ビルドを確認します。

手順 ​

1. ZIP を展開する ​

スターター ZIP をダウンロードし、任意の作業フォルダーへ展開します。展開すると、すべての教材を含む github-cicd-starter フォルダーが1つ作成されます。

注意

展開後の github-cicd-starter フォルダーを、既存プロジェクトへ上書きしないでください。

2. ツールを確認する ​

展開したフォルダーを Visual Studio Code で開き、必要なツールの導入状況とバージョンが要件を満たすか確認します。

Agent モードで以下の指示を与えます。

text
まず環境を変更せず、OS、利用中のシェル、Node.js、npm、Git のバージョンを確認してください。
Node.js が 20.19 以上または 22.12 以上（推奨は 22 LTS）かを判定し、実行したコマンドと結果を要約してください。
askQuestions で明示的な承認を得るまで、インストールやバージョン切り替えは行わないでください。ツールが未導入の場合は無断で導入せず、公式手順を案内してください。承認後に切り替えた場合はターミナルを開き直してバージョンを再確認してください。

次を確認します。

  • OS、シェル、Node.js、npm、Git のバージョンが報告されている
  • Node.js が要件を満たすか判定されている
  • インストールやバージョン切り替えは、明示的に承認するまで実行されていない
  • 切り替えた場合は、ターミナルを開き直した後のバージョンが報告されている

Node.js を切り替える場合

Node.js 22 LTS が未導入の場合は、Microsoft Learn の Windows で Node.js を始めるを参照し、Windows へ直接インストールする方法または WSL へインストールする方法を選びます。本ハンズオンの Windows 環境で nvm-windows を使用する場合は、nvm install 22.12.0、nvm use 22.12.0 の順に実行します。切り替え後はターミナルを開き直し、node --version を再確認してください。

3. GitHub の操作方法を選ぶ ​

利用環境に合う GitHub の操作方法を選び、以降の演習で GitHub へ接続できる状態にします。

Agent モードで以下の指示を与えます。

text
OS と利用中のシェルを確認してから、GitHub CLI の導入状況とバージョンを読み取り専用で確認してください。
未導入の場合は、OS に合う公式手順を示してください。Windows で winget が利用できる場合も、インストール対象が GitHub CLI（GitHub.cli）であることと影響を説明し、askQuestions で明示的な承認を得るまでインストールしないでください。
認証やリポジトリへの変更は行わず、確認結果と次の手順を要約してください。

次を確認します。

  • GitHub CLI の導入状況とバージョンが報告されている
  • 未導入の場合は、OS に合う公式手順が示されている
  • インストールは、対象と影響を確認して明示的に承認するまで実行されていない
  • 認証やリポジトリの状態が変更されていない

4. スターターを検証する ​

依存関係のインストール、テスト、ビルドを順に実行し、スターターが正常に動作することを確認します。

Agent モードで以下の指示を与えます。

text
このスターターで、lock file に従う npm ci、Vitest の npm test、Vite の npm run build を順に実行してください。
事前に package.json と Node.js のバージョンを確認し、依存関係のインストール先がこのワークスペースであることを確認してください。
各コマンドの成否を確認し、テスト件数、ビルド結果、dist/index.html と dist/assets/ の有無を要約してください。失敗した場合は勝手に設定やコードを変更せず、原因候補を報告してください。

次の結果を確認します。

  • Vitest の3件のテストが成功する
  • Vite のビルドが成功する
  • dist/ に index.html と assets/ が作成される

5. アプリを表示する ​

開発サーバーを起動し、ブラウザーからスターターのイベント一覧を表示できることを確認します。

Agent モードで以下の指示を与えます。

text
package.json を確認して Vite の開発サーバーを起動し、表示されたローカル URL と起動成功を確認してください。
長時間動作するプロセスであることを明示し、確認後に Ctrl+C で終了する方法を案内してください。
ポート競合などで起動できない場合はエラーを要約し、代替ポートの候補を示してください。ファイルや設定は変更しないでください。

次を確認します。

  • Vite の開発サーバーが起動し、ローカル URL が報告されている
  • 長時間動作するプロセスであることと、Ctrl+C で終了する方法が示されている
  • 起動に失敗した場合は、ファイルや設定を変更せず原因と代替ポートが示されている

表示されたローカル URL をブラウザーで開き、イベント一覧と残席数を確認します。終了するときは Ctrl+C を押します。

トラブルシューティング ​

  • npm ci が失敗する: npm registry への接続とプロキシ設定を確認します
  • Node.js の要件エラー: Node.js 20.19 以上または 22.12 以上へ切り替えます。推奨環境は Node.js 22 LTS です
  • ポートが使用中: npm run dev -- --port 5174 のように別ポートを指定します

確認事項 ​

  • Node.js、npm、Git、選択した GitHub の操作方法を利用できる
  • npm ci による依存関係のインストールが成功している
  • Vitest の3件のテストが成功している
  • Vite のビルドが成功し、dist/index.html と dist/assets/ が生成されている
  • 開発サーバーのローカル URL でイベント一覧と残席数を表示できる

まとめ ​

スターターのテストとビルドが成功しました。次は、自分が操作できる GitHub リポジトリを作成します。