GitHub Codespacesで改善する チームの開発環境

https://micug.jp/event/gofastandrobustwithgithub/

Transcript

1. GitHub Codespacesで改善する チームの開発環境
   2022/12/06 MICUG GitHub Part
   Yuta Matsumura (Alterbooth Inc.)
   Copyright © Alterbooth Inc. All Rights Reserved.
   

   View Slide

2. 松村 優大 (Yuta Matsumura)
   Chief Technical Architect (C#, PHP, Azure)
   Microsoft MVP (Developer Technologies)
   #fukuten #devblogradio の中の人
   @tsubakimoto_s
   Currently working for
   Copyright © Alterbooth Inc. All Rights Reserved.
   

   View Slide

3. Copyright © Alterbooth Inc. All Rights Reserved.
   

   View Slide

4. こんな経験ありませんか？
   これ作ったので
   動かしてみて
   動かない・・・
   Copyright © Alterbooth Inc. All Rights Reserved.
   

   View Slide

5. こんな経験ありませんか？
   開発環境
   • Windows
   • Node.js 14
   • VS Code
   • 手動インストール
   • …
   開発環境
   • macOS
   • Node.js 18
   • IDE
   • homebrew
   • …
   開発環境の作り方が
   バラバラ
   Copyright © Alterbooth Inc. All Rights Reserved.
   

   View Slide

6. 開発環境の揃え方
   • 同じ PC の支給
   • 環境構築のマニュアル化
   • セットアップスクリプトの配布
   • 共通の仮想イメージの配布
   • 共通のコンテナーイメージの配布
   Copyright © Alterbooth Inc. All Rights Reserved.
   

   View Slide

7. Visual Studio Code + Extensions
   • 開発環境を「リモート」にもつ仕組み
   WSL or Containers
   ▼
   • 開発環境としてコンテナーを準備する (devcontainer)
   • https://code.visualstudio.com/docs/remote/containers
   • Visual Studio Code + 拡張機能パック
   • Docker (Windows / macOS / Engine)
   Copyright © Alterbooth Inc. All Rights Reserved.
   

   View Slide

8. devcontainer の始め方①
   Copyright © Alterbooth Inc. All Rights Reserved.
   

   View Slide

9. devcontainer の始め方①
   1. アプリケーションを VS Code で開く
   2. Dockerfile を準備する
   3. コマンドパレットを開く
   Dev Containers: Open Folder in Container…
   4. Dockerfile のあるフォルダを指定する
   5. devcontainer.json のできあがり
   Copyright © Alterbooth Inc. All Rights Reserved.
   

   View Slide

10. Copyright © Alterbooth Inc. All Rights Reserved.
    

    View Slide

11. devcontainer の始め方②
    Copyright © Alterbooth Inc. All Rights Reserved.
    

    View Slide

12. devcontainer の始め方②
    1. アプリケーションを VS Code で開く
    2. コマンドパレットを開く
    3. devcontainer 構成の設定
    Dev Containers: Add Development Container Configuration Files...
    4. プリセットから選択
    Show All Definitions... > Definitions
    5. コンテナーで開き直す
    Reopen in Container
    Copyright © Alterbooth Inc. All Rights Reserved.
    

    View Slide

13. 開発に必要なツールも一緒にインストールすることができます
    Copyright © Alterbooth Inc. All Rights Reserved.
    

    View Slide

14. .devcontainer/
    .devcontainer
    ├ base.Dockerfile
    │ ベースイメージ構成 (参考用)
    ├ devcontainer.json
    │ コンテナー構成
    └ Dockerfile
    Copyright © Alterbooth Inc. All Rights Reserved.
    

    View Slide

15. ▶コンテナー構成
    ▶VS Code構成
    ▶転送ポート番号
    ▶コンテナー作成後コマンド
    ▶コンテナー内ユーザー
    Copyright © Alterbooth Inc. All Rights Reserved.
    

    View Slide

16. GitHub Codespaces
    Copyright © Alterbooth Inc. All Rights Reserved.
    

    View Slide

17. GitHub Codespaces
    Copyright © Alterbooth Inc. All Rights Reserved.
    GitHub 上にホストされる仮想マシンを使用して、
    オンライン上に開発環境を構築することができる。
    devcontainer.json をリポジトリに保管している場合、
    devcontainer.json の構成がセットアップされる。
    

    View Slide

18. その他のクラウド上の開発環境
    • Azure Virtual Desktop
    • 開発環境の構築は別途必要
    • Windows OSのみ
    • Azure Virtual Machine
    • 開発環境の構築は別途必要
    • Windows OS, Linux OS
    • Microsoft Dev Box (Preview)
    • Azureサービスだが、Azure AD P1のユーザーライセンスが必要
    • https://learn.microsoft.com/ja-jp/azure/dev-box/quickstart-configure-dev-
    box-service#prerequisites
    Copyright © Alterbooth Inc. All Rights Reserved.
    

    View Slide

19. GitHub Codespaces のマシン種別と価格
    Copyright © Alterbooth Inc. All Rights Reserved.
    https://docs.github.com/ja/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces
    

    View Slide

20. “組織” で GitHub Codespaces を使う利点
    • 開発環境を統一することができる
    • Git で開発環境を管理することができる
    • 開発用 PC の調達が必須でなくなる
    Copyright © Alterbooth Inc. All Rights Reserved.
    

    View Slide

21. GitHub Enterprise Cloud / Server
    個人所有のGitHub アカウントは、組織の管理下から外れちゃう？
    ▶自社 ID 基盤と SAML 連携を行うことで、組織アカウントとの
    シングルサインオンを構成可能。
    Copyright © Alterbooth Inc. All Rights Reserved.
    組織アカウント
    ログイン
    Enterprise
    Repository, Issue, Pull requests
    Actions, Projects, Wiki
    Codespaces, Advanced Security
    

    View Slide

22. GitHub Codespaces のセキュリティ
    • 分離された仮想マシンや仮想ネットワーク
    • Codespace にアクセスできるのは作成者のみ
    • 外部からのアクセス不可
    • ポートフォワーディング機能
    • シークレット管理
    Copyright © Alterbooth Inc. All Rights Reserved.
    https://docs.github.com/en/codespaces/codespaces-reference/security-in-github-codespaces
    

    View Slide

23. Codespace のパーソナライズ
    VSCode 設定の同期 dotfiles リポジトリの反映
    Copyright © Alterbooth Inc. All Rights Reserved.
    https://docs.github.com/en/codespaces/customizing-your-codespace/personalizing-github-codespaces-for-your-account
    

    View Slide

24. Appendix
    • GitHub Universe 2022
    • https://github.blog/jp/2022-11-10-everything-new-from-github-universe-2022/
    • Azure AD + GitHub Enterprise
    • https://learn.microsoft.com/ja-jp/azure/active-directory/saas-apps/github-ae-tutorial
    • https://learn.microsoft.com/ja-jp/azure/active-directory/saas-apps/github-enterprise-cloud-
    enterprise-account-tutorial
    • GitHub Codespaces
    • https://docs.github.com/ja/billing/managing-billing-for-github-codespaces/about-billing-
    for-github-codespaces
    • https://docs.github.com/en/codespaces/codespaces-reference/security-in-github-
    codespaces
    • https://docs.github.com/en/codespaces/customizing-your-codespace/personalizing-github-
    codespaces-for-your-account
    • https://aadojo.alterbooth.com/entry/2022/08/24/095308
    Copyright © Alterbooth Inc. All Rights Reserved.
    

    View Slide

25. Copyright © Alterbooth Inc. All Rights Reserved.
    https://www.alterbooth.com/products/ghec/
    https://prtimes.jp/main/html/rd/p/000000084.000043685.html
    

    View Slide

26. Copyright © Alterbooth Inc. All Rights Reserved.
    より多くの人にもっとクラウドを楽しんでほしい。
    つまらない世界からもっと
    刺激のある世界へ変化させよう！
    

    View Slide