Visual Studio CodeのDev Containersを使って開発環境構築してみよう(2024/09/07版)

Open Developers Conference 2024内のハンズオンコンテンツ「9/7 VS Code Dev Containersで始めるリモート開発環境体験ハンズオン Vol2」で使用した資料です

Transcript

1. Visual Studio Codeの Dev Containersを使って 開発環境構築してみよう 日本仮想化技術株式会社 VirtualTech.jp 2024/09/07 1
2. はじめに この資料では、次のツールを使用しています。 • Visual Studio Code ◦ https://code.visualstudio.com/download • Docker Desktop ◦ https://www.docker.com/ja-jp/products/docker-desktop/ 2
3. 個別で 拡張機能のインストール 拡張機能パックから 3
4. コマンドパレットを開き「add dev…」と入力して、「開発コンテナ: 開発コンテナ構成ファイルを追加...」を選択 4
5. 「ワークスペースに構成を追加する」を選択 5
6. 「定義済みのコンテナー構成定義から...」を選択 6
7. 「typescript」と入力して「Node.js & TypeScript」を選択 7
8. 「20-bullseye(既定)」を選択 画像は作成当時のものであるため実際の表示と異なる場合がありますが、 バージョンが異なる場合は、末尾に既定と表示されているものを選択してください 8
9. ボリュームを選択 これ以降は配布している資料と同じ手順のため省略します 「新しいボリュームを作成します」も選択し、ボリューム名を入力します ボリューム名は区別をつけやすいようにリポジトリ名にしていますが、好きな名前をつけてもOK 9
10. フォルダー名を入力 デフォルトの値では、リポジトリ名が表示されており、変更せずにそのまま 10
11. Dev Containersの標準機能で有効化できる機能を検索して有効化します。 今回は、「AWS CLI」を選択して、OKをクリックします 11
12. 右下に通知ダイアログが表示されたら「コンテナーで再度開く」をクリックします 12
13. 左下の青い部分がこのように表示されたら Dev Containersを使ってDockerコンテナ上で開発環境が実行されていることを意味しています。 13
14. 実際の設定ファイルのイメージ 14
15. 主な設定項目 15 設定項目 説明 name Dev container上で表示する名前 image 開発環境に使用するコンテナイメージを選択 build (省略) features コンテナ内で使用する追加ツールを定義。 VS CodeやGitHubのUI上から選択することも可能。 使用できるツールの一覧： https://containers.dev/features forwardPorts (省略) initializeCommand コンテナを立ち上げる前にホストマシン側で任意のコマンドを実行できる。 postCreateCommand コンテナ作成後にコンテナ内で任意のコマンドを実行できる。 初めて開発を始める際に、お決まりで実行する npm installなどを設定しておくと便利 (似たものにonCreateCommand、updateContentCommandなどがある) customizations (別スライドにて) remoteUser (省略)
16. customizationsで設定できること • インストールすべき拡張機能の指定やVS Codeの設定が定義できる • settings.jsonでは、インデントサイズや使用する静的解析ツールなどが定義できる ◦ 設定はできるが.vscode/settings.jsonに設定は寄せておいた方がいいかも { "customizations": { "vscode": { "extensions": [], "settings": {}, } } } 16 設定項目 説明 extensions Dev Containersでインストールするべき拡張機能の IDを指定できる settings settings.jsonファイルで定義できる内容が指定できる
17. 17 設定ファイルのスコープ 3パターン • ユーザー(青枠) ◦ すべてのワークスペースで有効 ◦ プロファイル機能で切り替えも可能 ◦ GitHubを通じて他者と共有されない ▪ プロジェクト外に作成される • ワークスペース (緑枠) ◦ ワークスペース内のみで有効 ◦ GitHubを通じて共有することが可能 ▪ .vscode/settings.json • フォルダ(赤枠) ◦ 特定のフォルダのみに有効 ◦ Multi-root Workspaces使用時のみ ◦ GitHubを通じて共有することが可能 ▪ プロジェクト配下にpjA/.vscode/settings.json
18. お問い合わせ先 18 sales@VirtualTech.jp 開発環境の悩み、インフラの悩み 話してみませんか？ ❏ オンラインでのお打ち合わせ OK ❏ 相談ベースからでも OK