$30 off During Our Annual Pro Sale. View Details »

developers summit 2023 9-D-1 development environment

Kazumi IWANAGA
February 09, 2023

developers summit 2023 9-D-1 development environment

Developers Summit 2023 9-D-1 「もう悩まされない開発環境、プロジェクトで統一した環境をいつでもどこでも」でお話した資料です。
https://event.shoeisha.jp/devsumi/20230209/session/4155/

Kazumi IWANAGA

February 09, 2023
Tweet

More Decks by Kazumi IWANAGA

Other Decks in Technology

Transcript

  1. もう悩まされない開発環境、
    プロジェクトで統一した環境を
    いつでもどこでも
    Developers Summit 2023 Inspired

    View Slide

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

    View Slide

  3. わたしの開発環境移り変わり
    2006 ~ 2012
    組込み開発
    C/C++
    • Visual Studio
    • Carbide(Eclipseベース)
    • サクラエディタ
    • 秀丸
    Androidアプリ開発
    Java
    • Eclipse
    2013 ~ 2020
    ウェブアプリケーション開発
    Ruby
    • emacs
    PHP
    • Sublime Text
    • PhpStorm
    • Visual Studio Code
    Python
    • Visual Studio Code?
    2021 ~
    ウェブアプリケーション開発
    JavaScript/TypeScript
    • Visual Studio Code

    View Slide

  4. 苦悩のストーリー
    苦労の絶えない"開発環境"

    View Slide

  5. 苦悩のストーリー
    そもそも、開発環境とは
    エディタ、IDE
    +
    ランタイム
    SDK
    packages
    plugins, extensions
    フレームワーク
    データベース

    View Slide

  6. 苦悩のストーリー
    開発環境におけるトラブル

    View Slide

  7. 苦悩のストーリー
    プロジェクトごとに異なる環境
    エディタ、IDE
    ランタイム
    SDK
    packages
    plugins, extensions
    フレームワーク
    データベース

    +
    エディタ、IDE
    ランタイム
    SDK
    packages
    plugins, extensions
    フレームワーク
    データベース

    +
    エディタ、IDE
    ランタイム
    SDK
    packages
    plugins, extensions
    フレームワーク
    データベース

    +

    View Slide

  8. 苦悩のストーリー
    なんなら、同じプロジェクトでも差異
    エディタ、IDE
    ランタイム
    SDK
    packages
    plugins, extensions
    フレームワーク
    データベース

    +
    エディタ、IDE
    ランタイム
    SDK
    packages
    plugins, extensions
    フレームワーク
    データベース

    +

    View Slide

  9. 苦悩のストーリー
    なんなら、同じプロジェクトでも差異
    エディタ、IDE
    ランタイム
    SDK
    packages
    plugins, extensions
    フレームワーク
    データベース

    +
    エディタ、IDE
    ランタイム
    SDK
    packages
    plugins, extensions
    フレームワーク
    データベース

    +
    バージョンが違う
    パッケージが足りない
    データベースにつながらない

    View Slide

  10. 苦悩のストーリー
    なんなら、同じプロジェクトでも差異
    エディタ、IDE
    ランタイム
    SDK
    packages
    plugins, extensions
    フレームワーク
    データベース

    +
    エディタ、IDE
    ランタイム
    SDK
    packages
    plugins, extensions
    フレームワーク
    データベース

    +
    個人設定へのこだわり
    拡張機能やキーバインドの違い

    View Slide

  11. 苦悩のストーリー
    開発環境の統一を図る

    View Slide

  12. 苦悩のストーリー
    手順書でしっかりサポート?
    • バージョンなどの小さな差異の追随が疎かになり
    がち
    • 手順書のメンテナンスが疎かになりがち
    • 新規構築と更新で手順が異なったり

    View Slide

  13. 苦悩のストーリー
    IDE の設定を共有?
    • .vimrc
    • .emacs
    • IntelliJ IDEA/PyCharm/PhpStorm Settings Sync
    • Visual Studio Code Settings Sync
    • Visual Studio の設定共有は複雑で、秘伝のたれになってしまうらし
    い…

    View Slide

  14. 苦悩のストーリー
    仮想環境やコンテナを使って環境を統一
    コンテナ ランタイム
    エディタ コンテナ インスタンス

    View Slide

  15. 苦悩のストーリー
    レビューやデバッグで増える環境

    View Slide

  16. 苦悩のストーリー
    レビューやデバッグで増える環境
    • ブランチを切り替えて対応するも…
    • 書き途中のコードを退避し忘れ、レビューに影響
    • 書き途中のコードの退避するも、ミスして変更分をロスト…
    • ブランチを戻し忘れて、違うブランチにコミットしてしまったり
    • 結局 git clone し直すも…
    • .env などの設定を忘れて起動して、小一時間悩んだり…

    View Slide

  17. 苦悩のストーリー
    "運用でカバー"から
    抜け出したい

    View Slide

  18. リモート開発環境への注目

    View Slide

  19. これまでの Web IDE は用途が限られる
    • CodePen
    • CodeSandbox
    • AWS Cloud9
    • Microsoft Azure - App Service Editor (現在は終了)

    View Slide

  20. リモート開発環境に期待
    • Gitpod
    • JetBrains Space
    • Google Cloud - Cloud Workstations (preview)
    • Amazon CodeCatalyst (preview) - Dev Environments
    • GitHub Codespaces

    View Slide

  21. リモート開発環境に期待
    • Gitpod
    • JetBrains Space
    • Google Cloud - Cloud Workstations (preview)
    • Amazon CodeCatalyst (preview) - Dev Environments
    • GitHub Codespaces

    View Slide

  22. 今日ご紹介するのはこちら、
    GitHub Codespaces

    View Slide

  23. GitHub Codespaces とは

    View Slide

  24. コンテナを使って環境を統一
    コンテナ ランタイム
    エディタ コンテナ インスタンス

    View Slide

  25. GitHub Codespaces の場合
    エディタ
    GitHub Codespaces
    codespace インスタンス

    View Slide

  26. GitHub Codespaces の場合
    エディタ
    GitHub Codespaces
    codespace インスタンス
    ウェブブラウザ

    View Slide

  27. GitHub Codespaces の場合
    エディタ
    GitHub Codespaces
    codespace インスタンス

    View Slide

  28. GitHub Codespaces の場合
    エディタ
    GitHub Codespaces
    codespace インスタンス dev
    エディタ codespace インスタンス review

    View Slide

  29. 実際に触ってみるデモ

    View Slide

  30. GitHub Codespaces ポイント

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. Dev container でカスタマイズ

    View Slide

  45. prebuild で素早く立上げる

    View Slide

  46. 課金体系
    • 利用時間とストレージの使用量で算出
    • 個人アカウントには、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
    32 core $2.88
    ストレージ量 ストレージ量の価格/月
    1 GB $0.07

    View Slide

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

    View Slide

  48. 使用状況(CSV)

    View Slide

  49. 課金体系(Organization)
    • Organization 配下のリポジトリで codespace を立ち上げる場合、
    Organization の設定によって、課金される対象が異なる
    説明 Organization の設定
    上限に達するまでは、Organization に課金される • そのユーザーに対して codespaces の利用が許
    可されている
    • spending limit の設定が 1 以上、または
    Unlimited spending
    codespace を起動するユーザーに課金される • 上記を満たさない

    View Slide

  50. 課金周りのケース紹介
    ストレージの無料枠を使い切ったとき
    メール通知の例
    spending limit に達したとき
    spending limit に達した状態では、インスタンスを
    起動できない(Organization の例)
    Codespaces インスタンス一覧画面の表記
    (Organizationでの例)

    View Slide

  51. 課金に関する資料
    • GitHub Codespaces の請求について - GitHub Docs
    • GitHub Codespaces の使用状況の表示 - GitHub Docs
    • GitHub Codespaces の使用制限の管理 - GitHub Docs

    View Slide

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

    View Slide

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

    View Slide

  54. 管理(Organization)

    View Slide

  55. 余談、ブログやドキュメント
    執筆にも便利です

    View Slide

  56. ぜひ体験してみてね!
    GitHub Codespaces

    View Slide

  57. Thank you so much🍩.

    View Slide