Next.jsのプロジェクトをDockerコンテナ上に作成する

• Project Root
  • Taskfile.yaml
  • docker
    • docker-compose.yml
    • client
      • Dockerfile
  • client
    • .devcontainer
      • devcontainer.json

version: '3'

tasks:
  'dev:build':
    desc: 開発環境コンテナビルド
    cmds:
      - docker-compose -f docker/docker-compose.yml up -d --build
  'dev:start':
    desc: 開発環境コンテナ起動
    cmds:
      - docker-compose -f docker/docker-compose.yml up -d
  'dev:stop':
    desc: 開発環境コンテナ停止
    cmds:
      - docker-compose -f docker/docker-compose.yml down

version: "3"

name: "project"

volumes:
  client_node_modules:
  client_dot_next:
  client_workspace_root:

services:
  client_workspace:
    build: client
    command: sleep infinity
    volumes:
      - ../:/var/workspace/:cached
      - ~/.ssh/:/root/.ssh/
      - client_node_modules:/var/workspace/client/node_modules
      - client_dot_next:/var/workspace/client/.next
      - client_workspace_root:/root/
  client:
    build: client
    working_dir: /var/workspace/client
    command: sh -c 'pnpm i && pnpm dev'
    volumes:
      - ../:/var/workspace/:cached
      - client_node_modules:/var/workspace/client/node_modules
      - client_dot_next:/var/workspace/client/.next
    ports:
      - 3000:3000

{
  "name": "project-client",
  "dockerComposeFile": "../../docker/docker-compose.yml",
  "service": "client_workspace",
  "workspaceFolder": "/var/workspace/client",
  "customizations": {
    "vscode": {
      "extensions": [
        "bradlc.vscode-tailwindcss",
        "dbaeumer.vscode-eslint",
        "donjayamanne.githistory",
        "EditorConfig.EditorConfig",
        "esbenp.prettier-vscode",
        "GitHub.vscode-pull-request-github",
        "GraphQL.vscode-graphql-syntax",
        "GraphQL.vscode-graphql"
      ]
    }
  },
  "shutdownAction": "none"
}

pnpm create next-app my-app --ts --tailwind --eslint --app --src-dir --import-alias '@/*'

rm -rf ./my-app/node_modules
mv ./my-app/.* ./my-app/* ./my-app/..
rm -rf ./my-app/
pnpm i

task dev:build