Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Windows上でのVSCodeを前提としたポータブルな開発環境構築の一例
Search
Kentaro Takaki
November 15, 2022
0
120
Windows上でのVSCodeを前提としたポータブルな開発環境構築の一例
DevelopContainerの効能を簡単に紹介します。
Kentaro Takaki
November 15, 2022
Tweet
Share
More Decks by Kentaro Takaki
See All by Kentaro Takaki
JAWS-UG-Nagoya-202501-Demo1
kennytakaki
0
35
自動車産業向けに公開しているAWSのソリューションを調べてみる
kennytakaki
0
530
名古屋ーメディアjaws
kennytakaki
0
37
コンテナに詳しくないのにレビューアになってしまったので観点と方法を整理したい
kennytakaki
1
85
CloudWatchに本格的に入門する_20230711
kennytakaki
0
130
AWS Lake Formation によるデータアクセス管理
kennytakaki
0
250
IoT_と位置情報系サービスてんこ盛り回-202301-JAWS-UG-Nagoya.pdf
kennytakaki
0
670
IoT と位置情報系サービスてんこ盛り回-2023-01-JAWS-UG-Nagoya
kennytakaki
1
160
JAWS-UG 名古屋(2023-01 IoTとモビリティ特集-予告)
kennytakaki
0
200
Featured
See All Featured
Faster Mobile Websites
deanohume
306
31k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
For a Future-Friendly Web
brad_frost
176
9.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Optimizing for Happiness
mojombo
376
70k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
How STYLIGHT went responsive
nonsquared
98
5.3k
KATA
mclloyd
29
14k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Transcript
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がどうなるか? • WSLでからのディレクトリを用意 • WSLのUbuntu側からVSCodeを起動する 7
設定するとVSCodeがどうなるか? WSL上の環境をモニタリングし ている。 • WSLを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