開発を加速するGitHub x Azure 最新開発ベストプラクティス vol.1 でお話した資料です。 https://msevents.microsoft.com/event?id=2453316745
GitHub Codespaces とAzure でつくる、エンタープライズレベルの開発環境開発を加速するGitHub x Azure 最新開発ベストプラクティスvol.1
View Slide
岩永かづみ / Kazumi IWANAGA• Microsoft MVP for Azure• ZEN Architects 所属• GitHub公認トレーナー• 得意な領域• Infrastructure as Code• GitHub Actions による自動化• 技術コミュニティ• Code Polaris / Hack Everything.• @dz_• @dzeyelid• @dzeyelid
イントロ
開発は一カ所にとどまらない
Visual Studio Code があれば• Windows, MacOS, Linux などマルチプラットフォーム対応• Settings Sync で設定を共有できる• Live Share で環境を共有できる• コンテナや Vagrant などを利用して構築した環境に、Remotedevelopment で接続して開発できる
Visual Studio Code の開発環境の例コンテナ ランタイムVisual Studio Code コンテナ インスタンスRemote development
でもまだ"運用でカバー"がなくならない？デバッグ中だけど、もう出かけないと。途中のコード、push したくないなぁ…ノートPC、しばらく使ってなかったからnpm install 終わらん！出先で更新したとこ、取込み忘れてた！コンフリクト直さないと、めんどうだーーしかも、モバイル回線…
そこで、GitHub Codespaces
GitHub Codespaces とは
GitHub Codespaces の場合Visual Studio Code codespace インスタンスRemote developmentGitHub Codespaces
GitHub Codespaces の場合Visual Studio Codecodespace インスタンスGitHub Codespacesウェブブラウザ
GitHub Codespaces の場合Visual Studio Code codespace インスタンスGitHub Codespaces
GitHub Codespaces の場合Visual Studio Code codespace インスタンス devGitHub Codespacescodespace インスタンス review
実際に触ってみるデモ
GitHub Codespaces ポイント
使い慣れたインタフェースから使う• ブラウザ、または対応したエディタやIDEから接続し、あたかもローカルで開発している感覚で利用できる• Visual Studio Code• JetBrains IDE• JupyterLab
使い慣れたインタフェースから使う• 参考: Visual Studio Code で GitHub Codespaces を使用する- GitHub Docs• 参考: JetBrains IDE で GitHub Codespaces を使う - GitHubDocs• 参考: 機械学習のための GitHub Codespaces の概要 - GitHubDocs
テンプレートから環境を立上げられる• テンプレートから立ち上げる場合は、リポジトリがなくても利用できる
リポジトリから環境を立ち上げられる• リポジトリを clone した状態で環境が立ち上がる
必要な環境を数クリックで作成できる• 認証済み、またはコミュニティによるベースイメージが提供されている• Features （後述）で主要なCLIや言語をインストールできる
誰でも同じ環境を立ち上げられる• 作成した環境設定（devcontainer.json）をリポジトリに置いて共有することで、誰でも同じ環境を立ち上げることができる
インスタンスはアカウントごと• 立ち上げたインスタンスはアカウントごとに分離されている• コラボレーションには、Live share やポートフォワーディング（後述）の公開を利用できる
インスタンスのスペックを選択できる
マシンタイプマシンタイプ メモリ ストレージ 備考2 core 4 GB RAM 32 GB4 core 8 GB RAM 32 GB8 core 16 GB RAM 64 GB16 core 32 GB RAM 128 GB32 core 64 GB RAM 128 GB 申請が必要6 core (1 GPU) 112 GB RAM 128 GB 申請が必要
localhost へのポートフォワーディング• localhost にポートフォワードしてくれるため、あたかもローカル環境のようにシームレスに開発できる• パブリック、または Organization 内向けに公開することもできる
Dev container でカスタマイズ• Features による簡単インストール• VS Code のエクステンションのインストール• OnCreateCommand などのライフサイクルへのフック• Dockerfile を用いた、より自由なカスタマイズ
Dev container でカスタマイズ
prebuild で素早く立上げる
課金体系• 利用時間とストレージの使用量で算出• 個人アカウントには、1ヶ月あたり無料利用枠がふくまれる• GitHub Free – 15GB/月のストレージ、120時間/コアの利用時間• GitHub Pro – 20GB/月のストレージ、180時間/コアの利用時間マシンタイプ 利用時間の価格/時間2 core $0.184 core $0.368 core $0.7216 core $1.44３２ core $2.88ストレージ量 ストレージ量の価格/月1 GB $0.07
課金の様子※ GitHub Pro の無料利用枠が適用されています
課金体系（Organization）• Organization 配下のリポジトリで codespace を立ち上げる場合、Organization の設定によって、課金される対象が異なるOrganization の spending limit 説明0 codespace を起動するユーザーに課金される1 以上、または Unlimited spending 上限に達するまでは、Organization に課金される
管理• Dotfiles• シークレット• アカウント• リポジトリ• GPG verification• デフォルトのエディタ• アイドル タイムアウト• 保持期間• リージョン
管理（Organization）• 利用可能なメンバー• ポリシー• マシンタイプ• ポートの公開範囲• アイドル タイムアウトの最大値• 保持期間の最大値• 利用可能なイメージの制限• API により、メンバーの利用状況を取得できる
管理（Organization）
GitHub Codespaces をよりセキュアに使いたい
その1ベースイメージのレジストリ
ベースイメージの取得は、基本パブリックcodespace インスタンスGitHub Codespacesmcr.microsoft.comhub.docker.comパブリックリポジトリ
解: セキュアなレジストリからイメージ取得codespace インスタンスGitHub Codespacesghcr.ioプライベートリポジトリ.azurecr.ioなど
解: セキュアなレジストリからイメージ取得• 参考: codespace がプライベート イメージ レジストリにアクセスできるようにする - GitHub Docs
その2codespace からの接続
codespace からの接続は、基本パブリックcodespace インスタンスGitHub CodespacesVisual Studio Codeインターネット経由
解1:GitHub CLI によるネットワークブリッジ• 手元のマシンで GitHub CLI extension を利用することで、そのマシンをネットワークゲートウェイとして動作させ、codespace からリソースにアクセスできる
解2: codespace からVPN接続codespace インスタンスGitHub CodespacesVisual Studio CodeプライベートネットワークVPN経由
Codespaces と Azure をVPNで接続するデモ
codespace からVPN接続codespace インスタンスGitHub CodespacesVisual Studio CodeプライベートネットワークVPN経由
codespace から Azure へVPN接続codespace インスタンスGitHub CodespacesVisual Studio CodeMicrosoft AzureVPN経由Virtual NetworkVirtual networkgateway
codespace から Azure へVPN接続codespace インスタンスGitHub Codespaces Microsoft AzureVPN経由Virtual NetworkVirtual networkgatewayDNS privateresolverPrivate endpoint Cosmos DBVNet intergrationFunctions app Static Web AppLink
Azure のリソース構成(VPN)サービス 説明Virtual network 仮想ネットワークVirtual network gateway 今回は、Point-to-site VPNゲートウェイとして利用する。DNS Private resolver 仮想ネットワーク内の既定の Private DNS を介すルーティングを提供する。これにより、仮想ネットワークに接続された Private endpoint を名前解決できるようになる。
Azure のリソース構成（PaaS）サービス 説明Cosmos DB ドキュメント型データベース。今回は、Private endpoint を使用して仮想ネットワークにのみ接続する。Private endpoint Azure の PaaS サービスを仮想ネットワークに接続させる。DNS zone と連携して名前解決を提供する。Functions app デモアプリケーションのAPIを実装する。VNet integration により仮想ネットワークへのアウトバンドを通す。Static Web App デモアプリケーションのフロントエンドを実装する。これはパブリックに公開するが、上記の Functions app にリンクを接続することで、データベースへの読み書きを行える。
Azure のリソース構成• 参考: P2S VPN クライアントの構成 - 証明書認証 - Linux -Azure VPN Gateway | Microsoft Learn• 参考: Azure DNS Private Resolver - Azure ExampleScenarios | Microsoft Learn• 参考: Azure Functions のネットワーク オプション | MicrosoftLearn• 参考: Azure Cosmos DB アカウントの Azure Private Link を構成する | Microsoft Learn• 参考: 独自の関数を Azure Static Web Apps で使用する |Microsoft Learn
codespace の構成• OpenVPN などを含むベースイメージを作成しておく• シークレットに、Azure Virtual network gateway から発行したvpnconfig.ovpn の情報を格納しておく• initializeCommand で上記 vpnconfig.ovpn の情報を読み出し、インスタンス内に保存する• postStartCommand で OpenVPN を接続する
codespace の構成• 参考: Installing and working with the devcontainer CLI(visualstudio.com)• 参考: プライベート ネットワークへの接続 - GitHub Docs• 参考: codespaces-contrib/codespaces-openvpn(github.com)
ぜひ体験してみて！GitHub Codespaces
Thank you so much🍩.
dzeyelid
niftycorp
shibuiwilliam
stefafafan
keiko713
yutoy
pkshadeck
coconala_engineer
akiroom
kosui
route06
hakubishin3
toshi0383
trishagee
tammyeverts
keathley
bkeepers
cromwellryan
danielanewman
kneath
eitanlees
samanthasiow
lemiorhan
aki_iinuma