先に react や nextjs アプリを作成した後で、次の2ファイルを追加します。
ディレクトリ .devcontainer を作成して、以下のファイルを作成します
<アプリの dev container 名>は好きな名前をつけます
.devcontainer/devcontainer.json
{
"name": "<アプリの dev container 名>",
"dockerComposeFile": ["../docker-compose.yml"],
"service": "app",
"workspaceFolder": "/workspace",
"settings": {},
"extensions": []
}
<コンテナ名>は好きな名前をつけます
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"
"scripts": {
"dev": "next dev",
↓
"scripts": {
"dev": "next dev -p 3011",
以上です!