naopoyo.com
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About

目次

© naopoyo

🛀

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

公開日
約1年前
2024-09-23
更新履歴
GitHubで見る
  • Next.js
  • Docker

ディレクトリ構成

ディレクトリ構成
  • Project Root
    • Taskfile.yaml
    • docker
      • docker-compose.yml
      • client
        • Dockerfile
    • client
      • .devcontainer
        • devcontainer.json

Taskfile.yml作成

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作成

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
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の設定

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

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

Next.jsプロジェクト作成

Terminal
pnpm create next-app my-app --ts --tailwind --eslint --app --src-dir --import-alias '@/*'
Terminal
rm -rf ./my-app/node_modules
mv ./my-app/.* ./my-app/* ./my-app/..
rm -rf ./my-app/
pnpm i

開発用サーバー起動

Terminal
task dev:build

目次

最近更新された記事

😙
開発日記 / Next.js サーバーサイドのデバッグの覚書
約15時間前 - 2025年10月14日
  • 開発日記
🚆
VS Codeでよく使うショートカット
約15時間前 - 2025年10月14日
  • VS Code
🍕
Next.js + Vitest の環境構築手順
約19時間前 - 2025年10月13日
  • Vitest
  • Next.js