Slide 1

Slide 1 text

Visual Studio Codeの Dev Containersを使って 開発環境構築してみよう 日本仮想化技術株式会社 VirtualTech.jp 2024/09/07 1

Slide 2

Slide 2 text

はじめに この資料では、次のツールを使用しています。 ● Visual Studio Code ○ https://code.visualstudio.com/download ● Docker Desktop ○ https://www.docker.com/ja-jp/products/docker-desktop/ 2

Slide 3

Slide 3 text

個別で 拡張機能のインストール 拡張機能パックから 3

Slide 4

Slide 4 text

コマンドパレットを開き「add dev…」と入力して、「開発コンテナ: 開発コンテナ構成ファイルを追加...」を選択 4

Slide 5

Slide 5 text

「ワークスペースに構成を追加する」を選択 5

Slide 6

Slide 6 text

「定義済みのコンテナー構成定義から...」を選択 6

Slide 7

Slide 7 text

「typescript」と入力して「Node.js & TypeScript」を選択 7

Slide 8

Slide 8 text

「20-bullseye(既定)」を選択 画像は作成当時のものであるため実際の表示と異なる場合がありますが、 バージョンが異なる場合は、末尾に既定と表示されているものを選択してください 8

Slide 9

Slide 9 text

ボリュームを選択 これ以降は配布している資料と同じ手順のため省略します 「新しいボリュームを作成します」も選択し、ボリューム名を入力します ボリューム名は区別をつけやすいようにリポジトリ名にしていますが、好きな名前をつけてもOK 9

Slide 10

Slide 10 text

フォルダー名を入力 デフォルトの値では、リポジトリ名が表示されており、変更せずにそのまま 10

Slide 11

Slide 11 text

Dev Containersの標準機能で有効化できる機能を検索して有効化します。 今回は、「AWS CLI」を選択して、OKをクリックします 11

Slide 12

Slide 12 text

右下に通知ダイアログが表示されたら「コンテナーで再度開く」をクリックします 12

Slide 13

Slide 13 text

左下の青い部分がこのように表示されたら Dev Containersを使ってDockerコンテナ上で開発環境が実行されていることを意味しています。 13

Slide 14

Slide 14 text

実際の設定ファイルのイメージ 14

Slide 15

Slide 15 text

主な設定項目 15 設定項目 説明 name Dev container上で表示する名前 image 開発環境に使用するコンテナイメージを選択 build (省略) features コンテナ内で使用する追加ツールを定義。 VS CodeやGitHubのUI上から選択することも可能。 使用できるツールの一覧: https://containers.dev/features forwardPorts (省略) initializeCommand コンテナを立ち上げる前にホストマシン側で任意のコマンドを実行できる。 postCreateCommand コンテナ作成後にコンテナ内で任意のコマンドを実行できる。 初めて開発を始める際に、お決まりで実行する npm installなどを設定しておくと便利 (似たものにonCreateCommand、updateContentCommandなどがある) customizations (別スライドにて) remoteUser (省略)

Slide 16

Slide 16 text

customizationsで設定できること ● インストールすべき拡張機能の指定やVS Codeの設定が定義できる ● settings.jsonでは、インデントサイズや使用する静的解析ツールなどが定義できる ○ 設定はできるが.vscode/settings.jsonに設定は寄せておいた方がいいかも { "customizations": { "vscode": { "extensions": [], "settings": {}, } } } 16 設定項目 説明 extensions Dev Containersでインストールするべき拡張機能の IDを指定できる settings settings.jsonファイルで定義できる内容が指定できる

Slide 17

Slide 17 text

17 設定ファイルのスコープ 3パターン ● ユーザー(青枠) ○ すべてのワークスペースで有効 ○ プロファイル機能で切り替えも可能 ○ GitHubを通じて他者と共有されない ■ プロジェクト外に作成される ● ワークスペース (緑枠) ○ ワークスペース内のみで有効 ○ GitHubを通じて共有することが可能 ■ .vscode/settings.json ● フォルダ(赤枠) ○ 特定のフォルダのみに有効 ○ Multi-root Workspaces使用時のみ ○ GitHubを通じて共有することが可能 ■ プロジェクト配下にpjA/.vscode/settings.json

Slide 18

Slide 18 text

お問い合わせ先 18 [email protected] 開発環境の悩み、インフラの悩み 話してみませんか? ❏ オンラインでのお打ち合わせ OK ❏ 相談ベースからでも OK