Developers Summit 2023 9-D-1 「もう悩まされない開発環境、プロジェクトで統一した環境をいつでもどこでも」でお話した資料です。 https://event.shoeisha.jp/devsumi/20230209/session/4155/
もう悩まされない開発環境、プロジェクトで統一した環境をいつでもどこでもDevelopers Summit 2023 Inspired
View Slide
岩永かづみ / Kazumi IWANAGA• Microsoft MVP for Azure• ZEN Architects 所属• GitHub公認トレーナー• 得意な領域• Infrastructure as Code• GitHub Actions による自動化• 技術コミュニティ• Code Polaris / Hack Everything.• @dz_• @dzeyelid• @dzeyelid
わたしの開発環境移り変わり2006 ～ 2012組込み開発C/C＋＋• Visual Studio• Carbide(Eclipseベース)• サクラエディタ• 秀丸Androidアプリ開発Java• Eclipse2013 ～ 2020ウェブアプリケーション開発Ruby• emacsPHP• Sublime Text• PhpStorm• Visual Studio CodePython• Visual Studio Code?2021 ～ウェブアプリケーション開発JavaScript/TypeScript• Visual Studio Code
苦悩のストーリー苦労の絶えない"開発環境"
苦悩のストーリーそもそも、開発環境とはエディタ、IDE+ランタイムSDKpackagesplugins, extensionsフレームワークデータベース…
苦悩のストーリー開発環境におけるトラブル
苦悩のストーリープロジェクトごとに異なる環境エディタ、IDEランタイムSDKpackagesplugins, extensionsフレームワークデータベース…+エディタ、IDEランタイムSDKpackagesplugins, extensionsフレームワークデータベース…+エディタ、IDEランタイムSDKpackagesplugins, extensionsフレームワークデータベース…+
苦悩のストーリーなんなら、同じプロジェクトでも差異エディタ、IDEランタイムSDKpackagesplugins, extensionsフレームワークデータベース…+エディタ、IDEランタイムSDKpackagesplugins, extensionsフレームワークデータベース…+
苦悩のストーリーなんなら、同じプロジェクトでも差異エディタ、IDEランタイムSDKpackagesplugins, extensionsフレームワークデータベース…+エディタ、IDEランタイムSDKpackagesplugins, extensionsフレームワークデータベース…+バージョンが違うパッケージが足りないデータベースにつながらない
苦悩のストーリーなんなら、同じプロジェクトでも差異エディタ、IDEランタイムSDKpackagesplugins, extensionsフレームワークデータベース…+エディタ、IDEランタイムSDKpackagesplugins, extensionsフレームワークデータベース…+個人設定へのこだわり拡張機能やキーバインドの違い
苦悩のストーリー開発環境の統一を図る
苦悩のストーリー手順書でしっかりサポート？• バージョンなどの小さな差異の追随が疎かになりがち• 手順書のメンテナンスが疎かになりがち• 新規構築と更新で手順が異なったり
苦悩のストーリーIDE の設定を共有？• .vimrc• .emacs• IntelliJ IDEA/PyCharm/PhpStorm Settings Sync• Visual Studio Code Settings Sync• Visual Studio の設定共有は複雑で、秘伝のたれになってしまうらしい…
苦悩のストーリー仮想環境やコンテナを使って環境を統一コンテナ ランタイムエディタ コンテナ インスタンス
苦悩のストーリーレビューやデバッグで増える環境
苦悩のストーリーレビューやデバッグで増える環境• ブランチを切り替えて対応するも…• 書き途中のコードを退避し忘れ、レビューに影響• 書き途中のコードの退避するも、ミスして変更分をロスト…• ブランチを戻し忘れて、違うブランチにコミットしてしまったり• 結局 git clone し直すも…• .env などの設定を忘れて起動して、小一時間悩んだり…
苦悩のストーリー"運用でカバー"から抜け出したい
リモート開発環境への注目
これまでの Web IDE は用途が限られる• CodePen• CodeSandbox• AWS Cloud9• Microsoft Azure - App Service Editor （現在は終了）
リモート開発環境に期待• Gitpod• JetBrains Space• Google Cloud - Cloud Workstations (preview)• Amazon CodeCatalyst (preview) - Dev Environments• GitHub Codespaces
今日ご紹介するのはこちら、GitHub Codespaces
GitHub Codespaces とは
コンテナを使って環境を統一コンテナ ランタイムエディタ コンテナ インスタンス
GitHub Codespaces の場合エディタGitHub Codespacescodespace インスタンス
GitHub Codespaces の場合エディタGitHub Codespacescodespace インスタンスウェブブラウザ
GitHub Codespaces の場合エディタGitHub Codespacescodespace インスタンス devエディタ codespace インスタンス review
実際に触ってみるデモ
GitHub Codespaces ポイント
使い慣れたインタフェースから使う• ブラウザ、または対応したエディタやIDEから接続し、あたかもローカルで開発している感覚で利用できる• Visual Studio Code• JetBrains IDEs• JupyterLab (Visual Studio Code 拡張機能)
使い慣れたインタフェースから使う• 参考: 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 の無料利用枠が適用されています
使用状況（CSV）
課金体系（Organization）• Organization 配下のリポジトリで codespace を立ち上げる場合、Organization の設定によって、課金される対象が異なる説明 Organization の設定上限に達するまでは、Organization に課金される • そのユーザーに対して codespaces の利用が許可されている• spending limit の設定が 1 以上、またはUnlimited spendingcodespace を起動するユーザーに課金される • 上記を満たさない
課金周りのケース紹介ストレージの無料枠を使い切ったときメール通知の例spending limit に達したときspending limit に達した状態では、インスタンスを起動できない（Organization の例）Codespaces インスタンス一覧画面の表記（Organizationでの例）
課金に関する資料• GitHub Codespaces の請求について - GitHub Docs• GitHub Codespaces の使用状況の表示 - GitHub Docs• GitHub Codespaces の使用制限の管理 - GitHub Docs
管理• Dotfiles• シークレット• アカウント• リポジトリ• GPG verification• デフォルトのエディタ• アイドル タイムアウト• 保持期間• リージョン
管理（Organization）• 利用可能なメンバー• ポリシー• マシンタイプ• ポートの公開範囲• アイドル タイムアウトの最大値• 保持期間の最大値• 利用可能なイメージの制限• API により、メンバーの利用状況を取得できる
管理（Organization）
余談、ブログやドキュメント執筆にも便利です
ぜひ体験してみてね！GitHub Codespaces
Thank you so much🍩.
dzeyelid
yamamuteki
yuj1osm
masasuzu
pojiro
yutoy
rakus_dev
takanorig
masahirokawahara
niwatakeru
rilmayer
sat
s2terminal
iamctodd
marcduiker
phodgson
sferik
rasmusluckow
colly
kneath
mza
davidbonilla
shlominoach
addyosmani