GitHub Codespaces の詳細

GitHub Codespaces は、クラウドベースのインスタント開発環境であり、コンテナーを使用して開発用の共通言語、ツール、ユーティリティを提供します。 また、GitHub Codespaces は構成可能で、プロジェクトに合わせてカスタマイズされた開発環境を作成できます。 プロジェクト用のカスタム開発環境を構成することにより、プロジェクトのすべてのユーザーに対して繰り返し可能な codespace 構成を作成できます。

codespace を作成する

codespace を作成するためのエントリ ポイントは数多くあります。

• 新しいプロジェクトを開始する GitHub テンプレートまたは GitHub.com 上の任意のテンプレート リポジトリから
• 新機能の作業を行うリポジトリ内のブランチから
• 進行中の作業を探索するオープンの pull request から
• 特定の時点のバグを調査するリポジトリ内のコミットから

codespace は、GitHub.com、Visual Studio Code、または GitHub CLI を使用して作成できます。

何らかのテストを行う必要がある場合、または同じ codespace に戻って長期間の機能作業を行うことができる場合、codespace をエフェメラルにすることができます。

詳しくは、「リポジトリの codespace を作成する」、「テンプレートから codespace を作成する」、「既存の codespace を開く」をご覧ください。

codespace の作成プロセス

codespace を作成するときは、codespace を使用できるようになるまでにバックグラウンドでさまざまな手順が発生します。

手順 1: VM とストレージを codespace に割り当てる

コードスペースを作成すると、VM ホスト イメージの安定リリースまたはベータ リリースを使用して仮想マシン (VM) が作成されます。 詳しくは、「安定版またはベータ版のホスト イメージの選択」を参照してください。 ホスト イメージは、VM に使用される Linux のバージョンを定義します。 VM はユーザーに対して専用および個人用です。 専用の VM を使用すると、そのマシンから使用できるコンピューティング リソースのセット全体を確保できます。 必要に応じて、これにより、コンテナーへの完全なルート アクセス権を取得することもできます。

リポジトリの (または、テンプレートから codespace を作成する場合はテンプレート リポジトリの) シャロー クローンが作成されます。 これは VM の /workspaces のディレクトリに複製され、その後開発コンテナーにマウントされます。 詳しくは、以下の「codespace のディレクトリ構造について」をご覧ください。

手順 2: 開発コンテナーを作成する

GitHub Codespaces では、開発環境として Docker コンテナーが使用されます。 このコンテナーは、devcontainer.json ファイルおよび必要に応じて Dockerfile で定義できる構成に基づいて作成されます。 GitHub の空のテンプレートから、または devcontainer.json ファイルのないリポジトリから codespace を作成する場合、GitHub Codespaces で既定のイメージが使用されます。これには、使用可能な言語とランタイムが多数あります。 詳しくは、「開発コンテナーの概要」を参照してください。 既定の開発コンテナーのイメージの内容について詳しくは、devcontainers/images リポジトリを参照してください。

手順 3: codespace に接続する

コンテナーが作成され、その他の初期化が実行されると、codespace に接続されます。 次の方法で接続できます。

• Web ブラウザー
• Visual Studio Code
• JetBrains IDE
• GitHub CLI

手順 4: 作成後のセットアップ

codespace に接続された後、devcontainer.json ファイルで指定した構成に基づいて、自動セットアップが引き続きビルドされる場合があります。 postCreateCommandが表示され、postAttachCommand が実行される場合があります。

codespace で Git フックを使用する場合は、postCreateCommand などの devcontainer.json ライフサイクル スクリプトを使用してフックを設定します。 ライフサイクル スクリプトについて詳しくは、開発コンテナーの Web サイト上にある「開発コンテナー仕様」をご覧ください。

GitHub Codespaces のパブリックのドットファイル リポジトリがある場合、それを新しい codespace で使用できるように有効にすることができます。 有効にすると、ドットファイルがコンテナーに複製され、インストール スクリプトが呼び出されます。 詳しくは、「アカウントの GitHub Codespaces をパーソナライズする」を参照してください。

最後に、リポジトリから codespace を作成した場合、リポジトリの履歴全体が完全なクローンでコピーされます。 テンプレートから codespace を作成した場合、テンプレート リポジトリの完全な履歴は保持されません。代わりに、空白のテンプレートを使用するのでない限り、テンプレート リポジトリの内容に対する最初のコミットから始めます。

作成後のセットアップ中も、統合ターミナルを使用してファイルを編集できますが、作業と実行中のコマンドの間の競合状態を回避するように注意してください。

Codespaces のライフサイクル

ファイルを codespace に保存する

使用しているエディターに応じて、通常の方法でファイルに対する変更を保存します。

Visual Studio Code の codespaces で作業する場合は、自動保存を有効にして、変更が常に保存されるようにすることができます。

codespace の終了または停止

