GitHub Codespaces 用のテンプレート リポジトリを設定する

はじめに

テンプレート リポジトリを設定することで、ユーザーが GitHub Codespaces でフレームワーク、ライブラリ、またはその他のプロジェクトを開始するのを手助けできます。 ユーザーは、クラウドベースの開発環境でテンプレート ファイルの操作をすぐに開始でき、リポジトリの複製や、ツールなどの依存関係のインストールについて気にする必要がありません。 一部の構成で、重要なファイルが既に編集用に開かれ、VS Code Web エディター内のプレビュー ブラウザー タブでアプリケーションが既に実行されている codespace でユーザーを設定できるようになります。

テンプレート リポジトリへの読み取りアクセス権があればだれでも、GitHub のリポジトリのページから codespace を作成できます。 既存のリポジトリをテンプレートに変換でき、ユーザーがテンプレート リポジトリから codespace を作成できるように設定を変更する必要はありません。 リポジトリをテンプレートに変換する方法について詳しくは、「テンプレートリポジトリを作成する」をご覧ください。

ユーザーがすぐにテンプレートを見つけて作業を始めることができるように、テンプレートの codespace 作成ページへのリンクを共有できます。 たとえば、フレームワークの使用を開始するためのチュートリアル内で、このリンクを提供できます。 [ディープ リンクの共有] オプションを使って [クイック スタート] を選ぶと、すばやく新しい codespace を作成するか最近使った codespace を再開するページにユーザーが移動できるリンクを作成できます。 詳しくは、「codespace の迅速な作成と再開を容易にする」をご覧ください。

他のユーザーがテンプレートから codespace を作成すると、テンプレート リポジトリの内容がユーザーの codespace に複製されます。 ユーザーの準備ができたら、GitHub 上で、その個人アカウントに属する新しいリポジトリに作業内容を公開できるようになります。 詳しくは、「テンプレートから codespace を作成する」をご覧ください。

組織は、組織のメンバーと外部コラボレーターによる GitHub Codespaces の使用を、組織の費用で支払うことができます。 これには、組織が所有するテンプレート リポジトリから作成された codespace が含まれます。 ただし、ユーザーがテンプレートから作成された codespace を自分の個人用アカウントに発行した場合、codespace の所有権と請求先は codespace を作成したユーザーに移動されます。 詳しくは、「GitHub Codespaces の請求について」をご覧ください。

テンプレートについて説明する

テンプレート リポジトリ用の README がない場合は作成して、テンプレートの目的と使用開始方法について説明します。 詳しくは、「READMEについて」をご覧ください。

リポジトリのページに移動して、ページの右側の [情報] セクションの横にある をクリックすると、project の簡単な説明を指定することもできます。

スターター ファイルを追加する

ユーザーがライブラリ、フレームワーク、またはその他のテクノロジをすぐに使い始めることができるように、通常は、定型コードを含むスターター ファイルがテンプレート リポジトリに用意されています。

含めるファイルの種類に関するガイダンスについては、次のように、GitHub Codespaces の公式 GitHub テンプレートに含まれるスターター ファイルを確認できます。

1. GitHub の左上隅にある を選択し、 コードスペース をクリックして、github.com/codespaces のページに移動します。

2. テンプレートの完全な一覧を表示するには、[クイック スタート テンプレートの探索] セクションで [すべて表示] をクリックします。

   

3. テンプレート用のファイルが含まれるテンプレート リポジトリを表示するには、テンプレートの名前をクリックします。

   

開発コンテナーを構成する

開発コンテナー構成ファイルをテンプレート リポジトリに追加して、GitHub Codespaces でテンプレートを使うユーザーの開発環境をカスタマイズできます。 Visual Studio Code で定義済みの構成設定の一覧から選ぶか、独自の devcontainer.json ファイルを記述してカスタム構成を作成できます。 構成ファイルを追加しない場合は、既定のコンテナー イメージが使用されます。 詳細については、「開発コンテナーの概要」および「開発コンテナー構成のリポジトリへの追加」を参照してください。

テンプレートを使ってユーザーに最適なエクスペリエンスを提供するには、ツールとカスタマイズを使って開発コンテナーを構成する必要があります。 たとえば、devcontainer.json ファイル内で、次のようにします。

• openFiles プロパティを使って、テンプレートから codespace を作成するときに VS Code Web クライアントで自動的に開くファイルの一覧を定義できます。
• ユーザーが、テンプレートでアプリケーションを実行するための API キーなど、個人のシークレットを指定する必要がある場合は、シークレットの指定を求めることができます。 詳しくは、「リポジトリに推奨シークレットを指定する」をご覧ください。
• テンプレートに Web アプリケーションのファイルを含めると、アプリケーションが、ユーザーの codespace で自動的に実行されるようにできます。 これを行うには、postAttachCommand プロパティを使って、VS Code Web クライアントが codespace に接続するとすぐにローカル サーバーでアプリケーションを起動するスクリプトを実行し、ポートの onAutoForward プロパティを openPreview に設定して、VS Code Web クライアントに埋め込まれたシンプルなブラウザー内に、そのポートで実行されているアプリケーションを表示します。

React テンプレートの次の構成設定によって、ユーザーのエディターで app.js ファイルが開き、npm start (package.json ファイルで定義) を実行してローカル サーバーを起動し、codespace のプレビュー ブラウザー タブにポート 3000 を転送します。

{
    "postAttachCommand": {
      "server": "npm start"
    },

    "portsAttributes": {
      "3000": {
        "label": "Application",
        "onAutoForward": "openPreview"
      }
    },

    "customizations": {
      "codespaces": {
        "openFiles": ["src/App.js"]
      }
    }
}

詳しくは、「リポジトリの codespace にあるファイルを自動的に開く」と、開発コンテナーの Web サイトの開発コンテナーの仕様をご覧ください。