Zenn
💭

Payloadのローカル開発環境構築（PostgreSQL利用）

に公開
CMS
Headless CMS
Payload
tech

はじめに

Payloadは、現時点で下記3つのデータベースに対応しています。

  • MongoDB
  • PostgreSQL
  • SQLite

今回は、データベースにPostgreSQLを利用する場合のローカル開発環境構築手順を紹介します。

この記事ではまっさらな環境を構築します。Payloadのデモ環境を構築したい方は、下記の記事を参照してください。

https://zenn.dev/ksk1kd/articles/a9d7f480619954

前提

この記事では、以下のツールがインストールされていることを前提としています。

  • Node.js
  • Docker
  • Docker Compose

Payloadプロジェクトの作成

下記のコマンドで、Payloadのプロジェクトを作成できます。
プロジェクトを作成したい任意のディレクトリで実行してください。

npx create-payload-app

コマンドを実行すると、いくつかの質問に答える必要があります。

  1. Project name?

    • 任意のプロジェクト名を入力します（例：my-payload-app）

  2. Choose project template

    • blank を選択します

  3. Select a database

    • PostgreSQL を選択します

  4. Enter PostgreSQL connection string

    • postgres://postgres@postgres:5432/payload を入力します
    • ここでは後ほど立ち上げるDocker環境におけるPostgreSQLのURIを指定しておきます

設定が完了すると、入力したプロジェクト名のディレクトリが作成され、必要なファイルがすべてダウンロードされます。

Docker Composeファイルの編集

プロジェクトディレクトリに移動し、Docker Composeファイルを編集します。
PostgreSQLを選択してプロジェクトを作成した場合でも、Docker ComposeファイルがMongoDB用になっているため、PostgreSQL環境になるようにします。
ついでに、ファイル名もdocker-compose.ymlからcompose.yamlに変更しています。

cd my-payload-app  # 作成したプロジェクト名に置き換えてください
mv docker-compose.yml compose.yaml

compose.yamlを開き、下記の記述に変更します。

compose.yaml
services:
  payload:
    image: node:22-alpine
    ports:
      - '3000:3000'
    volumes:
      - .:/home/node/app
      - node_modules:/home/node/app/node_modules
    working_dir: /home/node/app/
    command: sh -c "npm install && npm run dev"
    depends_on:
      - postgres
    env_file:
      - .env

  postgres:
    restart: always
    image: postgres:latest
    volumes:
      - data:/var/lib/postgresql/data
    ports:
      - '5432:5432'
    environment:
      POSTGRES_USER: postgres
      POSTGRES_DB: payload
      POSTGRES_HOST_AUTH_METHOD: trust

volumes:
  data:
  node_modules:

上記の内容は、PayloadのGitHubリポジトリにある下記のサンプルを参考に作成しました。

https://github.com/payloadcms/payload/blob/main/templates/with-postgres/docker-compose.yml

Dockerを使ったローカル環境の起動

Dockerを使ってローカル環境を起動します。

docker compose up

Docker Composeにより必要なコンテナが立ち上がります。
ログにReady in ~msが出力されたら起動完了です。

Payloadの初期設定

フロント画面の確認

ブラウザで以下のURLにアクセスして、フロント画面が正常に動作しているか確認します。
http://localhost:3000/

フロント画面

管理画面へのアクセスと管理者ユーザーの作成

次に、管理画面にアクセスして管理者ユーザーを作成します。
http://localhost:3000/admin

以下の情報を入力して作成します。

  • Email
  • Password

管理者ユーザー作成画面

管理者ユーザーを作成して、下記の管理画面が表示されたら作業は完了です。

管理画面

まとめ

今回の記事では、データベースにPostgreSQLを利用する場合のローカル開発環境構築手順を紹介しました。PostgreSQLを選択してプロジェクトを作成した場合は、PostgreSQL用のDocker Composeファイルを用意して欲しいところですが、現時点では整っていないようですので独自に用意して構築しました。

Discussion