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
110
Windows上でのVSCodeを前提としたポータブルな開発環境構築の一例
DevelopContainerの効能を簡単に紹介します。
Kentaro Takaki
November 15, 2022
Tweet
Share
More Decks by Kentaro Takaki
See All by Kentaro Takaki
自動車産業向けに公開しているAWSのソリューションを調べてみる
kennytakaki
0
470
名古屋ーメディアjaws
kennytakaki
0
32
コンテナに詳しくないのにレビューアになってしまったので観点と方法を整理したい
kennytakaki
1
83
CloudWatchに本格的に入門する_20230711
kennytakaki
0
110
AWS Lake Formation によるデータアクセス管理
kennytakaki
0
220
IoT_と位置情報系サービスてんこ盛り回-202301-JAWS-UG-Nagoya.pdf
kennytakaki
0
630
IoT と位置情報系サービスてんこ盛り回-2023-01-JAWS-UG-Nagoya
kennytakaki
1
160
JAWS-UG 名古屋(2023-01 IoTとモビリティ特集-予告)
kennytakaki
0
180
BLEAで異常検出と通知を実装してインシデントの訓練まで行ってみた
kennytakaki
0
130
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
A Tale of Four Properties
chriscoyier
156
23k
Adopting Sorbet at Scale
ufuk
73
9k
Optimizing for Happiness
mojombo
376
69k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Agile that works and the tools we love
rasmusluckow
327
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
360
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Why Our Code Smells
bkeepers
PRO
334
57k
Optimising Largest Contentful Paint
csswizardry
32
2.9k
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