GitHub Codespaces と Azure でつくる、エンタープライズレベルの開発環境

Slide 1

Slide 1 text

GitHub Codespaces と Azure でつくる、エンタープライズレベルの開発環境開発を加速するGitHub x Azure 最新開発ベストプラクティス vol.1

Slide 2

Slide 2 text

岩永かづみ / Kazumi IWANAGA • Microsoft MVP for Azure • ZEN Architects 所属 • GitHub公認トレーナー • 得意な領域 • Infrastructure as Code • GitHub Actions による自動化 • 技術コミュニティ • Code Polaris / Hack Everything. • @dz_ • @dzeyelid • @dzeyelid

Slide 3

Slide 3 text

イントロ

Slide 4

Slide 4 text

開発は一カ所にとどまらない

Slide 5

Slide 5 text

Visual Studio Code があれば • Windows, MacOS, Linux などマルチプラットフォーム対応 • Settings Sync で設定を共有できる • Live Share で環境を共有できる • コンテナや Vagrant などを利用して構築した環境に、Remote development で接続して開発できる

Slide 6

Slide 6 text

Visual Studio Code の開発環境の例コンテナランタイム Visual Studio Code コンテナインスタンス Remote development

Slide 7

Slide 7 text

でもまだ"運用でカバー"がなくならない？デバッグ中だけど、もう出かけないと。途中のコード、push したくないなぁ… ノートPC、しばらく使ってなかったから npm install 終わらん！出先で更新したとこ、取込み忘れてた！コンフリクト直さないと、めんどうだーーしかも、モバイル回線…

Slide 8

Slide 8 text

そこで、 GitHub Codespaces

Slide 9

Slide 9 text

GitHub Codespaces とは

Slide 10

Slide 10 text

Visual Studio Code の開発環境の例コンテナランタイム Visual Studio Code コンテナインスタンス Remote development

Slide 11

Slide 11 text

GitHub Codespaces の場合 Visual Studio Code codespace インスタンス Remote development GitHub Codespaces

Slide 12

Slide 12 text

GitHub Codespaces の場合 Visual Studio Code codespace インスタンス GitHub Codespaces ウェブブラウザ

Slide 13

Slide 13 text

GitHub Codespaces の場合 Visual Studio Code codespace インスタンス GitHub Codespaces

Slide 14

Slide 14 text

GitHub Codespaces の場合 Visual Studio Code codespace インスタンス dev GitHub Codespaces codespace インスタンス review

Slide 15

Slide 15 text

実際に触ってみるデモ

Slide 16

Slide 16 text

GitHub Codespaces ポイント

Slide 17

Slide 17 text

使い慣れたインタフェースから使う • ブラウザ、または対応したエディタやIDEから接続し、あたかもローカルで開発している感覚で利用できる • Visual Studio Code • JetBrains IDE • JupyterLab

Slide 18

Slide 18 text

使い慣れたインタフェースから使う • 参考: Visual Studio Code で GitHub Codespaces を使用する - GitHub Docs • 参考: JetBrains IDE で GitHub Codespaces を使う - GitHub Docs • 参考: 機械学習のための GitHub Codespaces の概要 - GitHub Docs

Slide 19

Slide 19 text

テンプレートから環境を立上げられる • テンプレートから立ち上げる場合は、リポジトリがなくても利用できる

Slide 20

Slide 20 text

リポジトリから環境を立ち上げられる • リポジトリを clone した状態で環境が立ち上がる

Slide 21

Slide 21 text

必要な環境を数クリックで作成できる • 認証済み、またはコミュニティによるベースイメージが提供されている • Features （後述）で主要なCLIや言語をインストールできる

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

誰でも同じ環境を立ち上げられる • 作成した環境設定（devcontainer.json）をリポジトリに置いて共有することで、誰でも同じ環境を立ち上げることができる

Slide 25

Slide 25 text

インスタンスはアカウントごと • 立ち上げたインスタンスはアカウントごとに分離されている • コラボレーションには、Live share やポートフォワーディング（後述）の公開を利用できる

Slide 26

Slide 26 text

インスタンスのスペックを選択できる

Slide 27

Slide 27 text

マシンタイプマシンタイプメモリストレージ備考 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 申請が必要

Slide 28

Slide 28 text

localhost へのポートフォワーディング • localhost にポートフォワードしてくれるため、あたかもローカル環境のようにシームレスに開発できる • パブリック、または Organization 内向けに公開することもできる

Slide 29

Slide 29 text

Dev container でカスタマイズ • Features による簡単インストール • VS Code のエクステンションのインストール • OnCreateCommand などのライフサイクルへのフック • Dockerfile を用いた、より自由なカスタマイズ

Slide 30

Slide 30 text

Dev container でカスタマイズ

Slide 31

Slide 31 text

prebuild で素早く立上げる

Slide 32

Slide 32 text

課金体系 • 利用時間とストレージの使用量で算出 • 個人アカウントには、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

Slide 33

Slide 33 text

課金の様子 ※ GitHub Pro の無料利用枠が適用されています

