PayloadCMSを使って一時間で無料CMSシステムを立ち上げてみた

はじめに

CMS（コンテンツ管理システム）を短時間で構築できるツールとして、Payload CMSが注目されています。Payload CMSは、ヘッドレスCMSとして柔軟なデータ管理を提供し、TypeScriptベースで開発者にとって扱いやすいのが特徴です。本記事では、Payload CMSをVercelにデプロイし、1日でCMSシステムを構築する方法を詳しく解説します。また、ストレージもサーバーレスにするために、NeonやSupabaseを活用する方法についても紹介します。

PayloadCMSは、Nextjsで書いてるのでVercelとの連携が抜群で、ヘッドレスなので設定やカスタムが自由です。導入しやすいし拡張性も高いスタートアップには最適なCMSツールです。

ヘッドレスCMSとは？

ヘッド、つまりフロントエンド（ビュワー）のないCMS（Content Management System 、コンテンツ管理システム）のことです。

https://bluemonkey.jp/media/column/Headless_CMS

必要なもの

- Node.js（最新版推奨）

- Vercelアカウント

- GitHubアカウント

1. Payload CMSのプロジェクトを作成

まず、Payload CMSのプロジェクトをローカル環境に作成します。

1npx create-payload-app my-cms
2cd my-cms
3npm install

このコマンドを実行すると、my-cmsというディレクトリにPayload CMSの基本的な構成がセットアップされます。

2. 環境変数の設定

Payload CMSを動作させるためにはMongoDBの接続情報を設定する必要があります。.env ファイルを作成し、以下の内容を追加します。

1PAYLOAD_SECRET=your-secret-key
2PORT=3000

2.1 Neonの設定

Payload CMSのデフォルトのファイルストレージはローカルですが、サーバーレス環境ではクラウドストレージを利用するのが望ましいです。NeonまたはSupabaseを使って、ファイル管理をサーバーレスにする方法を説明します。

Neonの設定:

Neon にサインアップし、新しいプロジェクトを作成。

データベースの接続情報を取得し、.env に追加。

1DATABASE_URL=postgresql://your-user:your-password@your-neon-db.neon.tech/your-database

payload.config.ts でNeonを利用するように設定。

1import { buildConfig } from 'payload/config';
2import { postgresAdapter } from '@payloadcms/db-postgres';
3
4export default buildConfig({
5  collections: [/* your collections */],
6  db: {
7    adapter: postgresAdapter,
8    url: process.env.DATABASE_URL,
9  },
10});

Supabaseの設定:

Supabase にサインアップし、新しいプロジェクトを作成。

ストレージ機能を有効にし、バケットを作成。

.env に接続情報を追加。

1SUPABASE_URL=https://your-supabase-url.supabase.co
2SUPABASE_KEY=your-supabase-key

payload.config.ts にSupabaseを利用するストレージ設定を追加。

1import { buildConfig } from 'payload/config';
2import { supabaseAdapter } from '@payloadcms/db-supabase';
3
4export default buildConfig({
5  collections: [/* your collections */],
6  upload: {
7    adapter: supabaseAdapter,
8    config: {
9      url: process.env.SUPABASE_URL,
10      apiKey: process.env.SUPABASE_KEY,
11    },
12  },
13});
14

3. Payload CMSをローカルで起動

環境変数を設定したら、以下のコマンドでPayload CMSを起動します。

1npm run dev

ブラウザで http://localhost:3000/admin にアクセスすると、Payload CMSの管理画面に入れます。

4. GitHubリポジトリにプッシュ

Vercelでデプロイするために、プロジェクトをGitHubにプッシュします。

1git init
2git add .
3git commit -m "Initial commit"
4git branch -M main
5https://github.com/your-username/my-cms.githttps://github.com/your-username/my-cms.git
6git push -u origin main

5. Vercelでデプロイ

Vercelにサインインし、新しいプロジェクトを作成します。

1. New Project をクリック

2. GitHubリポジトリを選択

3. MONGODB_URI や DATABASE_URL などの環境変数を設定

4. デプロイボタンをクリック

5. デプロイが完了すると、VercelのURLからPayload CMSにアクセスできます。

6. 色々修正

初期設定だと、metaタグ、faviconなどがPayloadのテンプレになっています。ここはCursorなどのAIを使って修正してみましょう

コードの修正を行なったあとは、必ずGithubにプッシュし、Vercelにデプロイしてください！

7. ページの修正及び記事の作成

PayloadCMSの管理画面にログインし、サイドバーにあるページの内容、SEOなどを修正します。記事を作成し、公開することで初めてのブログ完成です！

まとめ

たった1日でPayload CMSをVercelにデプロイし、CMSシステムを構築する方法を詳しく解説しました。さらに、NeonやSupabaseを活用することで、データベースやストレージもサーバーレスに対応可能です。

今すぐPayload CMSを試して、柔軟で拡張性のあるCMSを構築してみてください！