Download as PDF, PPTX
Uploaded by日本マイクロソフト株式会社
【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
株式会社 ゼンアーキテクツ 大平かづみ GitHub 上に展開される開発環境をブラウザや Visual Studio Code から接続し、あたかも手元で作業しているかのように利用できる GitHub Codespaces。手元のマシンスペックに影響されず、プロジェクトで共通の環境をオンデマンドで利用できるため、コーディングからレビュー、デバッグに至るまでシームレスに作業することができます。実際に GitHub Codespaces を用いて開発を進めたプロジェクトを例に、デモを交えてご紹介します。
More Related Content
![[AWS EXpert Online for JAWS-UG 18] 見せてやるよ、Step Functions の本気ってやつをな](https://cdn.slidesharecdn.com/ss_thumbnails/awsxon18howfarstepfunctionsgo-211124111849-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス](https://cdn.slidesharecdn.com/ss_thumbnails/amazonauroratips-170307140000-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to 【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
![[Developers Festa Sapporo 2020] Microsoft/GitHubが提供するDeveloper Cloud (Develop...](https://cdn.slidesharecdn.com/ss_thumbnails/20201118devfestamicrosoftgithub-201205093137-thumbnail.jpg?width=640&height=640&fit=bounds)
![S08_Microsoft 365 E5 Compliance による内部不正対策の実践 [Microsoft Japan Digital Days]](https://cdn.slidesharecdn.com/ss_thumbnails/s08microsoft365e5compliance-211028192815-thumbnail.jpg?width=640&height=640&fit=bounds)
![S12_Azure AD 活用術！アプリケーション認証を ADFS から移行しましょう。 [Microsoft Japan Digital Days]](https://cdn.slidesharecdn.com/ss_thumbnails/s12azureadadfs-211028193852-thumbnail.jpg?width=640&height=640&fit=bounds)
![S17_25 分でわかる！Windows 365 [Microsoft Japan Digital Days]](https://cdn.slidesharecdn.com/ss_thumbnails/s1725windows365-211028201849-thumbnail.jpg?width=640&height=640&fit=bounds)
![S15_標準 PC にさようなら！ニューノーマルの働き方に合わせたデバイスの選択 [Microsoft Japan Digital Days]](https://cdn.slidesharecdn.com/ss_thumbnails/s15pc-211028201443-thumbnail.jpg?width=640&height=640&fit=bounds)
![N08_次世代通信キャリアの "Resilience" を支援する Microsoft Cloud [Microsoft Japan Digital Days]](https://cdn.slidesharecdn.com/ss_thumbnails/n08resiliencemicrosoftcloud-211029110411-thumbnail.jpg?width=640&height=640&fit=bounds)
![【会社紹介資料】 株式会社カンゲンエージェント [ 11 月 30 日作成資料公開 ].pdf](https://cdn.slidesharecdn.com/ss_thumbnails/11-251211095054-61b5c9e6-thumbnail.jpg?width=640&height=640&fit=bounds)
【BS13】チーム開発がこんなにも快適に！コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
- 1. チーム開発がこんなにも快適に！ コーディングもデバッグも GitHub上で。 GitHub Codespaces で 叶えられるシームレスな開発
- 2.
- 3. 大平かづみ / KazumiOHIRA • Microsoft MVP for Azure • ZEN ARCHITECTS 所属 • Infrastructure as Code や GitHub Actions による自動化が得意 • Code Polaris • Hack Everything. • Cogbot • @dz_ • @dzeyelid • YouTube
- 4. How is yourdevelopment environment? もっと集中できる 開発環境がほしい
- 5.
- 6. 例えば、 • フロントエンドのフレームワークを利用した静的サイト • フロントエンドといくつかのAPIで構成されたウェブアプリケー ション •ちょっと Python で解析したい • PHP で作成されたバックエンドをデバッグしたい • Perl で書かれたコードを…
- 7.
- 8. 何かと待たされるこの環境… • git clone,git pull, git push が遅くてつらい • デバッグ実行が遅くてつらい • 複数プロジェクト立ち上げたときにはもう…
- 9.
- 10. 開発に食い込んでくる環境セットアップ • 新しいメンバーを受入れるも、環境整備で一日かかってしまう • レビューのたびに、レビュー用の環境が増えていく •急なデバッグを対応していたら、開発途中のコードを消してし まった
- 11.
- 12.
- 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) 2core (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.
- 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.
- 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 WebApps + Functions で構成 https://github.com/zengeeks/onsen-maas-taxi-allocation/
- 31. Azure Static WebApps + Functions x 2 開発 SWA ローカル実行 フロントエンド API client SWA ローカル実行 フロントエンド API admin Multi-root workspace
- 32. Azure Static WebApps + Functions x 2 開発 • Multi-root workspace で、LIFFクライアントと管理システムそれ ぞれのディレクトリをワークスペースとして共存 • Visual Studio Code のデバッグを、LIFFクライアントと管理システ ムそれぞれに設定して同時起動（swa や func のポートはずら す） • クライアントは、ポートフォワーディングの公開範囲を Public に変え、LINEログインのコールバック エンドポイントに設定
- 33.
- 34. GitHub Codespaces https://github.com/features/codespaces 現在は GitHubTeam or GitHub Enterprise Cloud で利用可能
- 35.