🐳

Dev Containers メモ

に公開

Visual Studio Code の Dev Containers に関するメモです。
(別途書いた記事へのリンク or 記事にするまでもない細かいのを記載)

Dev Containers のススメ

パフォーマンス改善

プロキシとの闘い

ホスト(Windows)にアクセスする方法

Viteでポートフォワードが動かない

デフォルトで拡張機能を入れる

常にDevContainerに入れる拡張を設定できる。
これはプロジェクトには必須ではないが、個人として必要な拡張機能(たとえばキーバインド)を入れるときに役に立つ。

remote.containers.defaultExtensions で設定できる。

settings.jsonだと下記のような形。

    "dev.containers.defaultExtensions": [
        "lfs.vscode-emacs-friendly"
    ],

独自のイメージ使う時にはユーザ作成 or ユーザ指定を忘れずに

DevContainer用のイメージじゃなくて、別のイメージをベースにDockerfileで作っていくような場合、何も指定しないとrootになってしまう。
WSLで実行している際に、パーミッションの問題が発生しかねないので、別途ユーザ作っておく。

すでにID:1000のユーザがいる場合には、devcontainer.json"remoteUser" で指定する。

sam build などでのエラー

DevContainer側にあるHTMLファイルをブラウザで開く

Open In Default Browser という拡張機能使うことで、DevContainer側にあるファイルをVisual Sutdio Code上から右クリックでブラウザで開くことができて便利。

Featureで自動インストールされる拡張機能を除外する

Dev Container Featureやベースイメージには、拡張機能を自動でインストールするものがある。
不要な拡張機能が含まれている場合、customizations.vscode.extensions に拡張機能IDの先頭に - を付けて指定することで、インストールを除外できる。

{
  "customizations": {
    "vscode": {
      "extensions": ["-dbaeumer.vscode-eslint"]
    }
  }
}

Featureがどの拡張機能を自動インストールするかは、Featureのソースリポジトリにあるdevcontainer-feature.jsoncustomizations.vscode.extensionsで確認できる。
公式Featureの場合は devcontainers/features リポジトリの src/<Feature名>/devcontainer-feature.json を見る。

たとえば、Node Featureでは dbaeumer.vscode-eslint、Java Featureでは vscjava.vscode-java-pack が指定されている。

Discussion