ローカル環境を汚したくない！新規メンバーの開発環境を構築する手間や時間を短くしたい！コードレビューや掛け持ちプロジェクトで環境の切り替えが面倒！そんな悩みを解決できるかも！？ Visual Stuio CodeのDev Containersを使った開発環境の構築方法をライブデモ形式で紹介します。
Visual Studio CodeのDev Containersを使って開発環境構築してみるよ(ライブデモ編)日本仮想化技術株式会社VirtualTech.jp2023/09/061
View Slide
2自己紹介
8/26 Open Developers Conference 2023でハンズオン3開催終了
きっかけ4
VS CodeのDev Containersの機能を有効に活用するためにはどうしたらいいのだろう？5
今日の話6
初回の環境構築にかかる時間を減らしたい● 全ての源泉。これを突破できないと何もかもが始められない● 1〜数日はかかってしまうが、1回限りなのでなかなか有用な手順書も整備されていないことも...● 副業やスポットだと更に時間が貴重になってくるVisual Studio Code + Gitがあれば始められるDev Containers + リモートマシン環境の手軽さを知ってもらう今日の話①7
開発中に差し込まれるレビューと待ち時間をもっと生産的に使えるようにしたい● 開発途中に優先度の高いレビューが差し込まれた時の開発環境の一時的な変更○ アプリを動かしながらレビューは必要だからこその手間○ キリがいいところまで待ってもらうとレビューが遅いと問題になる苦しさ● レビュー戻りを待っている間に自分の作業への戻りにくさ○ コーディングのみであれば困らないが、デバッグ中やテスト中だと何もできない感○ 開発→レビュー→開発→レビュー→…を繰り返すのも手間コンテナ技術のメリット活かして完全に分離された開発環境とレビュー環境を複数用意することにより、切り替えるだけで選択的に作業ができる手軽さ今日の話②8
デモの前に少しだけ9
開発環境の全体像と流れ● Remote - SSH と Dev containersの組み合わせ技でリモートマシンを使った開発環境● 流れ○ Remote - SSHを使ってリモートマシンに入る○ Dev Containersを使ってリモートマシンのDockerコンテナ上に開発環境を構築● APIサーバーの開発○ Python(FastAPI) + PostgreSQL10
リモートマシンの準備11担当者配布用のVMを作成開発者VM環境にアクセス
流れ12
先にデモへビルド中の待ち時間にスライドに戻ります13
①1からdevcontainer.jsonを作ってみる14
②GitHubから既存リポジトリをクローンして開発環境を構築する15
Visual Studio Codeとは？16
● Visual Studio Code=VS Code、code● 主な機能○ シンタックスハイライト、スニペット、インテリセンス、リファクタリング、デバッグ、テスト● 元々はHTML5ベースのWebブラウザーで動くエディター&ツールフレームワークとして開発○ Internet Explorer(IE)やMicrosoft EdgeのF12開発者ツール など● ブラウザー版で一定の成功を納めたのち、より高みを目指してデスクトップ版の開発にも着手○ Electron上で構築● 2015年04月 Build 2015(Microsoftの開発者向けカンファレンス)でプレビュー版が発表○ 「Code editing, redefined」(コードエディターの再定義)のスローガンを掲げている○ 統合開発環境(IDE)とテキストエディターの中間的な位置付け● 2015年11月にオープンソースとして公開○ オープンソースな場で開発を行い、ブランド製品としてリリースしている(Chromiumと同じようなスタイル)○ Visual Studioからより高速に開発サイクルを回すために機能を絞って軽量なエディターとして作られた● 拡張機能から拡張APIを通じてほぼすべての機能にアクセス可能● リリースサイクルは、毎月第1金曜あたり。○ Youtubeでリリースパーティがライブ配信されるVisual Studio Codeとは？17
Stack Overflow Developer Surveyで見る人気ランキング18Stack Overflow Developer Survey(2023)Stack Overflow Developer Survey(2022)New!!
19https://code.visualstudio.com/docs/getstarted/userinterface
20月刊 VS Code通信を書き始めましたhttps://devops-blog.virtualtech.jp/entry/20230810/1691635500
リモート開発とは？21
● Visual Studio Codeが提供している機能の1つ● リモートマシンや仮想環境、WSL上などローカルマシン意外に開発環境を構築できる機能● 初回アクセス時にVS Code Serverが自動でインストール● ソースコードや実行環境、CLIツールなどの実行に関わる部分はすべてリモート環境上に構築● Webのフロントエンド/バックエンドの役割分担に似ているリモート開発とは？22https://code.visualstudio.com/docs/remote/remote-overview
主な拡張機能の種類リモート開発向けに拡張機能パックをインストール● Remote - SSH○ ローカルマシンからSSH接続でリモートマシンを開発環境として使用● Remote - Tunnels○ ローカルマシンからトンネル経由でリモートマシンを開発環境として使用● Dev Containers○ ローカルマシンからDocker上のコンテナを開発環境として使用する● WSL○ WindowsのWSLを開発環境として使用するGitHub Codespaces● GitHubが提供しているCodespacesの環境を開発環境として使用する23
Dev Containersとは● リモート開発機能の1つ● ローカルマシンのDockerコンテナ上に開発環境を構築する役割を担う拡張機能● Remote - SSHなどの拡張機能と組み合わせてリモートマシンのDockerコンテナ上に構築も可能24
開発環境の選択ローカルマシンとリモートマシンでの環境構築の違いは？Docker環境をローカルにインストールするかどうかの違いリモートマシン使用時にDockerが必要なケースはあるので、全く不要とはならない25自分でインストールが必要なものVisual StudioCodeGit Docker実行環境(Pythonなど)開発環境ローカルマシン ● ● ●リモートマシン ● ●
● ローカルマシンの構成に影響を与えない● 開発PJのメンバー間での一貫した開発環境の維持● 接続先でもVS Codeのフル機能が使用可能● 事前にプリセットできるのでDocker操作に慣れていない人にも提供しやすいリモート開発のメリットとデメリットメリット26デメリット● ネットワークの通信品質に依存● リモートマシン環境によってはコスト増
Dev containersを1から始める27
Dev containersを1から始める● 拡張機能をインストール● 「dev containers: Add Dev Container Configuration Files...」を起動(コマンドパレットより)28
拡張機能を使用する際の注意点● なにかとお世話になることが多いからこそできるだけ安全に使いたい● マーケットプレイスからインストールしても100%安全ではない○ 2021年に拡張機能を悪用したサイバー攻撃がニュースで話題○ マーケットプレイス側で配信時などにチェックされているが「羊の姿をしたオオカミ」が潜んでいる可能性もある○ 拡張機能にコード署名の付与開始して、移行期間中■ v1.75でアナウンスされた■ 2022/11以降のアップロード分は必須。他は順次ポイント● マーケットプレイスからダウンロード● 認証バッチが付いている○ 2021年に追加された機能○ Marketplace側で配信者とドメイン所有者が一致しているか確認済み● ダウンロード数○ 同じ名前でも大きく違う場合があり、気づくきっかけになる29https://code.visualstudio.com/updates/v1_62#_verified-extension-publishers
実際の設定ファイルのイメージ30
主な設定項目31設定項目 説明name Dev container上で表示する名前image 開発環境に使用するコンテナイメージを選択build (別スライドにて)features コンテナ内で使用する追加ツールを定義。VS CodeやGitHubのUI上から選択することも可能。使用できるツールの一覧：https://containers.dev/featuresforwardPorts (省略)initializeCommand コンテナを立ち上げる前にホストマシン側で任意のコマンドを実行できる。postCreateCommand コンテナ作成後にコンテナ内で任意のコマンドを実行できる。初めて開発を始める際に、お決まりで実行するnpm installなどを設定しておくと便利(似たものにonCreateCommand、updateContentCommandなどがある)customizations (別スライドにて)remoteUser (省略)
customizationsで設定できること● インストールすべき拡張機能の指定やVS Codeの設定が定義できる● settings.jsonでは、インデントサイズや使用する静的解析ツールなどが定義できる○ 設定はできるが.vscode/settings.jsonに設定は寄せておいた方がいいかも{"customizations": {"vscode": {"extensions": [],"settings": {},}}}32設定項目 説明extensions GitHub Codespacesでインストールするべき拡張機能のIDを指定できるsettings settings.jsonファイルで定義できる内容が指定できる
33設定ファイルのスコープ 3パターン● ユーザー(青枠)○ すべてのワークスペースで有効○ プロファイル機能で切り替えも可能○ GitHubを通じて他者と共有されない■ プロジェクト外に作成される● ワークスペース(緑枠)○ ワークスペース内のみで有効○ GitHubを通じて共有することが可能■ .vscode/settings.json● フォルダ(赤枠)○ 特定のフォルダのみに有効○ Multi-root Workspaces使用時のみ○ GitHubを通じて共有することが可能■ プロジェクト配下にpjA/.vscode/settings.json
独自で定義したイメージを使用することはできる？A：できるDockerfileやdocker-compose.ymlのファイルを作成してから、構成ファイルに次の設定項目を追加することで、使用することができます。参照されるファイルの場所は、構成ファイルが格納されている場所が起点。設定により変更も可能。Dockerfileの場合{“build”: {“dockerfile”: “Dockerfile”,“context”: “.”}}34docker-compose.ymlの場合{“dockerComposeFile”: “docker-compose.yml”,“service”: “devcontainer”,“workspaceFolder”: “/workspaces/${localWorkspaceFolderBasename}”}
まとめ35
● VS Code + Gitのみで始められる開発環境● コンテナ技術(Docker)とVS Codeのリモート開発機能(Dev Containers)を使用して実現● デモ1では、1からdevcontainer.jsonを作成しました● デモ2では、ワークショップの内容と同じ内容で紹介しました○ 開発環境を立ち上げてアプリケーションを実行するまで○ 開発中に差し込みレビューを対応するための新しい開発環境を立ち上げるまで● 初めて開発を始める時の手軽さとレビュー時の環境切り替え易さは伝わりましたか？まとめ36
おわり37
devops_vtj
keiko713
line_developers_tw
ufried
radkmb
bengo4com
oracle4engineer
sansantech
takasehideki
lmi
i35_267
kenchan
coconala_engineer
reverentgeek
pauljervisheath
jnunemaker
panda_program
paulrobertlloyd
akmur
bkeepers
jonrohan
maggiecrowley
chriscoyier
ammeep
quramy