【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
0 likes2,610 views
株式会社 ゼンアーキテクツ 大平かづみ GitHub 上に展開される開発環境をブラウザや Visual Studio Code から接続し、あたかも手元で作業しているかのように利用できる GitHub Codespaces。手元のマシンスペックに影響されず、プロジェクトで共通の環境をオンデマンドで利用できるため、コーディングからレビュー、デバッグに至るまでシームレスに作業することができます。実際に GitHub Codespaces を用いて開発を進めたプロジェクトを例に、デモを交えてご紹介します。
【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
- 1. チーム開発がこんなにも快適に！ コーディングもデバッグも GitHub 上で。 GitHub Codespaces で 叶えられるシームレスな開発
- 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? もっと集中できる 開発環境がほしい
- 6. 例えば、 • フロントエンドのフレームワークを利用した静的サイト • フロントエンドといくつかのAPIで構成されたウェブアプリケー ション • ちょっと Python で解析したい • PHP で作成されたバックエンドをデバッグしたい • Perl で書かれたコードを…
- 8. 何かと待たされるこの環境… • git clone, git pull, git push が遅くてつらい • デバッグ実行が遅くてつらい • 複数プロジェクト立ち上げたときにはもう…
- 9. 必要だけど毎回悩ましい
- 10. 開発に食い込んでくる環境セットアップ • 新しいメンバーを受入れるも、環境整備で一日かかってしまう • レビューのたびに、レビュー用の環境が増えていく • 急なデバッグを対応していたら、開発途中のコードを消してし まった
- 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
- 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
- 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ログインのコールバック エンドポイントに設定
- 34. GitHub Codespaces https://github.com/features/codespaces 現在は GitHub Team or GitHub Enterprise Cloud で利用可能