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

Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門

Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門

6/21開催のとことんDevOps勉強会で登壇した際に画面に投影したスライドです。

Ishimoto Tatsuya

June 21, 2023
Tweet

More Decks by Ishimoto Tatsuya

Other Decks in Technology

Transcript

  1. Visual Studio Codeと
    GitHub Codespaces
    で始めるクリーン開発環境
    日本仮想化技術株式会社
    VirtualTech.jp
    2023/06/21
    1

    View Slide

  2. 2
    自己紹介

    View Slide

  3. ● クリーン開発環境とは
    ● Visual Studio Codeとは
    ● リモート開発とは
    ● リモート開発環境の選択肢
    ● GitHub Codespacesを使ったリモート開発環境の始め方
    今回の話
    3

    View Slide

  4. クリーン開発とは?
    4

    View Slide

  5. 綺麗な設計をしたい・・・クリーンアーキテクチャ
    綺麗なコードを書きたい・・・クリーンコード
    綺麗な開発環境を作りたい・・・クリーンデベロップメント!?
    ● 開発プロジェクト内で開発環境の統一や配布をもっと手軽にしたいけど
    ○ 秘伝のタレ化した開発環境を他の人に共有するのはちょっと...
    ● 副業や案件で環境を柔軟に切り替えたいけど...
    ○ ローカルマシンにあれこれ環境を構築するのはちょっと...
    ○ 古いキャッシュやバージョン違いで悩まされ、時間を浪費したくないし...
    ● 一時的にGPU強めなマシンで作業したい...
    ● iPadで開発してみたい...
    開発環境の再現性とポータブル性を高めていく
    クリーン開発環境とは?
    5

    View Slide

  6. その日から開発スタートしたい
    6
    09:00 10:00 13:00 18:00 19:00

    View Slide

  7. Visual Studio Codeとは?
    7

    View Slide

  8. ● Microsoftが開発しているエディタの1つ
    ● Visual Studio Code=VS Code、code
    ● 主な機能
    ○ シンタックスハイライト、スニペット、インテリセンス、リファクタリング、デバッグ、テスト
    ● 元々はHTML5ベースのWebブラウザーで動くエディター&ツールフレームワークとして開発
    ○ Internet Explorer(IE)やMicrosoft EdgeのF12開発者ツール など
    ● 2015年04月 Build 2015(Microsoftの開発者向けカンファレンス)でプレビュー版が発表
    ○ 「Code editing, redefined」(コードエディターの再定義)のスローガンを掲げている
    ○ 統合開発環境(IDE)とテキストエディターの中間的な位置付け
    ● 2015年11月にオープンソースとして公開
    ○ オープンソースな場で開発を行い、ブランド製品としてリリースしている(Chromiumと同じようなスタイル)
    ○ Visual Studioからより高速に開発サイクルを回すために機能を絞って軽量なエディターとして作られた
    ● 拡張機能から拡張APIを通じてほぼすべての機能にアクセス可能
    ● リリースサイクルは、毎月第1金曜あたり。
    ○ Youtubeでリリースパーティがライブ配信される
    Visual Studio Codeとは?
    8

    View Slide

  9. Stack Overflow Developer Surveyで見る人気ランキング
    9
    Stack Overflow Developer Survey(2023)
    Stack Overflow Developer Survey(2022)
    New!!

    View Slide

  10. 10
    https://code.visualstudio.com/docs/getstarted/userinterface

    View Slide

  11. リモート開発とは?
    11

    View Slide

  12. リモート開発とは?
    ● Visual Studio Codeが提供している機能の1つ
    ● コンテナやリモートマシン、Windows Subsystem for Linux(WSL)上に開発環境を構築できる機

    ● ソースコードや実行環境、CLIツールなどはすべてリモート環境上に構築する
    メリット
    ● ローカルマシンの構成に影響を与えないように、開発環境を分離できる
    ○ ローカルにソースコードを置く必要がない
    ● 開発プロジェクトのメンバー間で一貫した開発環境を維持することができる
    ● ローカルマシン以外で実行されているアプリケーションをデバッグできる
    12
    https://code.visualstudio.com/docs/remote/remote-overview

    View Slide

  13. リモート開発環境の選択肢
    13

    View Slide

  14. リモート開発環境の選択肢
    14
    開発環境の場所 説明
    ローカルマシン ≠仮想環境 仮想化技術などを用いずに直接マシン上に実行環境やツールなどをインストー
    ルして構築した環境
    =仮想環境 仮想化技術を用いて仮想環境上に実行環境やツールなどをインストールして構
    築した環境
    クラウド上 AWS EC2などを用いてクラウド環境上に実行環境やツールなどをインストールして
    構築した環境
    GCP GCEなどを用いてクラウド環境上に実行環境やツールなどをインストールして
    構築した環境
    Azure Virtual Machinesなどを用いてクラウド環境上に実行環境やツールなどをインス
    トールして構築した環境
    ホスティングサービス GitHub Codespaces GitHubが提供しているサービス上で構築した環境
    オンプレミス 社内サーバー/DC (省略)
    Raspberry Pi (省略)
    休眠端末 (省略)

    View Slide

  15. 必要な拡張機能と組み合わせ
    15

    View Slide

  16. 必要な拡張機能の種類
    VS Codeは、拡張機能をインストールして使い勝手をよくしていくもの
    リモート開発向けに拡張機能パックをインストール
    ● Remote - SSH
    ○ ローカルマシンからSSH接続でリモートマシンを開発環境として使用
    ● Remote - Tunnels
    ○ ローカルマシンからトンネル経由でリモートマシンを開発環境として使用
    ● Dev Containers
    ○ ローカルマシンからDocker上のコンテナを開発環境として使用する
    ● WSL
    ○ WindowsのWSLを開発環境として使用する
    GitHub Codespaces
    ● GitHubが提供しているCodespacesの環境を開発環境として使用する
    16

    View Slide

  17. ※1 仮想化技術の1つであるDockerやVirtualboxを前提
    ※2 AWSやGCP、Azureなどを前提
    ※3 GitHubが提供するホスティングサービスを前提
    開発環境の選択肢
    17
    拡張機能
    Remote - SSH Remote - Tunnel Dev Containers GitHub Codespaces
    (ローカルマシン上) - - - -
    ローカルマシンの仮想環境上※1
    ⚫ - ⚫ -
    クラウド上※2
    ⚫ ⚫ ⚫ -
    ホスティングサービス上※3 - - - ⚫
    オンプレミス ⚫ ⚫ ⚫ -

    View Slide

  18. GitHub Codespacesを使った
    リモート開発の始め方
    18

    View Slide

  19. GitHub Codespacesとは
    19
    ● クラウドでホストされる開発環境
    ○ GitHubのDockerコンテナ内でホストされる
    ○ Ubuntuイメージから作成
    ■ 人気の高いプログラミング言語の実行環境がプリインストール済み
    ● 従量課金制
    ○ 毎月無料枠の付与あり
    ■ 無料枠を超えて使用する場合には、設定変更が必要
    ● スペック
    ○ 最小:2コア、8GB RAM、32GBストレージ
    ○ 最大:32コア、64GB RAM、128GBストレージ
    ● Configuration-as-Code:CaC
    ○ 構成ファイルでプロジェクトをカスタマイズできる
    ● 自動停止
    ○ 非アクティブ状態が30分間続くと自動で実行停止(時間は、設定により変更可能)

    View Slide

  20. 20
    https://docs.github.com/ja/codespaces/overview

    View Slide

  21. A:できる
    ● 自動ポート転送により、Codespaces内で実行されているTCPポートにアクセスできる
    ● 手動で転送設定も可能
    ● ポート公開設定は、プライベートが初期設定
    ○ ① 自分のみ
    ○ ② 組織内メンバーの限定アクセス
    ○ ③ URLを知っている人の限定アクセス
    Webアプリを実行したらブラウザからアクセスできる?
    21

    View Slide

  22. A:できる
    ● 次の場合は、追加設定不要で接続できる
    ○ ローカルホストポートを使用している場合
    ○ リモートドメインのパブリックポートにアクセスする場合
    ● リモートのプライベートポートに接続する場合は、認証情報をリクエストに付与する必要あり
    ○ フロントエンドとバックエンドでコードスペースを分けている場合などのケース
    APIクライアントから接続することはできる?
    22

    View Slide

  23. Codespaceを作成しよう
    23

    View Slide

  24. ①-1 GitHub上からデフォルト設定で作成
    ● 「Codeボタン」>「Codespacesタブ」をクリック
    ● 「Create codespace on main」をクリック
    ①-2 GitHub上からスペックやブランチを指定して作成
    ● 「・・・」から「New with options…」クリック
    ② Visual Studio Codeから作成
    ● 拡張機能から作成できる(省略)
    Codespaceの作成
    24

    View Slide

  25. 25

    View Slide

  26. デスクトップ版のVS Codeから起動するようにするには?
    A:設定変更でデスクトップ版VS Codeから起動できる
    GitHubのデフォルト設定ではWeb版のVS Codeで起動するが、
    個人設定画面から設定変更できる
    26

    View Slide

  27. 構成ファイルを作成しよう
    27

    View Slide

  28. 拡張機能をインストール
    https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces
    28

    View Slide

  29. 拡張機能を使用する際の注意点
    ● なにかとお世話になることが多いからこそできるだけ安全に使いたい
    ● マーケットプレイスからインストールしても100%安全ではない
    ○ 2021年に拡張機能を悪用したサイバー攻撃がニュースで話題
    ○ マーケットプレイス側で配信時などにチェックされているが
    「羊の姿をしたオオカミ」が潜んでいる可能性もある
    ○ 拡張機能にコード署名の付与開始して、移行期間中
    ■ v1.75でアナウンスされた
    ■ 2022/11以降のアップロード分は必須。他は順次
    ポイント
    ● マーケットプレイスからダウンロード
    ● 認証バッチが付いている
    ○ 2021年に追加された機能
    ○ Marketplace側で配信者とドメイン所有者が一致しているか確認済み
    ● ダウンロード数
    ○ 同じ名前でも大きく違う場合があり、気づくきっかけになる
    29
    https://code.visualstudio.com/updates/v1_62#_verified-extension-publishers

    View Slide

  30. コマンドパレットから起動
    ● コマンドパレットから設定ファイルの作成を開始
    ○ ⌘ Command + ⇧Shift + P
    ● いくつかの質問に答える
    30

    View Slide

  31. 構成ファイルの作成方法を選択
    ● 上段
    ○ 既に作成済みの構成ファイルを編集する場合に選択する
    ● 下段
    ○ 新しい構成ファイルを作成する場合に選択する
    31

    View Slide

  32. ベースとするイメージを選択
    ● チェックマークのバッチがついているものはDev Container拡張機能が公式で提供しているもの
    ● 右端のインフォメーションアイコンをクリックして作成者が信頼できるか確認を
    32

    View Slide

  33. Nodeのバージョンを選択
    ● Node.jsは最新版と推奨版の2バージョンを配信している
    ● 今回は推奨版を使用(資料作成時点では18.xが最新)
    33

    View Slide

  34. 追加機能を選択
    選択しなくてもOK
    ● コンテナのベースイメージに追加するツールを選択することで、手軽にセットアップできる
    ○ AWS CLIやDockerコマンド、GitHub CLIなど
    34

    View Slide

  35. 構成ファイルを作成したら再構築
    ● 構成ファイルを変更したら、再構築するまでは環境に反映されない
    35

    View Slide

  36. 構成ファイルの書き方を理解しよう
    36

    View Slide

  37. 実際の設定ファイルのイメージ
    37

    View Slide

  38. 主な設定項目
    38
    設定項目 説明
    name Dev container上で表示する名前
    image 開発環境に使用するコンテナイメージを選択
    build (別スライドにて)
    features コンテナ内で使用する追加ツールを定義。
    VS CodeやGitHubのUI上から選択することも可能。
    使用できるツールの一覧:https://containers.dev/features
    forwardPorts (省略)
    initializeCommand コンテナを立ち上げる前にホストマシン側で任意のコマンドを実行できる。
    postCreateCommand コンテナ作成後にコンテナ内で任意のコマンドを実行できる。
    初めて開発を始める際に、お決まりで実行するnpm installなどを設定しておくと便利
    (似たものにonCreateCommand、updateContentCommandなどがある)
    customizations (別スライドにて)
    remoteUser (省略)

    View Slide

  39. customizationsで設定できること
    ● インストールすべき拡張機能の指定やVS Codeの設定が定義できる
    ● settings.jsonでは、インデントサイズや使用する静的解析ツールなどが定義できる
    ○ 設定はできるが.vscode/settings.jsonに設定は寄せておいた方がいいかも
    {
    "customizations": {
    "vscode": {
    "extensions": [],
    "settings": {},
    }
    }
    }
    39
    設定項目 説明
    extensions GitHub Codespacesでインストールするべき拡張機能のIDを指定できる
    settings settings.jsonファイルで定義できる内容が指定できる

    View Slide

  40. 40
    設定ファイルのスコープ 3パターン
    ● ユーザー(青枠)
    ○ すべてのワークスペースで有効
    ○ プロファイル機能で切り替えも可能
    ○ GitHubを通じて他者と共有されない
    ■ プロジェクト外に作成される
    ● ワークスペース(緑枠)
    ○ ワークスペース内のみで有効
    ○ GitHubを通じて共有することが可能
    ■ .vscode/settings.json
    ● フォルダ(赤枠)
    ○ 特定のフォルダのみに有効
    ○ Multi-root Workspaces使用時のみ
    ○ GitHubを通じて共有することが可能
    ■ プロジェクト配下にpjA/.vscode/settings.json

    View Slide

  41. 独自で定義したイメージを使用することはできる?
    A:できる
    Dockerfileやdocker-compose.ymlのファイルを作成してから、構成ファイルに次の設定項目を追加す
    ることで、使用することができます。
    参照されるファイルの場所は、構成ファイルが格納されている場所が起点。設定により変更も可能。
    Dockerfileの場合
    {
    “build”: {
    “dockerfile”: “Dockerfile”,
    “context”: “.”
    }
    }
    41
    docker-compose.ymlの場合
    {
    “dockerComposeFile”: “docker-compose.yml”,
    “service”: “devcontainer”,
    “workspaceFolder”: “/workspaces/${localWorkspaceFolderBasename}”
    }

    View Slide

  42. キー情報や個人固有な情報はどのように扱えばいい?
    A:Codespaces用のシークレットを使用
    GitHub Actionsでお馴染みのシークレット機能がCodespacesでも使用できる
    環境が立ち上がったら、都度設定することも可能だが手間
    似た仕組みにdevcontainer.envがあるが、Codespaces以外での使用がメイン
    42

    View Slide

  43. Remote - SSH
    43

    View Slide

  44. Remote - SSH
    ● リモートマシンにSSHを使って接続するための拡張機能
    ● 開発サーバーや検証サーバーに直接入って、ログファイルなどを確認できる
    ● CLIコマンドに不慣れな人やファイル編集やログ調査などでUI機能の恩恵が受けられる
    ● 開発環境というよりは、CLI操作より少しGUI寄りの恩恵を受けながら作業したい時向け
    ● SSHで接続してから接続先でDev containersを使った組み合わせ技も可能
    44

    View Slide

  45. リモートな環境を用意(AWS編)
    ● AWSでEC2を作成して、SSHの接続情報を取得
    45

    View Slide

  46. SSHの設定ファイルを追加
    SSHの設定ファイル(~/.ssh/config)に追加
    Host remotessh
    HostName ec2-xxxx.ap-northeast-1.compute.amazonaws.com
    User ec2-user
    IdentityFile ~/.ssh/xxxxx.pem
    46

    View Slide

  47. VS Codeから作成する場合
    47
    SSHコマンドを貼り付けると自動でConfigファイルを作成してくれる

    View Slide

  48. SSHでEC2に接続
    ● アクティビティバー>リモートエクスプローラーを選択
    ● リモートを選択して接続
    48

    View Slide

  49. 接続完了
    ● Remote: SSHで接続した場合は、このように見える
    ● RaspberryPi 4などを活用することも可能(2GB or 4GBあたり)
    ● 活用例
    ○ JetsonNANOにBE環境、社内のVM上にFE環境を構築したり
    49

    View Slide

  50. 最後に
    50

    View Slide

  51. ● GitHub CodespacesやDev containerを使用している人は、個人利用止まりが多い
    ● プロジェクトやチーム単位で導入を検討していくところが増えてほしい
    ● 新しい使い方なので少し発想を柔らかくして考えると意外とアイデアが出てくる
    ○ 新しい開発環境を模索する際に、現環境への影響を気にせずに攻めた検証ができる
    ● スルメを噛むように触るほど面白くなってきたので、今後も継続的に検証と情報収集は続ける
    最後に
    51

    View Slide

  52. おわり
    52

    View Slide