Payloadを最短でローカル環境に立ち上げ触ってみる

はじめに

Payloadは、Next.js App Router / TypeScriptで実装されたOSSのフルスタックフレームワークです。CMSとしての機能が豊富ですが、使い方次第ではNext.js製のアプリケーションに管理画面を導入したい場合にも有用です。そのため公式サイトでは、単なるCMSではなくNext.jsフルスタックフレームワークだと説明されています。

今回は、Payloadをローカル環境で立ち上げて実際に触ってみる手順を紹介します。

前提

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

• Node.js
• Docker
• Docker Compose

Payloadプロジェクトの作成

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

npx create-payload-app

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

1. Project name?

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

2. Choose project template

   • website を選択します
   • このテンプレートには、サンプルウェブサイトの実装が含まれています

3. Select a database

   • MongoDB を選択します

4. Enter MongoDB connection string

   • mongodb://mongo:27017/ を入力します
   • ここでは後ほど立ち上げるDocker環境におけるMongoDBのURIを指定しておきます

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

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

プロジェクトディレクトリに移動し、Dockerを使ってローカル環境を起動します。

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

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

Payloadの初期設定

フロント画面の確認

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

初期状態では、まだコンテンツが何もない状態のシンプルなページが表示されます。

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

次に、管理画面にアクセスして管理者アカウントを作成します。
http://localhost:3000/admin

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

• Email
• Password
• Name

データベースのシード実行

管理画面にログインしたら、「Seed your database」というリンクをクリックすると、サンプルデータがデータベースに登録されます。

処理が完了したら、再度フロント画面にアクセスしてみます。
http://localhost:3000/

今度は、サンプルコンテンツが表示されていることを確認できると思います。これで、Payloadの基本的なセットアップは完了です。

まとめ

今回の記事では、Payloadをローカル環境で立ち上げて初期設定を行う方法を紹介しました。これでPayloadのCMS機能を試せる環境が整ったと思います。ぜひご自身で各機能を触ってみて、実用に耐えうるか検証してみてください。