developers summit 2023 9-D-1 development environment

by Kazumi IWANAGA

Slide 1

Slide 1 text

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

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

わたしの開発環境移り変わり 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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

苦悩のストーリーなんなら、同じプロジェクトでも差異エディタ、IDE ランタイム SDK packages plugins, extensions フレームワークデータベース … + エディタ、IDE ランタイム SDK packages plugins, extensions フレームワークデータベース … + バージョンが違うパッケージが足りないデータベースにつながらない

Slide 10

Slide 10 text

苦悩のストーリーなんなら、同じプロジェクトでも差異エディタ、IDE ランタイム SDK packages plugins, extensions フレームワークデータベース … + エディタ、IDE ランタイム SDK packages plugins, extensions フレームワークデータベース … + 個人設定へのこだわり拡張機能やキーバインドの違い

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

GitHub Codespaces とは

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

実際に触ってみるデモ

Slide 30

Slide 30 text

GitHub Codespaces ポイント

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 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 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Dev container でカスタマイズ

Slide 45

Slide 45 text

prebuild で素早く立上げる

Slide 46

Slide 46 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 47

Slide 47 text

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

Slide 48

Slide 48 text

使用状況（CSV）

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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