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

2 自己紹介

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

クリーン開発とは？ 4

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

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

Visual Studio Codeとは？ 7

● 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

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

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

リモート開発とは？ 11

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

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

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

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

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

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

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

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

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

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

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

Codespaceを作成しよう 23

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

25

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Remote - SSH 43

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

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

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

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

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

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

最後に 50

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

おわり 52