独習 Next.js × Prisma × PostgreSQL (駆け出し)

KON-ch 2022/09/16に更新

環境構築から。
個人での趣味利用なので、Versionは固定してくて良いかなと
NodeはLTS、postgresはlatest使います。~~(定期的に上げるのがめんどくさい)~~

app/dev.Dockerfile

FROM node:lts-alpine

RUN apk add --no-cache libc6-compat
WORKDIR /app

COPY package.json package-lock.json* ./
RUN npm ci

COPY . .

CMD npm run dev

app/.dockerignore

dev.Dockerfile
.dockerignore
node_modules
README.md
.next
.git
.gitignore

ポート "5555:5555" は Prisma studio用です。

docker-compose.dev.yml

version: "3"
services:
  app:
    container_name: app
    build:
      context: ./app
      dockerfile: dev.Dockerfile
    volumes:
      - ./app:/app
      - node_modules:/app/node_modules
    ports:
      - "3000:3000"
      - "5555:5555"
    depends_on:
      - db
    stdin_open: true
    tty: true

  db:
    image: postgres:latest
    restart: always
    container_name: db
    volumes:
      - db_data:/var/lib/postgresql/data
    env_file:
      - ./app/.env
    ports:
      - "5432:5432"

volumes:
  node_modules:
  db_data:

KON-ch 2022/09/16に更新

立ち上げ。

エラーになるので一時的にコメント。

app/dev.Dockerfile

FROM node:lts-alpine

RUN apk add --no-cache libc6-compat
WORKDIR /app
# COPY package.json package-lock.json* ./
# RUN npm ci

# COPY . .

# CMD npm run dev

コンテナを作る

docker-compose -f docker-compose.dev.yml build

Nextの初期化

docker-compose -f docker-compose.dev.yml run --rm app sh -c 'npx create-next-app@latest --ts'

作られたnode_mdulesは不要なので削除。
npmを使うので入れ直す

rm -rf app/node_modules
rm app/yarn.lock
docker compose -f docker-compose.dev.yml run --rm app sh -c 'npm install'

一時的な変更を元に戻し、コンテナを作り直す

docker compose -f docker-compose.dev.yml build

ディレクトリ構造

.
┣━ app
┃  ┣━ .env
┃  ┣━ src
┃  ┣━ ... いろいろ
┃  ┣━ dev.Dockerfile
┃  ┣━ package.json
┃  ┗━ package-lcok.json
┗━ docker-compose.dev.yml

KON-ch 2022/09/16に更新

コンテナを起動してコンテナの中へ

docker compose -f docker-compose.dev.yml up -d
docker compose -f docker-compose.dev.yml exec app sh

Prisma インストール

コンテナ

npm install prisma -D

Prisma 初期化

コンテナ

npx prisma init

DATABASE_URLを書き換え、DBコンテナに向ける

app/.env

- DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
+ DATABASE_URL="postgresql://POTGRES_USER:POSTGRES_PASSWORD@db:5432/postgres?schema=public"

KON-ch 2022/09/16

モデルを追加

カラム名 データ型 DB制約 を記載
? は null許容なので基本不要と思う。

prisma/schema.prisma

model User {
  id        String    @default(cuid()) @id
  name      String?
  email     String?   @unique
  createdAt DateTime  @default(now()) @map(name: "created_at")
  updatedAt DateTime  @updatedAt @map(name: "updated_at")
  @@map(name: "users")
}

@map @@map は下記参照
読みやすくなるよね、というエイリアス的な理解。

マイグレーション

コンテナ

npx prisma migrate dev --name created_user_table

Prisma Studioを起動

コンテナ

npx prisma studio

http://localhost:5555/ でアクセスアクセスできる