Check! GitHub Codespaces でいつでもサクッと開発環境が整う最高！
Prologue
こんにちは、 @dz_ こと、大平かづみです。
この記事は、 Code Polaris アドベントカレンダー 25日目の記事です🎉
先日の 第34回 Tokyo Jazug Night (Online) の LT でお話しした GitHub Codespaces (Visual Studio Code Dev container) による環境構築をもう少し詳しく説明します🤓 LT が気になる方は資料と YouTube アーカイブをお楽しみください♪
YouTubeのvideoIDが不正です
GitHub Codespaces とは
GitHub Codespaces が、GitHub が Visual Studio Code の環境をホストして提供してくれるサービスです。
実態は Visual Studio Code の Remote-Container の仕組みがベースとなっており、環境のカスタマイズは Dev container の機能・仕様に従います。
提供されるスペックは 2, 4, 8, 16, 32 コアの SKU が用意されており、環境に応じて選択し、ストレスなく十分に利用することができます。
コストは、稼働時間とストレージの利用量による従量課金です。（利用しないときは停止しておけます）詳しくは下記をご参考ください。
現在は、GitHub Teams または GitHub Enterprize Cloud で利用可能で、個人アカウントではベータ版の申請が通ると利用できるようになります。ベータ版申請は GitHub Codespaces から受け付けられています。（英語サイトだと申請へのリンクが見つからない状態になっているので、もしかしたらしばらく時間かかるかもしれませんが…！）
GitHub Codespaces を激押しする理由
さて、これだけ推すには理由があります。
熱い思いが溢れてしまうので、各1行でまとめると、
- 手元のマシンにコードを展開しなくてよい
- ブラウザ上でだけでも開発できる
- 手元の Visual Studio Code で開いて作業できる、VS Code 拡張機能も使える
- 手元の環境には Docker 環境不要
- ポートフォワーディング機能が便利
-
github.devやvscode.devとの違いは、ターミナル が使えること - Dev container の仕組みでカスタマイズした環境をコード化、共有できる
です！
Codespaces を使いだしてから、手元のマシンに git clone してコードを置くことがほとんどなくなりました。
そうすると、これまでは終わったプロジェクトのソースコードを整理するタイミングを逃して延々と残っていたけど、今はそれぞれにリポジトリに紐づく Codespaces のインスタンスを消すだけ！
しばらく間が空いてたまに更新するときも、ぱっと GitHub Codespaces のインスタンスを立ち上げて、ササっと直してコミットしたらインスタンスを消すだけ！
そして、家では使い慣れた Windows マシンで、出先では M1 Mac book Air で、ネットワークさえつながれば、同じ環境を、前回の作業のあとそのまま開いて作業できる。このシームレスっぷりは本当に便利！
それから、ポートフォワーディングの公開設定を Public にすると、https のURLを発行してくれるので、外部サービスの callback URL に設定するときなど地味に便利！
さらに、Dev container で環境をコード化して共有できるので、いつでも誰でも、手元の環境に影響することなく環境をすぐ立てられるのです！！🙌
GitHub Codespaces を使うには
GitHub アカウントがあればすぐに使える（※）
※ 現在は、GitHub Teams または GitHub Enterprize Cloud で利用可能で、個人アカウントではベータ版の申請が通ると利用できるようになります。前述をご参照ください。
GitHub Codespaces を使い始めるには、GitHub アカウントがあって上記 ※ の条件を満たしていればすぐに利用することができます。
使用するリポジトリの「Code」ボタンから、「Codespaces」タブを開き、「New codespace」ボタンを選択するだけ！
すぐにブラウザで Visual Studio Code の環境が立ち上がります。
Visual Studio Code で GitHub Codespaces を開く
手元の Visual Studio Code で GitHub Codespaces の環境を開きたい場合は、下記の拡張機能をインストールしておきます。
ブラウザで GitHub Codespaces が開いている場合は、左下の「Coedespaces」やコマンドパレットから VS Code で開きなおすことができます。
一度 VS Code で開くと、その後は VS Code で直接開くようになります。
GitHub Codespaces の環境カスタマイズ（醍醐味）
さて、前置きが長くなりましたが、醍醐味は環境をカスタマイズできることなんです！
GitHub Codespaces の環境をカスタマイズするときに抑えておくべき技術要素
最終的には Dockerfile のカスタマイズになるのですが、Dev container にはより簡単に素早く環境をカスタマイズして使える機能が用意されています。私がよく使う機能をご紹介します。
- Visual Studio Code で用意されているイメージ
- Visual Studio Code の Dev container (
devcontainer.json)extensions-
features(preview)
- 応用編: Dockerfile によるイメージ作成
Visual Studio Code で用意されているイメージ
Visual Studio Code の Dev container 用に用意されているイメージを、GitHub Codespaces でも利用することができます。
使う時は、難しいことはなくコマンドパレットの「Add Development Container Configration Files」からイメージを選択して設定ファイルを作成することができて便利です。
Visual Studio Code の Dev container (devcontqainer.json)
Visual Studio Code の Dev container の仕組みのほとんどが利用できます。そのうち、 extensions と features が得に便利です。
extensions
Visual Studio Code には、もともと拡張機能をリコメンドする設定がありますが、ユーザーにインストール作業をしてもらう手順が挟まります。
Dev container の場合は、コンテナの環境立上げの段階で拡張機能も一緒にインストールすることができ、より素早く開発を始められるようになります。詳細は下記ドキュメントをご参考ください。
devcontainer.json では下記のように記述します。
// Add the IDs of extensions you want installed when the container is created.
"extensions": [
"ms-vscode.azure-account",
"ms-azuretools.vscode-azurefunctions",
"ms-azuretools.vscode-azureterraform",
"dbaeumer.vscode-eslint"
]
faetures
Dev container のカスタマイズは、Dockerfile を編集する必要があるのですが、いくつか人気のあるツールはインストールスクリプトが用意されており、 devcontainer.json に下記のように記述するだけでインストールしてくれる便利な機能です。詳細は下記ドキュメントをご参考ください。
devcontainer.json では下記のように記述します。
"features": {
"azure-cli": "latest",
"terraform": "latest"
}
応用編: Dockerfile によるイメージ作成
上記で足りなければ、Dockerfile でいくらでもカスタマイズ可能です。割愛します 🤓
参考: GitHub Codespaces/Dev container の Azure Functions 開発環境の例
参考までに、上記に挙げたポイントを抑えて、Azure Functions (Node.js) の開発環境をまとめたコードをご紹介しておきます。
Epilogue
Azure Functions 開発環境についても解説加えたかったのですが、長くなりすぎたので割愛します🤫
GitHub Codespaces 、ぜひ使ってみてください～！
Discussion