codespace は、使用している間は実行され続けますが、一定時間非アクティブになるとタイムアウトします。 エディターとターミナル出力からのファイルの変更はアクティビティとしてカウントされるため、ターミナル出力が継続されていれば codespace はタイムアウトしません。 既定の非アクティブ タイムアウト期間は 30 分です。 作成する codespace に対して個人用タイムアウト設定を定義できますが、これは組織のタイムアウト ポリシーによって却下される可能性があります。 詳しくは、「GitHub Codespaces のタイムアウト期間を設定する」を参照してください。

codespace がタイムアウトすると実行は停止しますが、ブラウザー タブから (ブラウザーで codespace を使用している場合)、VS Code 内から、または https://github.com/codespaces にある codespace の一覧から再起動できます。

次の方法で codespace を停止できます。

• ブラウザーで: https://github.com/codespaces にある codespace の一覧で、停止する codespace の右側にある省略記号 ( ... ) をクリックし、 [codespace の停止] をクリックします。
• VS Code では: Visual Studio Code Command Palette を開きます。 - たとえば、Ctrl+Shift+P (Windows/Linux)、 Shift+Command+P (Mac) 押下し、Codespaces: stop を入力した後、Enter を押下します。 詳しくは、「GitHub Codespaces で Visual Studio Code のコマンド パレットを使う」を参照してください。
• JetBrains クライアントで、GitHub Codespaces ツール ウィンドウの上部にある停止ボタンをクリックします。 詳しくは、「codespace の停止と開始」で [JetBrains IDEs] タブをご覧ください。
• ターミナル ウィンドウで: GitHub CLI コマンド gh codespace stop を使用します。 詳しくは、「GitHub CLI で GitHub Codespaces を使用する」を参照してください。

stop コマンドを実行せずに codespace を終了した (たとえばブラウザー タブを閉じる) 場合、または操作なしで codespace を実行したままにした場合、codespace とその実行中のプロセスは、非アクティブ タイムアウト期間中は続行されます。

codespace を終了または停止すると、codespace に再度接続するまで、コミットされていない変更はすべて保持されます。

アプリケーションの実行

ポート転送を使用すると、Codespaces 内で実行されている TCP ポートにアクセスできます。 たとえば、codespace 内のポート 4000 で Web アプリケーションを実行している場合、そのポートを自動的に転送して、ブラウザーからアプリケーションをアクセスできるようにします。

ポートの転送は、リモート マシンからアクセス可能にするポートを決定します。 ポートを転送しない場合でも、そのポートには、codespace 自体内で実行されている他のプロセスにアクセスできます。

GitHub Codespaces 内で実行されているアプリケーションでポートをコンソールに出力すると、GitHub Codespaces で localhost の URL パターンが検出され、ポートが自動的に転送されます。 ターミナルで URL をクリックするか、VS Code の右下隅にポップアップ表示される "トースト" 通知メッセージ内のリンクをクリックして、ブラウザーでポートを開くことができます。 GitHub Codespaces の既定では、HTTP を使用してポートが転送されます。 ポート フォワーディングについて詳しくは、「codespace でのポートの転送」をご覧ください。

ポートは自動的に転送できますが、インターネットからパブリックにアクセスすることはできません。 既定では、すべてのポートはプライベートですが、手動で、組織またはパブリックでポートを使用できるようにして、URL を使用してアクセスを共有できます。 詳しくは、「codespace でのポートの転送」を参照してください。

初めて codespace に入ったときにアプリケーションを実行すると、高速の内部開発ループを実現できます。 編集すると、変更は自動的に保存され、転送されたポートで使用できるようになります。 変更を表示するには、ブラウザーで実行中のアプリケーションのタブに戻って更新します。

変更のコミットとプッシュ

Git は既定で codespace にインストールされるため、既存の Git ワークフローに依存できます。 Git を codespace で操作するには、ターミナルを使うか、VS Code または JetBrains のソース管理機能を使います。

既存のリポジトリで作業している場合は、リポジトリ内のブランチ、コミット、または pull request から codespace を作成することも、アクティブな codespace 内から新しいまたは既存のブランチに切り替えることもできます。 GitHub Codespaces はエフェメラルになるように設計されているため、分離された環境として使用して、実験、チームメイトの pull request の確認、またはマージ競合の修正を行うことができます。

リポジトリへの読み取りアクセス権しかない場合、フォークできる間はリポジトリの codespace を作成できます。 codespace からコミットするか、新しいブランチをプッシュすると、GitHub Codespaces によってリポジトリのフォークが自動的に作成されるか、それともアップストリーム リポジトリ用のフォークが既にある場合は codespace が既存のフォークにリンクされます。

テンプレートから作成された codespace で作業している場合、Git は既定でインストールされますが、作業を永続化し、他のユーザーと共有するには、codespace をリモート リポジトリに発行する必要があります。 GitHub の空のテンプレートから開始する場合は、codespace 内でソース管理の使用を開始するには、まずワークスペースを Git リポジトリとして初期化 (たとえば「git init」と入力) する必要があります。

