Zenn
🍺

docker composeを使用してNext.jsとNest.jsの環境構築

2024/04/16に公開
Docker
Next.js
NestJS
tech

ディレクトリ

$ tree
.
├── docker
│ └──api
│   └──Dockerfile
│ └──frontend
│   └──Dockerfile
├── api
│ └── (ソース)
├── docker-compose.yml
└── front
  └── (ソース)

各ファイル

/docker/api/Dockerfile
FROM node:20.10.0-slim

RUN apt-get update
RUN apt-get install -y openssl # これが無いと後のprisma migrateでエラーになります
RUN apt-get install -y procps  # これが無いとホットリロード時にエラーで落ちます

WORKDIR /app

RUN npm i -g @nestjs/cli
RUN npm i -D prisma
RUN npm i @prisma/client

CMD ["npm", "run", "start:dev"]
/docker/frontend/Dockerfile
FROM node:20.10.0-slim

RUN apt-get update

WORKDIR /app

CMD ["npm", "run", "dev"]
/docker-compose.yml
version: "3.8"

services:
  api:
    build:
      context: ./docker/api
      dockerfile: Dockerfile
    tty: true
    volumes:
      - ./api:/app
    depends_on:
      - db
    ports:
      - "3000:3000"
      - "5555:5555"
    networks:
      - app-network

  frontend:
    build:
      context: ./docker/frontend
      dockerfile: Dockerfile
    tty: true
    volumes:
      - ./frontend:/app
    ports:
      - "4000:3000"
    networks:
      - app-network

  db:
    image: postgres:15.3
    ports:
      - 5432:5432
    volumes:
      - ./db/postgres/init.d:/docker-entrypoint-initdb.d
      - ./db/postgres/data:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_DB: ${POSTGRES_DB}
      POSTGRES_INITDB_ARGS: "--encoding=UTF-8"
    restart: always
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

docker-compose.ymlと同階層に.env作成

/.env
POSTGRES_USER=postgres
POSTGRES_PASSWORD=postgres
POSTGRES_DB=postgres

手順

Nestのプロジェクト作成

docker compose run --rm -w /app api nest new api --directory=.

Nextのプロジェクト作成

docker compose run --rm -w /app frontend npx create-next-app . --ts

コンテナを立ち上げる

docker compose up -d

Prismaの設定

まずapiコンテナに入ります

docker compose exec api bash

次にコンテナ内で

npx prisma init

次にapiディレクトリ直下に.envファイルを作成（恐らくprisma initで作成されるのでDATABASE_URLを書き換える）

/api/.env
# This was inserted by `prisma init`:
# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL="postgresql://postgres:postgres@db:5432/postgres?schema=public"

prisma/schema.prismaが作成されるので、何かモデルを定義しましょう

/schema.prisma
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model AdminAccount {
  id Int @id @default(autoincrement())
  created_at DateTime @default(now())
  updated_at DateTime @updatedAt
  name String
  email String @unique
  password String
}

そしてmigrate
apiのDockerfileに記述しているopensslが無いとエラーになる可能性があります（けっこうハマった、、）

npx prisma migrate dev

これでテーブルが作成されたはずです
下記コマンドでprisma studioを立ち上げ確認してみましょう

npx prisma studio

http://localhost:5555/

Discussion