react や nextjs アプリを vscode .devcontainer(Docker) に対応にする

先に react や nextjs アプリを作成した後で、次の2ファイルを追加します。

1. 「.devcontainer/devcontainer.json」 の作成

ディレクトリ .devcontainer を作成して、以下のファイルを作成します

<アプリの dev container 名>は好きな名前をつけます

.devcontainer/devcontainer.json

{
  "name": "<アプリの dev container 名>",
  "dockerComposeFile": ["../docker-compose.yml"],
  "service": "app",
  "workspaceFolder": "/workspace",
  "settings": {},
  "extensions": []
}

2. 「docker-compose.yml」 の作成

<コンテナ名>は好きな名前をつけます
ports 3011 は好きな番号を指定(3000がデフォルト)

docker-compose.yml

version: '3'

volumes:
  node_modules_volume:

services:
  app:
    image: node:16.17.1
    ports:
      - 3011:3011
    volumes:
      - .:/workspace:cached
      - node_modules_volume:/workspace/node_modules
    working_dir: /workspace
    container_name: <コンテナ名>
    command: /bin/sh -c "while sleep 1000; do :; done"

3. package.json のアプリ起動ポートを変更

  "scripts": {
    "dev": "next dev",

  ↓

  "scripts": {
    "dev": "next dev -p 3011",

4. vscodeで開いて「Reopen in Container」を選択する

以上です!

No.2221
10/06 11:37

edit