Visual Studio Codeの Dev Containersを使って 開発環境構築してみるよ (ライブデモ編) 日本仮想化技術株式会社 VirtualTech.jp 2023/09/06 1

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) + PostgreSQL 10

リモートマシンの準備 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で見る人気ランキング 18 Stack Overflow Developer Survey(2023) Stack Overflow Developer Survey(2022) New!!

19 https://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のフロントエンド/バックエンドの役割分担に似ている リモート開発とは？ 22 https://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 Studio Code Git 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側で配信者とドメイン所有者が一致しているか確認済み ● ダウンロード数 ○ 同じ名前でも大きく違う場合があり、気づくきっかけになる 29 https://code.visualstudio.com/updates/v1_62#_verified-extension-publishers

実際の設定ファイルのイメージ 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 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”: “.” } } 34 docker-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