5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 5

プライム・ブレインズ Advent Calendar 2025

@mk3koheiin株式会社プライム・ブレインズ

【リファレンスが】VSCodeの開発コンテナ作成について整理しました【いっぱい】

5
Last updated at Posted at 2025-12-04

はじめに

VSCodeの開発コンテナを作成するために、最低限必要だったことを備忘録として残します。

やったこと

VSCodeの開発コンテナを作成し、コンテナを立ち上げる。

手順

Dockerの基本は省略いたします。私は以下の書籍で学びました。

そして肝心のVSCodeの開発コンテナを作成するための手順は以下を基本として進めました。
https://code.visualstudio.com/docs/devcontainers/create-dev-container

今回はViteで作成したTypeScript×Reactプロジェクトの開発コンテナを構築することを目指します。

①Viteプロジェクトの作成

以下の記事が参考になります。
https://qiita.com/teradonburi/items/fcdd900adb069811bfda

npm create vite@latest

サクサク設定が出来て簡単です。

②プロジェクトのルートフォルダ（先ほど作成したプロジェクトフォルダ）配下に/.devcontainer/devcontainer.jsonを作成する。

devcontainer.jsonの設定値は以下にまとまっています。
https://containers.dev/implementors/json_reference/

{
  "name": "sampleDevContainer",
  "build": {
    "dockerfile": "Dockerfile",
    "context": "..",
    "args": { "VARIANT": "22-bookworm" } 
  },
  "forwardPorts": [5173],
  "postCreateCommand": "npm i",
  "customizations": {
    "vscode": {
      "extensions": [
        "mosapride.zenkaku",
        "shardulm94.trailing-spaces",
        "esbenp.prettier-vscode",
        （省略）
      ],
      "settings": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
        （省略）
      }
    }
  },
  "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}"
}

name

 "name": "sampleDevContainer"

開発コンテナ起動時UIに表示される名前
（VSCodeのエクスプローラや検索ボックスなどに表示されている）
image.png

build

"build": {
    "dockerfile": "Dockerfile",
    "context": "..",
    "args": { "VARIANT": "22-bookworm" }
  }

dockerfile

dockerfileを使う場合は必要。
devcontainer.jsonからの相対パスで、どのDockerfileを読み込むか指定。

context

devcontainer.jsonからの相対パスでプロジェクトのルートディレクトリを指定。

args

Docker imageがbuildされる際に渡される値。（Dockerfile内のARGS）
nameとvalueのペアとして設定する。（今回はVARIANTがnameで,22-bookwormがvalueに相当する）

devcontainer.jsonからDockerfileに変数を渡すメリット
→Dockerfile内の値を書き換える必要がなくなり、開発コンテナ作成時に柔軟に対応が可能になることやDockerfileが使いまわしやすくなること

forwardPorts

"forwardPorts": [5173]

ホストマシンとコンテナのポートフォワーディングについて設定。
今回はviteの開発サーバのデフォルトポートが5173なので、それに合わせて5173にしています。
つまり、ホストマシンの5173はコンテナの5173に転送されます。
ちなみに、ホストとコンテナで異なるポートを使いたい場合は、docker-compose.ymlを使用する必要があり、"hostのPort : containerのPort"として設定することが出来ます。

postCreatedCommand

 "postCreateCommand": "npm i"

コンテナが正常に作成された後に実行されるコマンドを設定する

customizations

 "vscode": {
      "extensions": [
        "mosapride.zenkaku",
        "shardulm94.trailing-spaces",
        "esbenp.prettier-vscode",
        （省略）
      ],
      "settings": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
        （省略）
      }
    }

vscodeの下の階層にextensionsとsettingsがありますが、extensionsで拡張機能を、settingsでvscodeの設定を指定します。

extensions

まずは拡張機能の設定です。
■パターン1（個別で設定する方法）
1.ctrl+shift+xで拡張機能を開く
2.それぞれの拡張機能の右下に表示されている歯車マークを押下→devcontainer.jsonに追加を押下
image.png

