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 テンプレートに含まれるスターターファイルを確認できます。

GitHub の左上隅にあるを選択し、 コードスペース をクリックして、github.com/codespaces のページに移動します。
テンプレートの完全な一覧を表示するには、[クイックスタートテンプレートの探索] セクションで [すべて表示] をクリックします。
テンプレート用のファイルが含まれるテンプレートリポジトリを表示するには、テンプレートの名前をクリックします。

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

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

Note

ユーザーがテンプレートリポジトリで [このテンプレートを使用] ボタンから codespace を作成する場合、構成を選ぶことはできません。 codespace は、リポジトリのルートにある .devcontainer/devcontainer.json または .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 サイトの開発コンテナーの仕様をご覧ください。

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

この記事の内容

はじめに

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

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

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

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

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