詳しくは、「Codespace でソースコントロールを使用する」を参照してください。

拡張機能またはプラグインを使用して codespace をカスタマイズする

codespace 内にプラグインと拡張機能を追加して、JetBrains と VS Code のエクスペリエンスをそれぞれカスタマイズできます。

VS Code 拡張機能

VS Code デスクトップ アプリケーションまたは Web クライアントの codespaces で作業している場合は、Visual Studio Code Marketplace から必要な拡張機能を追加できます。 拡張機能が GitHub Codespaces でどのように実行されるかについては、VS Code ドキュメントの「リモート開発と GitHub Codespaces のサポート」を参照してください。

既に VS Code を使っている場合は、[設定の同期] を使って、ローカル インスタンスと作成した codespace との間で拡張機能、設定、テーマ、キーボード ショートカットを自動的に同期できます。

JetBrains プラグイン

JetBrains IDE で codespace を操作する場合は、JetBrains Marketplace からプラグインを追加できます。

1. [JetBrains クライアント] をクリックし、 [基本設定] をクリックします。

2. [環境設定] ダイアログで、 [プラグイン ホスト上] をクリックして、リモートで実行されている完全な JetBrains IDE にプラグインをインストールするか、 [プラグイン] をクリックしてローカル クライアントにプラグインをインストールして、ユーザー インターフェイスのテーマの変更などを行います。

3. [Marketplace] タブをクリックします。

   

4. 必要なプラグインの横にある [インストール] をクリックします。

codespace のディレクトリ構造について

codespace を作成すると、リポジトリが codespace 内の /workspaces ディレクトリに複製されます。 これは、コンテナーにマウントされる永続的なディレクトリです。 ファイルの編集、追加、削除など、このディレクトリ内で行った変更は、codespace を停止して開始するとき、および codespace 内のコンテナーをリビルドするときに保持されます。

/workspaces ディレクトリの外部では、codespace のビルドに使用される開発コンテナー イメージによって異なる Linux ディレクトリ構造が codespace に含まれています。 /workspaces ディレクトリの外部にファイルを追加したり、ファイルに変更を加えたりすることができます。たとえば、新しいプログラムをインストールしたり、~/.bashrc などのファイルでシェル構成を設定したりできます。 ルート以外のユーザーは、特定のディレクトリへの書き込みアクセス権を自動的に持っていない場合がありますが、ほとんどのイメージでは、これらのディレクトリへの sudo コマンドを使ったルート アクセスが許可されます。

/workspaces の外部では、/tmp ディレクトリを除き、codespace 内のディレクトリはコンテナーのライフサイクルに関連付けられます。 つまり、codespace を停止して開始した場合、加えた変更は保持されますが、コンテナーをリビルドした場合は保持されません。 /tmp ディレクトリについて詳しくは、「環境変数と一時ファイルを永続化する」をご覧ください。

/workspaces の外側にあるディレクトリをクリアすると、再構築されたコンテナーを新しく作成された codespace での状態と同じようにすることができます。 作業している codespace に構成変更を適用するためにコンテナーを再構築している場合は、同じ構成で新しい codespace を作成しているユーザーに対して構成変更が同じように機能していると確信できます。 詳しくは、「開発コンテナーの概要」を参照してください。

リビルドや異なる codespace 間でより堅牢になる codespace に対して変更を加える場合は、いくつかのオプションがあります。

• リポジトリから作成されたすべての codespace にプログラムやツールをインストールするには、開発コンテナー構成で、postCreateCommand などのライフサイクル コマンド プロパティを使ってカスタム インストール コマンドを実行するか、事前に作成された "features" というインストール コマンドから選択できます。 詳しくは、開発コンテナーの Web サイトで開発コンテナーの仕様と「devcontainer.json ファイルへの機能の追加」をご覧ください。
• ツールをインストールしたり、bash プロファイルの構成など、作成したすべての codespace でセットアップをカスタマイズするには、GitHub Codespaces を dotfiles リポジトリにリンクします。 また、dotfiles リポジトリは、永続的な /workspaces ディレクトリに複製されます。 詳しくは、「アカウントの GitHub Codespaces をパーソナライズする」を参照してください。
• リビルドで特定のファイルを保持する場合は、このファイルと /workspaces 内の永続的なディレクトリとの間で devcontainer.json ファイルを使ってシンボリック リンクを作成できます。 詳しくは、「codespace でのコンテナーのリビルド」を参照してください。

参考資料

• 「組織での GitHub Codespaces の有効化または無効化」
• 「組織での GitHub Codespaces のコストの管理」
• 開発コンテナー構成のリポジトリへの追加
• 「codespace ライフサイクルについて」