複数のDev ContainerがあるリポジトリでのGitHub Codespaces起動時のコツ

こんにちは、クロスイノベーション本部エンジニアリングテクノロジーセンターの小澤英泰です。
本記事ではGitHub Codespacesを活用する中で学んだ、複数のDev Containerの設定があるリポジトリにおいて、起動するDev Containerを指定する方法を紹介します。

はじめに

前提知識となるDev ContainerやGitHub Codespacesの概要は本記事では省略します。
適宜、過去に弊社社員が発表の記事や動画を参照してください。

• テックブログ：GitHub Codespace を使った開発環境のメリットをまとめてみた
• TECH PLAY の記事：開発効率向上・フレキシブルな働き方・セキュリティの確保──ストレスフリーな開発体験を「GitHub Codespaces」で実現するポイント解説
• TECH PLAY のアーカイブ動画：開発効率向上も、フレキシブルな働き方も、セキュリティの確保も、GitHub Codespacesで実現！-ストレスフリーな開発体験のカギ-

複数のDev Containerの設定方法

複数のDev Containerを設定するには、リポジトリの.devcontainer配下はどのようなディレクトリ構成になるでしょうか。
例えば、VSCodeのドキュメントConnect to multiple containersでは、下記の構成を採っています。

📁 project-root
    📁 .git
    📁 .devcontainer
      📁 python-container
        📄 devcontainer.json
      📁 node-container
        📄 devcontainer.json
    📁 python-src
        📄 hello.py
    📁 node-src
        📄 hello.js
    📄 docker-compose.yml

.devcontainer配下に設定ごとのディレクトリpython-containerとnode-containerを作成しdevcontainer.jsonを置いています。
上記の構成にならって、複数のDev Containerの設定をしました。

.
├── .devcontainer
    ├── DevContainerA
    │   └── devcontainer.json
    └── DevContainerB
        └── devcontainer.json

• .devcontainer/DevContainerA/devcontainer.jsonの中身

{
  "name": "DevContainerA",
  "image": "mcr.microsoft.com/devcontainers/base:ubuntu"
}

• .devcontainer/DevContainerB/devcontainer.jsonの中身

{
  "name": "DevContainerB",
  "image": "mcr.microsoft.com/devcontainers/base:ubuntu"
}

それではローカルマシンとGitHub Codespaces上の2つのパターンでDev Containerの起動方法を確認しましょう。

ローカルマシンでのDev Containerの起動

ローカルマシンでのDev Containerの起動手順を確認します。
VSCodeのコンテナーで再度開くを選択すると、設定したDev Containerの一覧が表示され、起動対象のDev Containerを選べます。

GitHub CodespacesでのDev Containerの起動

GitHub CodespacesでのDev Containerの起動手順を確認します。
VSCodeのCreate New Codespace... を選択後、起動対象のブランチを選択すると、Dev Containerの一覧が表示されます。



ローカルマシンの場合と異なり、GitHub Codespacesの場合は、一番上にDefault Codespaces configrationが表示されています。Default Codespaces configrationとは、一体何者なのでしょうか。

Default Codespaces configration とは？

Default Codespaces configrationを日本語では既定の開発コンテナー構成と呼びます。
既定の開発コンテナー構成とは、GitHubが用意したDev Containerです。下記の特徴があります。

GitHub によって既定の Linux イメージからコンテナーが作成されます。 この Linux イメージには、Python、Node、PHP、Java、Go、C++、Ruby、.NET Core/C# などの一般的な言語のランタイム バージョンが多数含まれています。 これらの言語の最新または LTS リリースが使用されます。 JupyterLab や Conda など、データ サイエンスと機械学習をサポートするツールもあります。 既定の開発コンテナー イメージには、Git、GitHub CLI、yarn、openssh、vim などの他の開発者ツールやユーティリティも含まれています。

詳細は既定の開発コンテナー構成の使用を参照してください。

また、Default Codespaces configrationが表示されるのは、.devcontainer直下にdevcontainer.jsonがない場合のGitHubの仕様です。

