株式会社 ゼンアーキテクツ 大平かづみ GitHub 上に展開される開発環境をブラウザや Visual Studio Code から接続し、あたかも手元で作業しているかのように利用できる GitHub Codespaces。手元のマシンスペックに影響されず、プロジェクトで共通の環境をオンデマンドで利用できるため、コーディングからレビュー、デバッグに至るまでシームレスに作業することができます。実際に GitHub Codespaces を用いて開発を進めたプロジェクトを例に、デモを交えてご紹介します。

1.  チーム開発がこんなにも快適に！
コーディングもデバッグも GitHub 上で。
GitHub Codespaces で
叶えられるシームレスな開発

2. Self introduction
スピーカー 自己紹介

3. 大平かづみ / Kazumi OHIRA
• Microsoft MVP for Azure
• ZEN ARCHITECTS 所属
• Infrastructure as Code や
GitHub Actions による自動化が得意
• Code Polaris
• Hack Everything.
• Cogbot
• @dz_
• @dzeyelid
• YouTube

4. How is your development environment?
もっと集中できる
開発環境がほしい

5. Visual Studio 以外の開発環境、
どうしてます？

6. 例えば、
• フロントエンドのフレームワークを利用した静的サイト
• フロントエンドといくつかのAPIで構成されたウェブアプリケー
ション
• ちょっと Python で解析したい
• PHP で作成されたバックエンドをデバッグしたい
• Perl で書かれたコードを…

7. ぶっちゃけ、マシンスペック
足りてます？

8. 何かと待たされるこの環境…
• git clone, git pull, git push が遅くてつらい
• デバッグ実行が遅くてつらい
• 複数プロジェクト立ち上げたときにはもう…

9. 必要だけど毎回悩ましい

10. 開発に食い込んでくる環境セットアップ
• 新しいメンバーを受入れるも、環境整備で一日かかってしまう
• レビューのたびに、レビュー用の環境が増えていく
• 急なデバッグを対応していたら、開発途中のコードを消してし
まった

11. そんなあなたにお勧めしたい
GitHub Codespaces

12. GitHub Codespaces
https://github.com/features/codespaces

13. GitHub Codespaces とは
• Visual Studio Code の Remote containers の仕組みがベース
• コンテナを GitHub がホストしてくれる
• コンテナの環境は VS Code Dev container の仕組みで構成できる
• ポートフォワーディングにより、リモートであることを気にせ
ず実行環境にアクセスできる

14. GitHub Codespaces とは
container
ブラウザ Visual Studio Code

15. ブラウザで数クリックですぐ起動
• リポジトリの「<> Code」ボタ
ンから、新しい codespace を
すぐ作成できる

16. 開発に適したスペックを選べる
SKU 価格(per 1h)
2 core (4GB RAM, 32GB) $0.18
4 core (8GB RAM, 32GB) $0.36
8 core (16GB RAM, 64GB) $0.72
16 core (32GB RAM, 128GB) $1.44
32 core (64GB RAM, 64GB) $2.88
ストレージ容量 価格(per 1ヶ月)
1GB $0.07
• ※ 2022/1月時点
• 参照: About billing for Codespaces - GitHub Docs

17. デフォルトの環境は Ubuntu
• Node.js, .NET Core, Python 3.x, PHP, Ruby, Go などの主要な言語
• Azure CLI
• 参考: https://aka.ms/ghcs-default-image

18. codespace での作業内容は保持される
container volume
インスタンス
ファイルの変更は、
ボリューム上に保持される
コンテナイメージを
リビルドしたり、差し替えても、

19. ポートフォワーディング
• localhost としてアクセスできるので、リモートであることを意
識せずに実行環境を利用できる
• 組織、またはパブリックにもポートを共有できる
• 参考: Forwarding ports in your codespace - GitHub Docs

20. シークレットでカスタマイズ
• codespace 内で、シークレットを環境変数として読み込ませる
ことが可能
スコープ
自身のみ Personal settings > Codespaces > Codespaces secrets（リポジトリ指定可能）
リポジトリで共有 Repository settings > Secrets > Codespaces
Organization で共有 Organization settings > Secrets > Codespaces

21. Dev container による環境カスタマイズ
• devcontainer.json で環境の構成
を記述できる
• コマンドパレットから、ベー
スにするイメージやプリイン
ストールする features を選択
して、簡単に設定を作成でき
る
• 参考: Developing inside a
Container using Visual Studio
Code Remote Development

22. Dev container の extensions
• devcontainer.json に記述することにより、Visual Studio Code の拡
張機能をプリインストールしておける
• 参考: Managing extensions - Developing inside a Container using
Visual Studio Code Remote Development

23. Dev container の features
• Azure CLI や Terraform など、構成済みのスクリプトが用意され
ており、devcontainer.json で指定するだけで組み込める
• ライブラリ vscode-dev-containers/script-library
• 参考: Dev container features (preview) - Developing inside a
Container using Visual Studio Code Remote Development

24. GitHub Codespaces なら解決！

25. GitHub Codespaces があれば快適
• 手元のマシンスペックに影響されない
• 新規参入者の開発環境構築が瞬時
• 急なバグ解析したいとき
• レビューしたいとき
• 久々に更新したいとき
• 外出先など別のマシンでも同じ環境にアクセスできる

26. シナリオ: 開発チームの日常
GitHub Codespaces の快適さをお伝えするデモ

27. シナリオ: 開発中のプロジェクトへ参入
• 先行して、フロントエンドの開発が進んでいる
• 自分の担当は、バックエンドのAPI開発と、運用環境の整備であ
る
• フロントエンドは Azure Static Web Apps (SWA) へ、API も SWA に
内包する Azure Functions で運用しよう

28. デモ シナリオ
• 開発がすでに進んでいるチームに参入、Codespaces で環境起動
• スペック選べて快適
• Node.js, TypeScript の開発環境がすぐ用意できた
• Azure へのデプロイ周りを整理するタスク
• Dev container の features で Azure CLI, Terraform をインストール
• Azure Functions の開発環境を整えるタスク
• Dev container の extensions で Azure Functions 拡張インストール
• Dockerfile で azure func core tools 導入
• ポートフォワーディングで動作確認
• デプロイ

29. モノレポ プロジェクトもOK
温泉MaaS プロジェクトの一環、LINEのインタフェース（LIFF: Line Front-end
Framework）を用いたタクシー配車システムの例をご紹介

30. LIFFクライアントと管理システムを、
Azure Static Web Apps + Functions で構成
https://github.com/zengeeks/onsen-maas-taxi-allocation/

31. Azure Static Web Apps + Functions x 2 開発
SWA ローカル実行
フロントエンド
API
client
SWA ローカル実行
フロントエンド
API
admin
Multi-root workspace

32. Azure Static Web Apps + Functions x 2 開発
• Multi-root workspace で、LIFFクライアントと管理システムそれ
ぞれのディレクトリをワークスペースとして共存
• Visual Studio Code のデバッグを、LIFFクライアントと管理システ
ムそれぞれに設定して同時起動（swa や func のポートはずら
す）
• クライアントは、ポートフォワーディングの公開範囲を Public
に変え、LINEログインのコールバック エンドポイントに設定

33. GitHub Codespaces
https://github.com/features/codespaces

34. GitHub Codespaces
https://github.com/features/codespaces
現在は GitHub Team or
GitHub Enterprise Cloud で利用可能

35. https://github.co.jp/features/codespaces
個人アカウントの人はベータ版申請へ！