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

## ディレクトリ構成

```tree:ディレクトリ構成
Project Root
├── Taskfile.yaml
├── docker
│   ├── docker-compose.yml
│   └── client
│       └── Dockerfile
└── client
    └── .devcontainer
        └── devcontainer.json
```

## Taskfile.yml作成

```yaml:Taskfile.yml
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
```

## Dockerfile作成

```dockerfile:docker/client/Dockerfile
FROM node:20-slim
WORKDIR /tmp
ENV PNPM_HOME /usr/local/bin
RUN apt-get update && apt-get install -y \
    build-essential \
    python3 \
    wget \
    git \
    zsh \
    vim \
    nano \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists/* \
 && corepack enable
```

```yaml:docker/docker-compose.yml
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
```

## Devcontainerの設定

```json:client/.devcontainer/devcontainer.json
{
  "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"
}
```

## .npmrc

```ini:client/.npmrc
store-dir=/var/workspace/client/node_modules/.pnpm-store
```

## Next.jsプロジェクト作成

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

```sh:Terminal
rm -rf ./my-app/node_modules
mv ./my-app/.* ./my-app/* ./my-app/..
rm -rf ./my-app/
pnpm i
```

## 開発用サーバー起動

```sh:Terminal
task dev:build
```