.devcontainer/devcontainer.json または .devcontainer.json が存在する場合は、codespace を作成するときに使用可能な構成ファイルの一覧でそれが既定の選択になります。 どちらのファイルも存在しない場合は、既定の開発コンテナー構成が既定で選択されます。

詳細はcodespace の作成時における既定の構成の選択を参照してください。

問題

VSCodeからGitHub Codespacesを起動する場合はDev Containerの一覧が表示され起動対象のDev Containerを選べるため、一見問題はなさそうです。しかし、ブラウザのgithub.comからGitHub Codespacesを起動する場合に注意が必要です。

リポジトリを開きCodeをクリックしCodespacesタブを開きます。+ ボタンまたはCreate codespace on mainをクリックすると、自動で既定の開発コンテナー構成で起動します。起動対象のDev Containerを選ぶことはできません。

起動対象のDev Containerを選ぶには、･･･ ボタンからNew with options... をクリックします。遷移先の画面で他のオプションも含め選択することができます。


毎回、New with options... から起動するのは面倒です。油断して+ ボタンまたはCreate codespace on mainから起動し、npm run devなどのコマンド実行の失敗後にミスに気づき残念な気持ちにもなります。再作成には時間も費用もかかるので改善しましょう。

解決策1

ディレクトリの構成を変更します。DevContainerA配下のdevcontainer.jsonを.devcontainer直下に移動することでデフォルトのDev ContaienerをDevContainerAの設定とすることができます。

• 変更前の構成

.
├── .devcontainer
    ├── DevContainerA
    │   └── devcontainer.json
    └── DevContainerB
        └── devcontainer.json

• 変更後の構成

.
├── .devcontainer
│   ├── DevContainerB
│   │   └── devcontainer.json
│   └── devcontainer.json

変更後はDefault Codespaces configrationが消え、デフォルトでDevContainerAが選択されます。

VSCodeから起動する場合もDefault Codespaces configrationが消えています。

なお、ディレクトリ構成を変更してもローカルマシンでのDev Containerの起動方法に影響はありません。

解決策2

ディレクトリ構成を変えない場合は、READMEにGitHub Codespaces 作成ページへのリンクを置くことで問題を回避できます。設定するURLはShare a deep linkから確認できます。

Markdownタブを開くと、READMEに埋め込む値をコピーできます。
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/Hideyasu-Ozawa/multi-dev-container)

上記コピーした値をREADMEに貼り付けると、バッジが表示されます。

バッチをクリックするとオプションを選択する画面に飛びます。

各オプションの値もクエリパラメータを変更することで簡単にカスタマイズできます。バッチに設定したURLを下記に変更します。
https://github.com/codespaces/new/Hideyasu-Ozawa/multi-dev-container?skip_quickstart=true&machine=standardLinux32gb&repo=934587189&ref=branchName&devcontainer_path=.devcontainer%2FDevContainerB%2Fdevcontainer.json&geo=UsEast)
バッチをクリックすると、ブランチにbranchName、Dev ContainerにDevContainerB、RegionにUS East、Machine typeに4-coreを設定した状態で開きます。

READMEに配置したバッチからGitHub Codespacesを作成することで、Dev Containerに既定の開発コンテナー構成を使うミスを回避できるようになりました。

さいごに

本記事では、複数のDev Containerの設定があるリポジトリにおいて、GitHub Codespacesで起動するDev Containerを指定する方法を紹介しました。
ローカルマシンとGitHub CodespacesでDev Containerを起動する際の仕様が異なることには注意が要りますが、解決策1のディレクトリ構成を変更しつつ、解決策2のREADMEにリンクを置くことで、GitHub Codespacesの起動時の体験をより良くすることができました。

私たちは一緒に働いてくれる仲間を募集しています！

電通総研 キャリア採用サイト 電通総研 新卒採用サイト

執筆：@ozawa.hideyasu、レビュー：Ishizawa Kento (@kent)
（Shodoで執筆されました）