PayloadCMSをローカル環境で起動してみる方法
世の中のCMSはたくさんありますが、そのうちの1つにNode.jsとTypeScriptで構築されたPayloadCMSというものがあります。
私はWordPressにはけっこう精通してるほうなんですけど（このブログもWordPressです）、それ以外のCMSにも今時は触っておいた方がいいかなと思って、とりあえずPayloadCMSをローカル環境で起動できる方法まで調査し、実際に試してみました！
expand_more
PayloadCMSとは？
PayloadCMSはNode.jsベースで構築されたヘッドレスCMSです。一般的なCMSのようにビジュアルで操作できる管理画面を持ちながら、フロントエンドとは完全に切り離されているのが特徴です。
TypeScript/JavaScriptで柔軟に開発できる
PayloadCMSはTypeScriptまたはJavaScriptで自由にカスタマイズできます。設定ファイルもコードベースで管理できるため、従来のノーコードCMSと比べて、バージョン管理がしやすく、開発プロジェクトと統一感を持たせやすいのが大きな利点です。
開発者フレンドリーな設計
APIの自動生成や、豊富なhooks、カスタム関数が用意されており、自分のロジックを組み込みやすい設計になっています。GraphQLやREST APIを簡単に使えるのも、フロントエンドとの連携がスムーズになるポイントです。
テンプレートを活用すれば、初期開発もスムーズ
いくつかの公式テンプレートからプロジェクトを簡単に作成することができます。ブログ、認証付きアプリ、eコマース向けなどのテンプレートが用意されており、簡単なサイトであれば、初期開発を短時間で立ち上げることが可能です。初心者には非常に便利です。
オープンソースで活発に開発中
Payloadはオープンソースで公開されており、公式ドキュメントも充実していて、コミュニティも成長中です。商用利用も可能で、小規模な個人サイトから大規模なWebサービスまで幅広く対応できます。
開発環境の準備
あの黒い画面、ターミナルを使っていきます！開発初心者は敬遠しがちですが、頑張って進めていきましょう！！！
Node.js をインストール
ターミナルを起動したら、まずはNode.jsがインストールされているか確認しましょう
node -v20.14.0のような数字が出たらインストールされています。
インストールされていない場合はNode.jsをインストールしてください。
Payloadプロジェクトのデータを入れるフォルダに移動
プロジェクトを作りたいフォルダに移動します
cd ここにフォルダのパスを入力パスがわからん！という場合（Mac OS）
プロジェクトを作りたいフォルダが入っているフォルダをFinderで開きます。
ターミナルで cd と半角スペースを入力した後に、移動したいフォルダをターミナルにドラッグ&ドロップします。
そうすると、ターミナルにパスが表示されるので、そのままエンターを押すとフォルダに移動できます。
Payloadプロジェクトを作成
いよいよ本命！PayloadCMSをインストールしましょう！
npx create-payload-app@latest入力してエンターを押すといくつか質問されるので順々に回答していきます。
プロジェクト名を決定
「Project name?」と聞かれるのでプロジェクト名を入力します。
入力したプロジェクト名で新しいフォルダが作成されます。
英数字、-（ハイフン）、_（アンダーバー）が使えます。日本語は使用できません🙅♀️
今回は、お試しでブログを作成するので、「payload-blog」としておきます。
テンプレートを選択
choose project template. の後に何種類かのテンプレートが表示されます。
blank
テンプレート無しのまっさらな状態から始めたい場合
website
一般的なWEBサイトやブログなどのCMSとして利用する場合。
ecommerce
ECサイト（オンラインストア）向け。商品・カテゴリ・注文などを扱うサイト構築用。
with-cloudflare-d1
Cloudflare Workers などのサーバーレス環境で Payload を実行したい場合。
plugin
Payload のプラグインを開発するためのテンプレート。
今回はブログを作りたいので「website」を選択します。
キーボードの下矢印で「website」まで移動し、エンターを押します。
データベースを選択
Select a database. の後に何種類かのデータベースが表示されます。
- Cloudflare D1 SQlite
- MongoDB
- PostgreSQL
- SQLite
- Vercel Postgres
今回は「MongoDB」を選択します。
私はデータベースにあまり詳しくないので、気になる方はご自分で調べてください・・・。お役に立てず申し訳ない。
MongoDB の接続先（コネクションURL）を入力
データベースを選択すると以下の文言が表示されます。
Enter MongoDB connection string
mongodb: //127.0.0.1/payload-blogどの MongoDB に接続する？という設定です。
「payload-blog」は先ほど入力したプロジェクト名です。
ローカルに MongoDB をまだインストールしてないなら、今入力しても接続できない状態です。
後でこの設定は変更できるので、とりあえずエンターで問題ありません。
ここまで終わったら「Using npm」と表示され、やっと、やっと、、PayloadCMSがインストールされます！！！！！
ちょっと時間がかかるのでしばらく待ちましょう。
🍵
PayloadCMSのインストール完了
Successfully と表示されたら問題なくインストールが完了しています！
◇ Successfully installed Payload and dependencies
│
◇ Payload project successfully created!起動してみる
起動しましょう！
cd payload-blog
npm run devプロジェクトフォルダに移動してから、「npm run dev」で起動します。
「Starting…」まで表示されたらブラウザでアクセスしてみましょう。
http://localhost:3000/
これでアクセスできたら、完了です！
npm run dev したらエラー出ちゃった人への解決方法👍
エラー内容によって解決方法が違います。
いっぱい文章が出てくるので、その中からエラー内容を探してください。ChatGPTに聞くのが一番早いと思います・・・・。
npm error Your cache folder contains root-owned files
npm のキャッシュディレクトリに「root（管理者権限）で作られたファイル」が混ざってるため起動できないよ！というエラーです。
解決方法：フォルダの所有権を直し、パッケージを再インストール
ターミナルで以下を入力してエンター！
sudo chown -R $(whoami) ~/.npmパスワードを尋ねられるので、Macを起動するときのパスワードを入力しましょう。
（入力しても何も表示されないですがそれが正常🙆♀️カーソルとかも移動しないからどこまで入力したか忘れるよね・・・）
パスワードを入力したらエンター！
所有権がなかったためインストールできなかったパッケージを再度インストールします。
npm installインストールが完了したら起動し直しましょう
npm run devError: cannot connect to MongoDB. Details:
MongoDBに接続できないよ！というエラーです。
だって、まだMongoDBインストールしてないから当たり前だよね🤣
さっき「後でインストールするから！」って言ったし。
解決方法：MongoDBをインストールする！
インストールする方法は後ほど記事にします・・・・・
待てない方はご自分でインストールどうぞ。
👉️ https://www.mongodb.com/
インストールが完了したら起動し直しましょう
npm run devPayloadCMSの管理画面にログインしてみよう
http://localhost:3000/ にアクセスするとPayloadCMSが起動しているのを確認できます。
管理画面には以下のURLでアクセスします。
http://localhost:3000/admin/
初回ログインするとアカウント作成画面が表示されます。
初回ログインのスクリーンショットを撮り忘れていたので、2回目以降の画面になります。
これにパスワード確認用のフィールドが追加され、全部で3つの入力欄があります。
ログインに必要なので、パスワードはどこかでメモしておきましょう。
管理画面に入れました！
まとめ：新しい技術を覚えるのは楽しい
WordPressもまだまだ現役ですし、良いところもたくさんあります！しかし、新たな技術を覚えていくこともまた大事です！じゃないと時代に取り残されてどんどん他の人に先を越されてしまいます。(* ˘꒳˘)⁾⁾
簡単なカスタマイズなら意外と容易にできるので、ぜひトライしてみてください！
0件のコメント
コメントはまだありません。最初の一人になりましょう！