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
580
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
AWS AmplifyではじめるDevOps
ismt7
0
36
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
56
Visual Studio Code リモート開発 スタートガイド
ismt7
1
15
Visual Studio Codeで始めるリモート開発入門
ismt7
1
350
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
54
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
46
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
34
DevOpsを始めるために知っておきたい技術_クライアント開発環境_編___1_.pdf
ismt7
0
22
GitHubでプルリクエスト作成・レビュー・マージまでやってみよう
ismt7
0
79
Other Decks in Technology
See All in Technology
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.1k
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.6k
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
Clear Off the Table
cherdarchuk
89
320k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
A better future with KSS
kneath
231
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Gamification - CAS2011
davidbonilla
78
4.9k
Rails Girls Zürich Keynote
gr2m
93
13k
How to name files
jennybc
67
96k
For a Future-Friendly Web
brad_frost
173
9.2k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
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