3.自動でdevcontainer.jsonに追加される

■パターン2（現在の設定をまとめて出力する方法）

  1. vscodeのターミナルで以下を実行する
ターミナル
code --list-extensions | sed 's/^/        "/' | sed 's/$/",/'

２. 出力された拡張機能の一覧をコピーして.devcontainer.jsonのcustomizations.vscode.extensionsに設定する

settings

次にVSCodeの設定です。
■パターン1（個別で設定する方法）
1.ctrl+「,」で設定を開く
2.設定を選択すると左に表示される歯車マークを押下→JSONとして設定をコピーを押下
image.png

3.devcontainer.jsonのsettingsに張り付ける

■パターン2（現在の設定をまとめて反映する方法）

  1. ctrl+Shift+Pでコマンドパレットを開く
  2. Preferences:Open User Settings(JSON)を検索、または.vscode/settings.jsonを検索して選択する
    image.png
  3. 移動先のsettings.jsonの中身をコピーする
    image.png
  4. devcontainer.jsonのsettingsに張り付ける

workspaceFolder

 "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}"

ホストマシンのプロジェクトルート（先ほど設定しましたね）をコンテナ内の/workspaces/${localWorkspaceFolderBasename}にボリュームマウントします

ちなみに${localWorkspaceFolderBasename}はdevcontainer側で参照できる変数で、ホストマシンで/.devcontainer/devcontainer.jsonが配置されていたフォルダ名が入ります。

簡単ですが設定値については以上です。

③Dockerfileを作成する

先ほどbuild.dockerfileで相対パスとして指定した場所にDockerfileを作成します。
image.png

今回ファイルの中身はこれだけです。

ARG VARIANT="22-bookworm"
FROM mcr.microsoft.com/devcontainers/typescript-node:${VARIANT}

RUN apt-get update && apt-get install -y git && apt-get install -y curl && apt-get install -y vim

私が悩んだ点はベースイメージの取得部分です。
devcontainer用のイメージがあるらしく、それを探す必要がありました。

探し方が全く分からなかったので備忘として残します。
①imageを探すのでdockerhubにいきます。
https://hub.docker.com/
※他にもGitHubリポジトリで探す方法もあるようです

②検索窓で以下のように検索してmicrosoft/devcontainersを選択
image.png

③以下のようにタグが表示されているページに遷移
image.png

④下にスクロールするとtypescript-nodeが！
image.png

ちなみにバージョンは、vite7.4.0で推奨されていたのがnode22.12以上だったため、22から選ぶことにしました。
（基本的にそのバージョンのLTSらしいのでそこは問題なし）
参考：https://ja.vite.dev/guide/

④起動

これで開発コンテナが起動できるようになりました～

起動の仕方は、VSCodeでプロジェクトを開いた際に以下のような案内が右下に表示されるのでコンテナーで再度開くでコンテナに接続することが出来ます。
image.png

余談。。。

開発コンテナが立ち上がった後に、npm run devで開発サーバを立ち上げてブラウザからアクセスしてもおそらく何も画面に表示されないと思います。
その場合は以下をお試しください。

・vite.config.tsにserver.hostとserver.portの設定を追加する

vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: "0.0.0.0",
    port: 5173,
  },
});

server.host

サーバがどのIPアドレスをリッスンするかを決定するオプションです。
0.0.0.0にすると、すべてのIPアドレスをリッスンすることになります。
※この設定がないと、開発コンテナ内のlocalhostからの接続しか受け付けず、ホストOSからのアクセスが拒否されます

server.port

サーバのポートを決定します。
参考：https://vite.dev/config/server-options

おわり

かなり昔に書いていた記事を整理しなおしました。
当時はDockerを学んだついでに開発コンテナの作り方を知りたかったのだと思います。
※いまだにdocker-composeをちゃんと勉強してないのでそろそろ学ばなければ。

最近はAWSでのインフラ構築を学んでいるので、今月中にコンテナアプリを起動させるところまで整理したいです。
ECRへのpushまではできているのであと少しのはず...

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?