🐳

NestJS×Next.js×Dockerで環境構築

2024/06/08に公開

Docker

はじめに

NestJS×Next.jsで各プロジェクトの作成からDockerコンテナ上で行いたかったが記事が見当たらず、ChatGPTに教えてもらったので備忘録として書いておきます

前提条件

Dockerがインストールされていること
Docker Composeがインストールされていること

ディレクトリ構成

初期ディレクトリ構成

nest-next/
├── container
│   ├── backend
│       └── Dockerfile
│   └── frontend
│       └── Dockerfile
└── docker-compose.yml

最終ディレクトリ構成

nest-next/
├── container
│   ├── backend
│       └── Dockerfile
│   └── frontend
│       └── Dockerfile
├── backend
│   └── NestJSプロジェクト
├── frontend
│   └── Next.jsプロジェクト
└── docker-compose.yml

ステップ1: Dockerコンテナ作成〜立ち上げ

Dockerfile と docker-compose.yml の作成

以下のようにファイルを編集しておく

backend/Dockerfile

FROM node:20.14.0-slim

WORKDIR /app

frontend/Dockerfile

FROM node:20.14.0-slim

WORKDIR /api

docker-compose.yml

version: '3.7'

services:
  backend:
    build: 
      context: .
      dockerfile: ./container/backend/Dockerfile
    tty: true
    volumes:
      - ./backend:/api
    ports:
      - "3000:3000"

  frontend:
    build: 
      context: .
      dockerfile: ./container/frontend/Dockerfile
    tty: true
    volumes:
      - ./frontend:/app
    ports:
      - "3333:3333"

コンテナのビルド〜立ち上げ

# コンテナのビルド
docker-compose build

# コンテナの立ち上げ(ステップ2でコマンド打つので-dをつけておく)
docker-compose up　-d

ステップ2: プロジェクト作成

NestJSプロジェクト作成

NestJS CLI を使用してNestJSの新規プロジェクトを作成する。

docker-compose run --rm backend sh -c 'npm install -g @nestjs/cli && nest new .'

Next.jsプロジェクト作成

docker-compose run --rm frontend sh -c 'npx create-next-app .'

コマンドを実行し、下記のようにお好みにカスタマイズすると作成が始まる

Need to install the following packages:
create-next-app@14.2.3
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /app.

ステップ3: Dockerfile修正

以下のようにファイルを編集する

backend/Dockerfile

# Stage 1: Build the application
FROM node:20.14.0-slim AS builder

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY ../../backend/package.json ../../backend/package-lock.json ./

# Install dependencies
RUN npm install

# Copy all files
COPY ../../backend .

# Build the application
RUN npm run build

# Stage 2: Serve the application
FROM node:20.14.0-slim AS runner

# Set working directory
WORKDIR /app

# Copy build artifacts from the builder stage
COPY --from=builder /app ./

# Expose the port the app runs on
EXPOSE 3333

# Command to run the application
CMD ["npm", "run", "start"]

frontend/Dockerfile

# Stage 1: Build the application
FROM node:20.14.0-slim AS builder

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY ../../frontend/package.json ../../frontend/package-lock.json ./

# Install dependencies
RUN npm install

# Copy all files
COPY ../../frontend .

# Build the application
RUN npm run build

# Set up Japanese locale
RUN apt-get update && apt-get install -y locales
RUN locale-gen ja_JP.UTF-8
RUN localedef -f UTF-8 -i ja_JP ja_JP

# Stage 2: Serve the application
FROM node:20.14.0-slim AS runner

# Set working directory
WORKDIR /app

# Copy build artifacts from the builder stage
COPY --from=builder /app ./

# Expose the port the app runs on
EXPOSE 3000

# Set Japanese locale and timezone
ENV LANG=ja_JP.UTF-8
ENV TZ=Asia/Tokyo

# Command to run the application
CMD ["npm", "run", "dev"]

ステップ4: frontendのポート番号を変更

デフォルトではポート番号は3000番になっているため、frontendのpackage.josnのscriptsの"dev"をポートを指定する

frontend/package.json

・・・
  "scripts": {
    "dev": "next dev -p 3333",
・・・

ステップ5: 画面表示

# コンテナのビルド
docker-compose build

# コンテナの立ち上げ(画面アクセス時のログを見たいので-dはつけない)
docker-compose up　-d

コンテナが立ち上がったら下記URLにアクセスして画面表示できていれば完了！

環境	URL
NestJS(backend)	http://localhost:3000
Next.js(frontend)	http://localhost:3333

NestJS(backend)

Next.js(frontend)