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
VS CodeのDev Containersを活用して開発を効率化しよう
Search
Ishimoto Tatsuya
February 14, 2024
Technology
1
830
VS CodeのDev Containersを活用して開発を効率化しよう
ニフクラエンジニアミートアップに登壇した際に画面に投影したスライドです。
https://fujitsufjct.connpass.com/event/308463/
Ishimoto Tatsuya
February 14, 2024
Tweet
Share
More Decks by Ishimoto Tatsuya
See All by Ishimoto Tatsuya
Visual Studio CodeのDev Containersを使って開発環境構築してみよう(2024/09/07版)
ismt7
0
190
AWS AmplifyではじめるDevOps
ismt7
0
77
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
93
Visual Studio Code リモート開発 スタートガイド
ismt7
1
46
Visual Studio Codeで始めるリモート開発入門
ismt7
1
510
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
87
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
99
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
76
DevOpsを始めるために知っておきたい技術_クライアント開発環境_編___1_.pdf
ismt7
0
38
Other Decks in Technology
See All in Technology
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
210
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
330
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
140
本が全く読めなかった過去の自分へ
genshun9
0
920
Geminiとv0による高速プロトタイピング
shinya337
0
250
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.1k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
15k
プライベートクラウドでの効率的な証明書配布戦略 / Efficient Certificate Distribution Strategy in Private Cloud
lycorptech_jp
PRO
0
110
Model Mondays S2E03: SLMs & Reasoning
nitya
0
350
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
450
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
930
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
2
580
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Become a Pro
speakerdeck
PRO
28
5.4k
Being A Developer After 40
akosma
90
590k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Docker and Python
trallard
44
3.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
BBQ
matthewcrist
89
9.7k
The Invisible Side of Design
smashingmag
301
51k
Facilitating Awesome Meetings
lara
54
6.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Transcript
VS Codeの Dev Containersを活用し て 開発を効率化しよう 日本仮想化技術株式会社 VirtualTech.jp 2024/02/14 1
資料は後ほど公開します 2
3 自己紹介
開発環境とは? 今日の話では • 開発環境とは、エンジニアそれぞれが開発するために作る環境のことを指します • 本番(Production)、検証(Staging)、開発(Development)の開発環境のことはないです 4
開発環境どこに作ってますか? 5
• 直接インストールして構築 • VirtualBoxやDockerなどを使った仮想環境 開発環境どこに作ってますか? ローカルマシン 6 リモートマシン • ニフクラやAWSの仮想サーバー上に構築
• 社内のオンプレミスサーバー
開発環境の変化 7
クラウドや仮想環境が主流ではなかった時 • パソコンに直接環境を作って、必要なツールや実行環境を継ぎ足していく • 時々壊して夜な夜な泣きそうになりながら直す • 新メンバーが開発環境を作って走り始めるのも一苦労 • 手順書があってもだいたい古い and
動かない(手順書あっただけマシかも状態) • エラーが出ても「なにそれ?俺のところでは出たことないから分からないな...」と言われる クラウドや仮想環境が当たり前に存在していた時 • 新しく開発環境を作る時はコンテナ技術をフル活用して作る • 細かい構築手順を伝えなくても「うちDocker使ってるんで」と言うとだいたい話が通じる • 開発環境の再現性が高まることで、端末や実行環境の選択が自由になる • チャレンジングな変更を加えて壊しても、コンテナごと作り直せばいい 開発環境の変化 8
意味ある単位で分て整理して 9
通常開発と検証用として分ける 10
コンテナ技術 + VS Codeで もっと手軽にコンテナを使えるように 11
リモート開発って知ってますか? 12
リモート開発とは? • Visual Studio Codeが提供している機能の1つ • コンテナやリモートマシン、Windows Subsystem for Linux(WSL)上に開発環境を構築できる機
能 • ソースコードや実行環境、CLIツールなどはすべて接続先の環境上で保持&実行 メリット • ローカルマシンの構成に影響を与えないように、開発環境を分離できる ◦ ローカルにソースコードを置く必要がない • 開発プロジェクトのメンバー間で一貫した開発環境を維持することができる • VS Codeのほぼフル機能が使えて、デスクトップ版と同じUI/UXの恩恵が受けられる 13 https://code.visualstudio.com/docs/remote/remote-overview
使い方はいろいろ 14
使い方はいろいろ 15
8/26 Open Developers Conference 2023でハンズオン 16 開催終了 ニフクラを使わせて頂きました サポートされたてほやほやのTerraformで N台分環境を作ったり潰したりできるようにしま
した(弊社のインフラ担当)
Dev Containersとは? 17
Dockerコンテナ上に開発環境を構築する時に使う拡張機能 拡張機能を組み合わせることでリモートマシンのDockerコンテナ上に構築も可能 メリットは? • コンテナ技術のメリットを活かして、開発環境の再現性を高められる ◦ 端末や実行場所を柔軟に変えやすい • コンテナの立ち上げから拡張機能のインストールまでやってくれる ◦
参加してすぐに開発を始められる デメリットは? • コンテナに割り当てられたスペックに依存 ◦ コンテナ数が増えてくると本体のマシンスペックがもっと欲しくなる • 個別化しにくい ◦ 開発環境の標準化はしやすいが、個人的な設定やカスタマイズを入れにくい Dev Containersとは? 18
どうやって使うの? 19
Dockerは使える前提として... 20
個別で 拡張機能のインストール 拡張機能パックから 21
コマンドパレットを開き「add dev…」と入力して、「開発コンテナー: 開発コンテナー構成ファイル を追加...」を選択 22
「ワークスペースに構成を追加する」を選択 23
「定義済みのコンテナー構成定義から...」を選択 24
「typescript」と入力して「Node.js & TypeScript」を選択 25
「20-bullseye(既定)」を選択 画像は作成当時のものであるため実際の表示と異なる場合がありますが、 バージョンが異なる場合は、末尾に既定と表示されているものを選択してください 26
Dev Containersの標準機能で有効化できる機能を検索して有効化します。 今回は、「AWS CLI」を選択して、OKをクリックします 27
右下に通知ダイアログが表示されたら「コンテナーで再度開く」をクリックします 28
左下の青い部分がこのように表示されたら Dev Containersを使ってDockerコンテナ上で開発環境が実行されていることを意味しています。 29
実際の設定ファイルのイメージ 30
主な設定項目 31 設定項目 説明 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": {}, } } } 32 設定項目 説明 extensions Dev Containersでインストールするべき拡張機能のIDを指定できる settings settings.jsonファイルで定義できる内容が指定できる
33 設定ファイルのスコープ 3パターン • ユーザー(青枠) ◦ すべてのワークスペースで有効 ◦ プロファイル機能で切り替えも可能 ◦
GitHubを通じて他者と共有されない ▪ プロジェクト外に作成される • ワークスペース(緑枠) ◦ ワークスペース内のみで有効 ◦ GitHubを通じて共有することが可能 ▪ .vscode/settings.json • フォルダ(赤枠) ◦ 特定のフォルダのみに有効 ◦ Multi-root Workspaces使用時のみ ◦ GitHubを通じて共有することが可能 ▪ プロジェクト配下にpjA/.vscode/settings.json
おわり 34