Download as PDF, PPTX
Uploaded byKazumi OHIRA
GitHub Codespaces と Azure でつくる、エンタープライズレベルの開発環境
開発を加速するGitHub x Azure 最新開発ベストプラクティス vol.1 でお話した資料です。 https://msevents.microsoft.com/event?id=2453316745
More Related Content
![[GKE & Spanner 勉強会] Cloud Spanner の技術概要](https://cdn.slidesharecdn.com/ss_thumbnails/gke02-200121091040-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to GitHub Codespaces と Azure でつくる、エンタープライズレベルの開発環境
![[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)
GitHub Codespaces と Azure でつくる、エンタープライズレベルの開発環境
- 1. GitHub Codespaces と Azureでつくる、エンター プライズレベルの開発環境 開発を加速するGitHub x Azure 最新開発ベストプラクティス vol.1
- 2. 岩永かづみ / KazumiIWANAGA • Microsoft MVP for Azure • ZEN Architects 所属 • GitHub公認トレーナー • 得意な領域 • Infrastructure as Code • GitHub Actions による自動化 • 技術コミュニティ • Code Polaris / Hack Everything. • @dz_ • @dzeyelid • @dzeyelid
- 3.
- 4.
- 5. Visual Studio Codeがあれば • Windows, MacOS, Linux などマルチプラットフォーム対応 • Settings Sync で設定を共有できる • Live Share で環境を共有できる • コンテナや Vagrant などを利用して構築した環境に、Remote development で接続して開発できる
- 6. Visual Studio Codeの開発環境の例 コンテナ ランタイム Visual Studio Code コンテナ インスタンス Remote development
- 7. でもまだ"運用でカバー"がなくならない？ デバッグ中だけど、もう出かけないと。 途中のコード、push したくないなぁ… ノートPC、しばらく使ってなかったから npm install終わらん！ 出先で更新したとこ、取込み忘れてた！ コンフリクト直さないと、めんどうだーー しかも、モバイル回線…
- 8.
- 9.
- 10. Visual Studio Codeの開発環境の例 コンテナ ランタイム Visual Studio Code コンテナ インスタンス Remote development
- 11. GitHub Codespaces の場合 VisualStudio Code codespace インスタンス Remote development GitHub Codespaces
- 12. GitHub Codespaces の場合 VisualStudio Code codespace インスタンス GitHub Codespaces ウェブブラウザ
- 13. GitHub Codespaces の場合 VisualStudio Code codespace インスタンス GitHub Codespaces
- 14. GitHub Codespaces の場合 VisualStudio Code codespace インスタンス dev GitHub Codespaces codespace インスタンス review
- 15.
- 16.
- 17. 使い慣れたインタフェースから使う • ブラウザ、または対応したエディタやIDEから接続し、あたかもローカ ルで開発している感覚で利用できる • VisualStudio Code • JetBrains IDE • JupyterLab
- 18. 使い慣れたインタフェースから使う • 参考: VisualStudio Code で GitHub Codespaces を使用する - GitHub Docs • 参考: JetBrains IDE で GitHub Codespaces を使う - GitHub Docs • 参考: 機械学習のための GitHub Codespaces の概要 - GitHub Docs
- 19.
- 20. リポジトリから環境を立ち上げられる • リポジトリを cloneした状態で環境が立ち上がる
- 21. 必要な環境を数クリックで作成できる • 認証済み、またはコミュニティによるベースイメージが提供されている • Features（後述）で主要なCLIや言語をインストールできる
- 22. 必要な環境を数クリックで作成できる • 認証済み、またはコミュニティによるベースイメージが提供されている • Features（後述）で主要なCLIや言語をインストールできる
- 23. 必要な環境を数クリックで作成できる • 認証済み、またはコミュニティによるベースイメージが提供されている • Features（後述）で主要なCLIや言語をインストールできる
- 24.
- 25. インスタンスはアカウントごと • 立ち上げたインスタンスはアカウントごとに分離されている • コラボレーションには、Liveshare やポートフォワーディング（後述） の公開を利用できる
- 26.
- 27. マシンタイプ マシンタイプ メモリ ストレージ備考 2 core 4 GB RAM 32 GB 4 core 8 GB RAM 32 GB 8 core 16 GB RAM 64 GB 16 core 32 GB RAM 128 GB 32 core 64 GB RAM 128 GB 申請が必要 6 core (1 GPU) 112 GB RAM 128 GB 申請が必要
- 28. localhost へのポートフォワーディング • localhostにポートフォワードしてくれるため、あたかもローカル環境 のようにシームレスに開発できる • パブリック、または Organization 内向けに公開することもできる
- 29. Dev container でカスタマイズ •Features による簡単インストール • VS Code のエクステンションのインストール • OnCreateCommand などのライフサイクルへのフック • Dockerfile を用いた、より自由なカスタマイズ
- 30.
- 31.
- 32. 課金体系 • 利用時間とストレージの使用量で算出 • 個人アカウントには、1ヶ月あたり無料利用枠がふくまれる •GitHub Free – 15GB/月のストレージ、120時間/コアの利用時間 • GitHub Pro – 20GB/月のストレージ、180時間/コアの利用時間 マシンタイプ 利用時間の価格/時間 2 core $0.18 4 core $0.36 8 core $0.72 16 core $1.44 ３２ core $2.88 ストレージ量 ストレージ量の価格/月 1 GB $0.07
- 33. 課金の様子 ※ GitHub Proの無料利用枠が適用されています
- 34. 課金体系（Organization） • Organization 配下のリポジトリでcodespace を立ち上げる場合、 Organization の設定によって、課金される対象が異なる Organization の spending limit 説明 0 codespace を起動するユーザーに課金される 1 以上、または Unlimited spending 上限に達するまでは、Organization に課金される
- 35. 管理 • Dotfiles • シークレット •アカウント • リポジトリ • GPG verification • デフォルトのエディタ • アイドル タイムアウト • 保持期間 • リージョン
- 36. 管理（Organization） • 利用可能なメンバー • ポリシー •マシンタイプ • ポートの公開範囲 • アイドル タイムアウトの最大値 • 保持期間の最大値 • 利用可能なイメージの制限 • API により、メンバーの利用状況を取得できる
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. 解: セキュアなレジストリからイメージ取得 codespace インスタンス GitHubCodespaces ghcr.io プライベートリポジトリ <registry name>.azurecr.io など
- 43. 解: セキュアなレジストリからイメージ取得 codespace インスタンス GitHubCodespaces ghcr.io プライベートリポジトリ <registry name>.azurecr.io など
- 44. 解: セキュアなレジストリからイメージ取得 • 参考:codespace がプライベート イメージ レジストリにアクセスでき るようにする - GitHub Docs
- 45.
- 46. codespace からの接続は、基本パブリック codespace インスタンス GitHubCodespaces Visual Studio Code インターネット経由
- 47. codespace からの接続は、基本パブリック codespace インスタンス GitHubCodespaces Visual Studio Code インターネット経由
- 48. 解1:GitHub CLI によるネットワークブリッジ •手元のマシンで GitHub CLI extension を利用することで、そのマ シンをネットワークゲートウェイとして動作させ、codespace からリ ソースにアクセスできる
- 49. 解2: codespace からVPN接続 codespaceインスタンス GitHub Codespaces Visual Studio Code プライベートネットワーク VPN経由
- 50. 解2: codespace からVPN接続 codespaceインスタンス GitHub Codespaces Visual Studio Code プライベートネットワーク VPN経由
- 51. Codespaces と Azureを VPNで接続するデモ
- 52. codespace からVPN接続 codespace インスタンス GitHubCodespaces Visual Studio Code プライベートネットワーク VPN経由
- 53. codespace から AzureへVPN接続 codespace インスタンス GitHub Codespaces Visual Studio Code Microsoft Azure VPN経由 Virtual Network Virtual network gateway
- 54. codespace から AzureへVPN接続 codespace インスタンス GitHub Codespaces Microsoft Azure VPN経由 Virtual Network Virtual network gateway DNS private resolver Private endpoint Cosmos DB VNet intergration Functions app Static Web App Link
- 55. Azure のリソース構成(VPN) サービス 説明 Virtualnetwork 仮想ネットワーク Virtual network gateway 今回は、Point-to-site VPNゲートウェイとして利用する。 DNS Private resolver 仮想ネットワーク内の既定の Private DNS を介すルーティングを提供する。 これにより、仮想ネットワークに接続された Private endpoint を名前解決 できるようになる。
- 56. Azure のリソース構成（PaaS） サービス 説明 CosmosDB ドキュメント型データベース。今回は、Private endpoint を使用して仮想 ネットワークにのみ接続する。 Private endpoint Azure の PaaS サービスを仮想ネットワークに接続させる。DNS zone と 連携して名前解決を提供する。 Functions app デモアプリケーションのAPIを実装する。VNet integration により仮想ネッ トワークへのアウトバンドを通す。 Static Web App デモアプリケーションのフロントエンドを実装する。これはパブリックに公開す るが、上記の Functions app にリンクを接続することで、データベースへの 読み書きを行える。
- 57. Azure のリソース構成 • 参考:P2S VPN クライアントの構成 - 証明書認証 - Linux - Azure VPN Gateway | Microsoft Learn • 参考: Azure DNS Private Resolver - Azure Example Scenarios | Microsoft Learn • 参考: Azure Functions のネットワーク オプション | Microsoft Learn • 参考: Azure Cosmos DB アカウントの Azure Private Link を構 成する | Microsoft Learn • 参考: 独自の関数を Azure Static Web Apps で使用する | Microsoft Learn
- 58. codespace の構成 • OpenVPNなどを含むベースイメージを作成しておく • シークレットに、Azure Virtual network gateway から発行した vpnconfig.ovpn の情報を格納しておく • initializeCommand で上記 vpnconfig.ovpn の情報を読み出し、 インスタンス内に保存する • postStartCommand で OpenVPN を接続する
- 59. codespace の構成 • 参考:Installing and working with the devcontainer CLI (visualstudio.com) • 参考: プライベート ネットワークへの接続 - GitHub Docs • 参考: codespaces-contrib/codespaces-openvpn (github.com)
- 60.
- 61. Thank you somuch🍩.