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
850
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
80
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
96
Visual Studio Code リモート開発 スタートガイド
ismt7
1
49
Visual Studio Codeで始めるリモート開発入門
ismt7
1
530
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
91
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
100
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
80
DevOpsを始めるために知っておきたい技術_クライアント開発環境_編___1_.pdf
ismt7
0
42
Other Decks in Technology
See All in Technology
Infrastructure as Prompt実装記 〜Bedrock AgentCoreで作る自然言語インフラエージェント〜
yusukeshimizu
1
160
MCPサーバーを活用したAWSコスト管理
arie0703
0
110
AI関数が早くなったので試してみよう
kumakura
0
330
Amazon S3 Vectorsは大規模ベクトル検索を低コスト化するサーバーレスなベクトルデータベースだ #jawsugsaga / S3 Vectors As A Serverless Vector Database
quiver
2
950
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
29
14k
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
3
1.3k
いま、あらためて考えてみるアカウント管理 with IaC / Account management with IaC
kohbis
1
220
Lambda management with ecspresso and Terraform
ijin
2
170
UDDのススメ - 拡張版 -
maguroalternative
1
610
AI時代の大規模データ活用とセキュリティ戦略
ken5scal
0
160
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
vaaaaanquish
34
16k
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
100
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Balancing Empowerment & Direction
lara
2
570
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Gamification - CAS2011
davidbonilla
81
5.4k
KATA
mclloyd
32
14k
Building Applications with DynamoDB
mza
96
6.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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