VSCode Dev Containerを使用する方法

ご覧いただきありがとうございます。Furuyaです。
今回は、「VSCode Dev Containerを使用する方法」についてまとめます。

環境

PC：MacBook Pro 13-inch, 2020, Four Thunderbolt 3 ports
macOS：Sonoma 14.6.1
Shell: zsh

前提条件

すでにdocker環境が構築されていることが前提となります。
Next.js開発環境をDockerに０から作成する方法は以下でまとめていますので、dokcer環境が未構築の方はこちらを参照してください。
https://zenn.dev/k0y0k0y0/articles/article_20240918

DevContainerセッティング

概要

Dev Containerについては公式ドキュメントがありますので詳しい内容はそちらを参照してください。

https://code.visualstudio.com/docs/devcontainers/containers

ディレクトリ構成

下記のようなディレクトリ構成となるように.devcontainerディレクトリとdevcontainer.jsonファイルを配置します。
今回は例としてNext.jsのアプリケーションが構築されているとします。

.
┣━ .devcontainer（追加）
┃  ┗━ devcontainer.json（追加）
┣━ host-app（Next.jsのアプリケーション）
┃  ┣━ ...
┃  ┣━ ...
┃  ┗━ ...
┣━ check-network.sh
┣━ docker-compose.yml
┗━ Dockerfile

devcontainer.json

devcontainer.json

{
  "name": "next-app",
  "dockerComposeFile": ["../docker-compose.yml"],
  "service": "host-app",
  "workspaceFolder": "/usr/src/app",
  "initializeCommand": "docker network create || true",
}

VSCodeの拡張機能追加

VSCodeでDev Containerを使用するため、拡張機能を使用します。

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers

DevContainer立ち上げ

localhost:3000で以下の画面が表示されれば完了です！

以上で「Next.jsの開発環境構築をDocker上で0から行う方法」は完了となります！