Slide 34

Slide 34 text

課金体系（Organization） • Organization 配下のリポジトリで codespace を立ち上げる場合、 Organization の設定によって、課金される対象が異なる Organization の spending limit 説明 0 codespace を起動するユーザーに課金される 1 以上、または Unlimited spending 上限に達するまでは、Organization に課金される

Slide 35

Slide 35 text

管理 • Dotfiles • シークレット • アカウント • リポジトリ • GPG verification • デフォルトのエディタ • アイドルタイムアウト • 保持期間 • リージョン

Slide 36

Slide 36 text

管理（Organization） • 利用可能なメンバー • ポリシー • マシンタイプ • ポートの公開範囲 • アイドルタイムアウトの最大値 • 保持期間の最大値 • 利用可能なイメージの制限 • API により、メンバーの利用状況を取得できる

Slide 37

Slide 37 text

管理（Organization）

Slide 38

Slide 38 text

GitHub Codespaces をよりセキュアに使いたい

Slide 39

Slide 39 text

その1 ベースイメージのレジストリ

Slide 40

Slide 40 text

ベースイメージの取得は、基本パブリック codespace インスタンス GitHub Codespaces mcr.microsoft.com hub.docker.com パブリックリポジトリ

Slide 41

Slide 41 text

ベースイメージの取得は、基本パブリック codespace インスタンス GitHub Codespaces mcr.microsoft.com hub.docker.com パブリックリポジトリ

Slide 42

Slide 42 text

解: セキュアなレジストリからイメージ取得 codespace インスタンス GitHub Codespaces ghcr.io プライベートリポジトリ .azurecr.io など

Slide 43

Slide 43 text

解: セキュアなレジストリからイメージ取得 codespace インスタンス GitHub Codespaces ghcr.io プライベートリポジトリ .azurecr.io など

Slide 44

Slide 44 text

解: セキュアなレジストリからイメージ取得 • 参考: codespace がプライベートイメージレジストリにアクセスできるようにする - GitHub Docs

Slide 45

Slide 45 text

その2 codespace からの接続

Slide 46

Slide 46 text

codespace からの接続は、基本パブリック codespace インスタンス GitHub Codespaces Visual Studio Code インターネット経由

Slide 47

Slide 47 text

codespace からの接続は、基本パブリック codespace インスタンス GitHub Codespaces Visual Studio Code インターネット経由

Slide 48

Slide 48 text

解1:GitHub CLI によるネットワークブリッジ • 手元のマシンで GitHub CLI extension を利用することで、そのマシンをネットワークゲートウェイとして動作させ、codespace からリソースにアクセスできる

Slide 49

Slide 49 text

解2: codespace からVPN接続 codespace インスタンス GitHub Codespaces Visual Studio Code プライベートネットワーク VPN経由

Slide 50

Slide 50 text

解2: codespace からVPN接続 codespace インスタンス GitHub Codespaces Visual Studio Code プライベートネットワーク VPN経由

Slide 51

Slide 51 text

Codespaces と Azure を VPNで接続するデモ

Slide 52

Slide 52 text

codespace からVPN接続 codespace インスタンス GitHub Codespaces Visual Studio Code プライベートネットワーク VPN経由

Slide 53

Slide 53 text

codespace から Azure へVPN接続 codespace インスタンス GitHub Codespaces Visual Studio Code Microsoft Azure VPN経由 Virtual Network Virtual network gateway

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Azure のリソース構成(VPN) サービス説明 Virtual network 仮想ネットワーク Virtual network gateway 今回は、Point-to-site VPNゲートウェイとして利用する。 DNS Private resolver 仮想ネットワーク内の既定の Private DNS を介すルーティングを提供する。これにより、仮想ネットワークに接続された Private endpoint を名前解決できるようになる。

Slide 56

Slide 56 text

Azure のリソース構成（PaaS）サービス説明 Cosmos DB ドキュメント型データベース。今回は、Private endpoint を使用して仮想ネットワークにのみ接続する。 Private endpoint Azure の PaaS サービスを仮想ネットワークに接続させる。DNS zone と連携して名前解決を提供する。 Functions app デモアプリケーションのAPIを実装する。VNet integration により仮想ネットワークへのアウトバンドを通す。 Static Web App デモアプリケーションのフロントエンドを実装する。これはパブリックに公開するが、上記の Functions app にリンクを接続することで、データベースへの読み書きを行える。

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

codespace の構成 • OpenVPN などを含むベースイメージを作成しておく • シークレットに、Azure Virtual network gateway から発行した vpnconfig.ovpn の情報を格納しておく • initializeCommand で上記 vpnconfig.ovpn の情報を読み出し、インスタンス内に保存する • postStartCommand で OpenVPN を接続する

Slide 59

Slide 59 text

codespace の構成 • 参考: Installing and working with the devcontainer CLI (visualstudio.com) • 参考: プライベートネットワークへの接続 - GitHub Docs • 参考: codespaces-contrib/codespaces-openvpn (github.com)