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
75
Windows上でのVSCodeを前提としたポータブルな開発環境構築の一例
DevelopContainerの効能を簡単に紹介します。
Kentaro Takaki
November 15, 2022
Tweet
Share
More Decks by Kentaro Takaki
See All by Kentaro Takaki
コンテナに詳しくないのにレビューアになってしまったので観点と方法を整理したい
kennytakaki
1
73
CloudWatchに本格的に入門する_20230711
kennytakaki
0
81
AWS Lake Formation によるデータアクセス管理
kennytakaki
0
160
IoT_と位置情報系サービスてんこ盛り回-202301-JAWS-UG-Nagoya.pdf
kennytakaki
0
590
IoT と位置情報系サービスてんこ盛り回-2023-01-JAWS-UG-Nagoya
kennytakaki
1
130
JAWS-UG 名古屋(2023-01 IoTとモビリティ特集-予告)
kennytakaki
0
170
BLEAで異常検出と通知を実装してインシデントの訓練まで行ってみた
kennytakaki
0
97
AWS最小権限での運用に向けた技術調査
kennytakaki
0
68
Lambda関数からExtensionsAPIを通してParameterStoreのSecureStringを取得してみた
kennytakaki
0
490
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
44
9.7k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Designing Experiences People Love
moore
136
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Gamification - CAS2011
davidbonilla
76
4.6k
For a Future-Friendly Web
brad_frost
172
9k
A designer walks into a library…
pauljervisheath
200
23k
Producing Creativity
orderedlist
PRO
337
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Making the Leap to Tech Lead
cromwellryan
124
8.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