Windows上でのVSCodeを前提とした ポータブルな開発環境構築の一例 2022/11/16 高木 建太朗 1

この資料の目的と前提 • この資料の目的は以下の項目に対する一例とその効能を示すことです。 1. 使い捨て可能な開発環境の構築 2. 複数人で開発する際の環境の共有 • この資料はWindows+WSL2+VSCode+Dockerの利用を前提とします。 • この資料は書く技術のコンフィギュレーションなどの詳細は説明しません。 • この資料は細かい手順は説明しません各ページの参照先を確認してください。 2

背景 • 開発機に対して様々なツールをインストールしてしまい、環境に何が入っているか コントロールできないことが往々にしてある。 • また、それらのアップデートや、新しい技術の調査に億劫になってしまう。 • 一人で開発しており、開発環境の共有を前提にできておらず、新規メンバーが入っ てきた場合にしどろもどろしてしまう。 Python3.8 Node14.x AWS CLI 2.8.x ... Pythonのバージョン上げて既存スクリプト動くか？ Nodeのバージョンなんだっけ？ AWSのCLIのバージョン上げるのめんどいな。 やばい、準備していない。後輩に必要な ツール群ってなんだっけ…？ あぁ面倒くさい。 先輩、何から準 備したりいいで しょうか？ 3

背景 • 開発機に対して様々なツールをインストールしてしまい、環境に何が入っているか コントロールできないことが往々にしてある。 • また、それらのアップデートや、新しい技術の調査に億劫になってしまう。 • 一人で開発しており、開発環境の共有を前提にできておらず、新規メンバーが入っ てきた場合にしどろもどろしてしまう。 Python3.8 Node14.x AWS CLI 2.8.x ... Pythonのバージョン上げて既存スクリプト動くか？ Nodeのバージョンなんだっけ？ AWSのCLIのバージョン上げるのめんどいな。 やばい、準備していない。後輩に必要な ツール群ってなんだっけ…？ あぁ面倒くさい。 先輩、何から準 備したりいいで しょうか？ 今日はこれらの課 題への一助となる 技術を紹介します。 4

Development Containers という技術 • 今回紹介する技術はDevelopment Containersと呼びます。 • Containerに梱包した開発環境で開発環境やツールを利用して開発します。 • 作業環境として、この資料ではVSCodeから当該Containerで作業する設定を紹介します。 #なんてことはない。Dockerのイメージ内をVSCode覗くだけです。 WSL VSCode Image A Image B Image C 切替 コンテナ化して おくことで配布 しやすくなる。 5

大まかな準備 • 以下を準備します。 （参照は付けるけど、完全なものじゃないので適宜補間してね） 1. WSL2 で適当なUbuntuをインストールする（今回は22.04.1 LTS を想定)。 2. WSL2 のUbuntu上でDockerを利用可能にする。 https://zenn.dev/canard0328/articles/wsl2-docker-vscode https://zenn.dev/holliy/scraps/48fd5bcdc0bade 3. ホストWindowsでVSCodeを利用可能にする。 普通にインストールしてね。 4. ホストWindowsのVSCodeのDev Contariners拡張をインストールする。 https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers 6

設定するとVSCodeがどうなるか？ • WSＬでからのディレクトリを用意 • WSLのUbuntu側からVSCodeを起動する 7

設定するとVSCodeがどうなるか？ WSL上の環境をモニタリングし ている。 • WSＬをVSCodeから利用している。 8

設定するとVSCodeがどうなるか？ • 拡張機能によってDevelopContainer用の設定を作成することが可能になっている Develop Container用の設定を 作成するメニューが利用可能 9

設定するとVSCodeがどうなるか？ • 今回はTypeScript用のベースイメージを利用する 10

設定するとVSCodeがどうなるか？ • 追加ツールとしてAWS CLIをインストールする。 11

設定するとVSCodeがどうなるか？ • 設定ファイル(devcontainer.json)が出力される。 12

設定するとVSCodeがどうなるか？ • 設定ファイルに基づいたコンテナイメージを立ち上げて接続する。 設定ファイルで定義されるコン テナを利用して、開発ディレク トリをオープンする 13

設定するとVSCodeがどうなるか？ • しばらくするとイメージビルドが終わって接続される。 14

設定するとVSCodeがどうなるか？ • 当然この環境下にはTypeScriptコンパイラがインストールされている。 15

設定するとVSCodeがどうなるか？ • 当然この環境下にはAWSのCLIがインストールされている 16

設定するとVSCodeがどうなるか？ • 当たり前の確認であるが、ホストしているWSL側には tscやAWS CLIは存在しない。 17

つまりは…？ • TypeScriptとAWS CLIが利用可能なDockerコンテナイメージの中でVSCodeを用いた環境が手に入った。 • このコンテナ内なら、ランタイムを好きにいじってもホストWindowやWSL のUbuntuに影響はない。 • 必要なプラグインやツールが整備されていれば、作製した設定ファイル(devcontainer.json)を共有して 開発環境の再構築が用意にできる。 WSL VSCode Image A Image B Image C 切替 この中にTypeScriptとAWS CLI が梱包されて利用可能な状態と なった。 18

つまりは…？ • TypeScriptとAWS CLIが利用可能なDockerコンテナイメージの中でVSCodeを用いた環境が手に入った。 • このコンテナ内なら、ランタイムを好きにいじってもホストWindowやWSL のUbuntuに影響はない。 • 必要なプラグインやツールが整備されていれば、作製した設定ファイル(devcontainer.json)を共有して 開発環境の再構築が用意にできる。 WSL VSCode Image A Image B Image C 切替 この中にTypeScriptとAWS CLI が梱包されて利用可能な状態と なった。 結論、すごく便利！！ （だし、DockerDesktopも必要ない） 19

まとめ • Develop Containerを利用して以下に対する一例とその効能を示しました。 1. 使い捨て可能な開発環境の構築 2. 複数人で開発する際の環境の共有 20

今後 • すごく便利なことはわかったが、他にもいろいろ設定する必要がある。 EX1. sshのコンフィグファイルはコンテナ内に梱包したくない →エージェントがあるので設定しましょう。 EX2. AWSのCLIの認可情報などを置きたくない。 →イメージ内で一時認証を暗号化して環境変数で取り扱う技術があります。 (aws-vault＠調査中) 今後はこういったところも説明しようと思います。 21