GitHub Codespacesをカスタムして拡張機能とかが揃った開発環境を構成する
Azure DevOpsアドベントカレンダー14日目です。
最近GitHub Codespaceで開発をしているのですが、よく使う拡張機能とかがもう入っている状態の開発環境を用意したかったので構成ファイルを使って開発環境を構成してみました。
GitHub Codespacesでスピーディーに開発環境を立ち上げ
GiHub Coddespacesはクラウドでホストされている開発環境で、Organization/リポジトリ単位で作成することができます。
同じリポジトリに対して開発をしていく開発者間で、事前構成済みの開発環境としてGitHub Codespacesを使用することができます。
これにより、開発者間での開発環境の構成のずれによるconflictの回避や、新しいメンバーがjoinしたときの開発環境の構築の手間を大幅に減らすことができます。
仕組みとしては以下の図のようになっています。
リポジトリのcodeのボタン押下>Codespaces>+ボタンでCodespaceの作成ができます。
Codespaceが作成されると別タブでこんな風にブラウザ上でCodespaceが起動します。
ブラウザ上でCodespaceを作成したGitHubリポジトリをベースにした開発環境が立ち上がり、このcodespace上での開発はもちろん、ブランチの作成やプルリクエスト、GitHub Copilotの使用もできてとても便利です。
ブラウザからだけでなく、以下の拡張機能を使用することによってVSCodeアプリでも使用することができます。
その他、現在Preview中ですがhetBrains GatewayやJupyterLabからでもCodespaceを起動することができるようです。
Codespaceの設定は、.devconterner>devcontainer.jsonの構成ファイルを作成することによって設定することができます。
リポジトリ上に作成されたdevcontainer.jsonファイルにデフォルトで入れておきたい拡張機能や、開発言語に適したコンテナイメージ、VSCodeのテーマカラーなどの環境設定を入れることによって、このリポジトリ上で何度Codespaceを作成してもこの設定をベースにした環境を立ち上げることができます。
devcontainer.jsonファイルの内容をベースに、Azure上に構成された仮想マシンの中で開発環境のコンテナが構成されます。そのコンテナからCodespaceが構築され、開発者は自分が好きなエディタからGitHubに認証することによってCodespaceへのアクセスと起動ができます。
Codespaceで行われた変更は、Azure上のストレージに保存されます。
詳しい仕組みはこちらのdocsから！
devcontainer.jsonでカスタムしたい設定を構成
では、devcontainer.jsonファイルを作成して開発環境の構成を記述していきます。
今回ベースとしたリポジトリでは、C#でのアプリケーションコード、bicepでインフラ構成定義、YAMLでGitHub Actionsのフローを記載しているので、.Netのベースイメージと、その辺の記載をサポートしてくれる拡張機能がデフォルトで入っているようにしたいと思います。
あとはGitHub Copilot, GitHub Copilot for Azureの拡張機能と、個人的な好みでVSCodeのテーマカラーでVisual Studio Darkを設定したいと思います。
まずは、
リポジトリのルートに.devcontainerフォルダ（.を忘れないように！）その配下にdevcontainer.jsonを作成します。
普通に手で作ってもいいですが、リポジトリのCodeボタンからConfigure dev containerを押下すると勝手にフォルダから空の構成ファイルまで作成してくれます。
devcontainer.jsonの中身を書いていきます。
{
"name": "Default Codespace Development Environment",
"image": "mcr.microsoft.com/dotnet/sdk:8.0",
"customizations": {
"vscode": {
"settings": {
"workbench.colorTheme": "Visual Studio Dark",
"editor.formatOnSave": true
},
"extensions": [
"ms-dotnettools.csdevkit",
"github.copilot",
"github.copilot-azure",
"ms-azuretools.vscode-bicep",
"redhat.vscode-yaml"
]
}
},
"postCreateCommand": "dotnet restore"
}
イメージの指定
nameはCodespaceの開発環境の名前を設定します。
imageはコンテナのベースイメージです。今回はC#のアプリケーションコードが入っているので、.Netのイメージを設定しています。
.NetベースのCodespaceの.devcontainer.jsonの構成のお手本がこちらで公開されているみたいなので、.Netでバリバリ開発していくぞ！という方はこちらのdevcontainer.jsonを参考にするとよいかもです。
他のベースイメージもMarketplaceで公開されています。（Configura dev containerの画面で出てきます）
好きなベースイメージの候補を選択すると、こんな感じですぐコピペできるようになってます。
開発環境のカスタム設定：VSCodeの設定
customizationsがカスタムの設定になります。ここでVSCodeのテーマカラーやフォントの設定や、テーマカラーを設定したり、デフォで入れておきたい拡張機能を設定します。
今回は個人的な好みでVisual Studio Darkにしたいので、こんな感じで設定してます。
ついでに、editor.formatOnSaveをtrueにして保存したときにコードを自動でフォーマットしてくれるようにします。
"vscode": {
"settings": {
"workbench.colorTheme": "Visual Studio Dark",
"editor.formatOnSave": true
}
VSCodeのテーマカラー設定は、この歯車アイコン>settingsから、
Workspaceの設定にいって、Workbench:Color Themeのところにいって、
Copy settings as jsonを選択するとカラー設定のjson記述が取得できるので、これをdevcontainer.jsonのvscode>settingsでペーストするといいかなと。
開発環境のカスタム設定：拡張機能の設定
拡張機能の指定は、extensionsの箇所で指定します。
"extensions": [
"ms-dotnettools.csdevkit",
"github.copilot",
"github.copilot-azure",
"ms-azuretools.vscode-bicep",
"redhat.vscode-yaml"
]
指定する際には、拡張機能のidentifierを指定します。identifierは、拡張機能のページで以下のようにidentifierと書いてあるのでそれを取ってきます。
構成ファイルの作成が終わったら、pushしてmainブランチにマージします。
これで、新たにCodespaceを作成したときも上記の設定の開発環境が立ち上がりました！
拡張機能も入っててGithub Copilotも使えるようになってて、テーマカラーもちゃんとDark Visual Stuidoが適用されてますね。
Codespacesの管理
作成されたCodespacesは、リポジトリのCode>CodespacesからManage Codespaceを押下すると
こんな感じで作成されたCodespaceが確認できます。
お値段
気になるお値段ですが、個人用アカウントでは以下の無料枠の範囲であれば無料で使用することができます。
詳細はこちらをcheck
References
Discussion