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
870
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
210
AWS AmplifyではじめるDevOps
ismt7
0
82
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
97
Visual Studio Code リモート開発 スタートガイド
ismt7
1
50
Visual Studio Codeで始めるリモート開発入門
ismt7
1
540
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
96
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
110
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
82
DevOpsを始めるために知っておきたい技術_クライアント開発環境_編___1_.pdf
ismt7
0
43
Other Decks in Technology
See All in Technology
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
360
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
290
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.8k
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
440
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
420
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
6
760
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
540
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
19
9.3k
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
100
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
760
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
160
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
220
Featured
See All Featured
Docker and Python
trallard
45
3.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
What's in a price? How to price your products and services
michaelherold
246
12k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
Embracing the Ebb and Flow
colly
87
4.8k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
A Modern Web Designer's Workflow
chriscoyier
696
190k
The Language of Interfaces
destraynor
161
25k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Building an army of robots
kneath
306
46k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
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