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
760
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
160
AWS AmplifyではじめるDevOps
ismt7
0
64
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
81
Visual Studio Code リモート開発 スタートガイド
ismt7
1
32
Visual Studio Codeで始めるリモート開発入門
ismt7
1
460
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
77
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
75
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
64
DevOpsを始めるために知っておきたい技術_クライアント開発環境_編___1_.pdf
ismt7
0
29
Other Decks in Technology
See All in Technology
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4.4k
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
250
Pwned Labsのすゝめ
ken5scal
2
590
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
350
貧民的プログラミングのすすめ
kakehashi
PRO
2
300
MLflowはどのようにLLMOpsの課題を解決するのか
taka_aki
0
160
AIエージェント元年@日本生成AIユーザ会
shukob
1
280
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
1.3k
エンジニアのキャリアパスと、 その中で自分が大切にしていること
noteinc
3
3k
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
570
OCI IAM Identity Domains Entra IDとの認証連携設定手順 / Identity Domain Federation settings with Entra ID
oracle4engineer
PRO
1
1.3k
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
140
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
67
11k
Making Projects Easy
brettharned
116
6k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Adopting Sorbet at Scale
ufuk
75
9.2k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
BBQ
matthewcrist
87
9.5k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Automating Front-end Workflow
addyosmani
1369
200k
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