0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

DockerとDocker ComposeでNext.jsアプリをDocker化してみた

0
Posted at

はじめに

Dockerについて学ぶために、Next.js・PostgreSQL・Prismaを使用したアプリケーションをDocker化する課題に取り組みました。

これまでローカル環境で開発していましたが、Dockerを利用することで開発環境をコードとして管理できるようになります。

今回は以下の構成で環境構築を行いました。

  • Next.js
  • PostgreSQL
  • Prisma
  • Docker
  • Docker Compose

Docker化するメリット

Dockerを使うことで、

  • 開発環境を誰でも同じ状態で再現できる
  • PCが変わっても同じ環境で開発できる
  • 「自分の環境では動く問題」を防げる

といったメリットがあります。


ディレクトリ構成

今回使用したプロジェクトは以下のような構成です。

.
├── app
├── lib
├── prisma
│   ├── migrations
│   ├── schema.prisma
│   └── seed.ts
├── docker-compose.yml
├── prisma.config.ts
├── package.json
└── README.md

docker-compose.ymlの作成

今回はNext.jsコンテナとPostgreSQLコンテナの2つを作成しました。

services:
  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
      POSTGRES_DB: nextjs_docker

  nextjs:
    image: node:20-alpine
    environment:
      DATABASE_URL: postgresql://postgres:password@db:5432/nextjs_docker
    working_dir: /app
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - "3000:3000"
    depends_on:
      - db
    command: sh -c "npm install && npx prisma generate && npm run dev"

ポイントは DATABASE_URL のホスト名を localhost ではなく db にすることです。

Dockerコンテナ同士はサービス名で通信するためです。


Dockerコンテナ起動

以下のコマンドでコンテナを起動しました。

docker-compose up

起動後、

http://localhost:3000

へアクセスするとNext.jsアプリが表示されます。


Prisma Migration実行

コンテナ内でPrisma Migrationを実行します。

docker-compose exec nextjs npx prisma migrate dev

実行後、

Your database is now in sync with your schema.

と表示されれば成功です。


Seedデータ投入

続いてSeedデータを投入します。

docker-compose exec nextjs npx prisma db seed

実行後、

The seed command has been executed.

と表示されれば成功です。


動作確認

APIにアクセスしてデータが取得できることを確認しました。

http://localhost:3000/api/users

結果

{
  "users": [
    {
      "id": 1,
      "email": "alice@prisma.io",
      "name": "Alice"
    },
    {
      "id": 2,
      "email": "bob@prisma.io",
      "name": "Bob"
    }
  ]
}

苦戦したポイント

今回一番苦戦したのは環境変数の設定でした。

Prismaのエラーを見ると認証エラーが表示されていましたが、原因はユーザー名のスペルミスでした。

postgress

となっており、

postgres

が正しい設定でした。

DockerやPrismaのエラーは複雑に見えますが、意外と単純なタイポが原因であることも多いと学びました。


学んだこと

今回の課題を通して、

  • Docker Composeで複数コンテナを管理する方法
  • PostgreSQLとNext.jsを接続する方法
  • Prisma Migrationの流れ
  • Seedデータ投入方法
  • Docker環境でのデバッグ方法

を学ぶことができました。

特に「Dockerコンテナ同士はサービス名で通信する」という点は今後も重要になる知識だと感じました。


おわりに

Dockerは最初は難しく感じましたが、一度構築できると再現性の高い開発環境を簡単に作れることが分かりました。

今後は個人開発やチーム開発でもDockerを活用していきたいと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?