ホーム>プログラミング関連>AI ソースコード
ダウンロード

WordPress + React Starter Kit

PostlightのヘッドレスWordPress + React Starter Kitは、3つのことをスピンアップする自動化されたツールセットです。

  1. WP REST APIおよびGraphQLを介してデータを提供するWordPressバックエンド。
  2. WP GraphQL APIを搭載したサンプルの反応フロントエンドは、投稿、ページ、カテゴリ、メニュー、検索、およびユーザーサインインをサポートします。
  3. 別のサンプルサーバー側には、WP REST APIを搭載したnext.jsを使用してReact FrontEndをレンダリングしました。

この便利な紹介でそれについてすべてを読むことができます。

内容：

  • 確立された安定したREST APIを提供するコアWordPressインストールをブートストラップする自動化されたインストーラー。
  • WordPress用の新しい、進行中のGraphQL APIを公開するプラグイン。
  • WordPressプラグインカスタム投稿タイプとカスタムフィールド（高度なカスタムフィールドとカスタムポストタイプUI）を設定する必要があります。
  • WP REST API（ACFからWP APIおよびWP-Rest-API V2メニュー）でこれらのカスタムフィールドとWordPressメニューを公開するプラグイン。
  • JWT認証プラグイン：JWT WP RESTおよびJWT WP GRAPHQL。
  • すべてのスターターWordPressテーマコードと設定は、かなりのパーマリンク、CORS Allow-Originヘッダー、および簡単にデバッグするための便利なロギング機能など、ヘッドレスが必要です。
  • WP移行DB Proとその付随するプラグイン（ライセンスが必要）を使用して、Web上のどこにでも既存のWordPressインストールからデータを簡単にインポートするメカニズム。
  • サンプル、Starter FrontEnd React AppはGraphQLを搭載しています。
  • 別のサンプル、Starter FrontEnd React App、next.jsを介してレンダリングされたサーバー側、WP REST APIを搭載しています。
  • Dockerコンテナとそれらを管理するためのスクリプト。フロントエンドのReactアプリとバックエンドをローカルで簡単に実行するか、Dockerサポートを備えたホスティングプロバイダーに展開します。

始めましょう。

インストール

前提条件：開始する前に、Dockerをインストールする必要があります。 Linuxでは、Docker-Composeを個別にインストールする必要がある場合があります。

Docker frontend db-headless wp-headless構成し、デフォルトで4つのコンテナfrontend-graphql開始します。 

 docker-compose up -d

Dockerが初めてサービスを構築するまで数分待ってください。最初のビルド後、起動は数秒しかかからないはずです。

Dockerの出力をフォローして、Buildの進行状況とログを確認できます。 

 docker-compose logs -f

または、KitematicやVScode Dockerプラグインなどの便利なDockerツールを使用して、ログをフォローしたり、コンテナや画像を開始 /停止 /削除したりできます。

オプション： WordPressがまだDockerで実行されている間に、フロントエンドをローカルで実行できます。 

 docker-compose up -d wp-headless
cd frontend && yarn && yarn start

コンテナが実行されたら、ブラウザのReact FrontEndsとBackEnd WordPress管理者にアクセスできます。

フロントエンド

このスターターキットは、2つのフロントエンドコンテナを提供します。

  • WP REST APIを搭載したfrontendエンドコンテナは、next.jsを使用してレンダリングされ、ポート3000に露出しています：http：// localhost：3000
  • frontend-graphqlコンテナはgraphqlを搭載し、ポート3001に露出しました：http：// localhost：3001

フロントエンドの外観は次のとおりです。

フロントエンドスクリーンキャスト

Docker-Compose logsコマンドを実行してコンテナ名を実行することにより、 yarn start Outputに従うことができます。例えば： 

 docker-compose logs -f frontend

そのプロセスを再起動する必要がある場合は、コンテナを再起動します。 

 docker-compose restart frontend

PS：ページがオンデマンドで構築されているという事実により、開発モードのnext.jsフロントエンドの閲覧は比較的遅いです。生産環境では、ページの負荷が大幅に改善されます。

バックエンド

wp-headlessコンテナは、ホストポート8080でApacheを公開します。

  • ダッシュボード：http：// localhost：8080/wp-admin（デフォルトの資格情報postlight / postlight ）
  • REST API：http：// localhost：8080/wp-json
  • GraphQl API：http：// localhost：8080/graphql

このコンテナにはいくつかの開発ツールが含まれています。 

 docker exec wp-headless composer --help
docker exec wp-headless phpcbf --help
docker exec wp-headless phpcs --help
docker exec wp-headless phpunit --help
docker exec wp-headless wp --info

Apache/PHPログはdocker-compose logs -f wp-headlessを介して利用できます。

データベース

db-headlessコンテナは、ホストポート3307でMySQLを公開します。 

 mysql -uwp_headless -pwp_headless -h127.0.0.1 -P3307 wp_headless

コンテナでMySQLシェルを実行することもできます。 

 docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless

再インストール/インポート

WordPressをゼロから再インストールするには、実行してください。 

 docker exec wp-headless wp db reset --yes && docker exec wp-headless install_wordpress

mysqlを使用してmysqldumpからデータをインポートするには、実行してください。 

 docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless < example.sql
docker exec wp-headless wp search-replace https://example.com http://localhost:8080

別のWordPressインストールからデータをインポートします

WP Migrate DB Proと呼ばれるプラグインを使用して、別のWordPressインストールに接続し、そこからデータをインポートできます。 （プロライセンスが必要です。）

そうするために、最初に移行したMIGRATEDB_LICENSE ＆ MIGRATEDB_FROMを.envで設定し、コンテナを再作成して変更を制定します。 

 docker-compose up -d

次に、インポートスクリプトを実行します。 

 docker exec wp-headless migratedb_import

より高度な機能が必要な場合は、利用可能なWP-CLIコマンドをご覧ください。 

 docker exec wp-headless wp help migratedb

残りとGraphQL APIを拡張します

この時点で、WordPress Adminでカスタムフィールドのセットアップを開始し、必要に応じて、Postlight Headless WordPressスターターテーマにカスタムREST APIエンドポイントを作成できます。

主要なテーマコードはwordpress/wp-content/themes/postlight-headless-wpにあります。

また、GraphQL APIを変更および拡張することもできます。カスタムタイプを作成してリゾルバーを登録する例は、 wordpress/wp-content/themes/postlight-headless-wp/inc/graphqlにあります。

REST＆GRAPHQL JWT認証

WordPressユーザーにフロントエンドアプリを介してサインインする機能を提供するには、WordPress Saltジェネレーターのようなものを使用してJWTの秘密を生成し、 wp-config.phpで定義します。

残りのAPIの場合： 

 define('JWT_AUTH_SECRET_KEY', 'your-secret-here');

GraphQl APIの場合： 

 define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-here');

詳細については、必ずJWT RESTおよびJWT GraphQLドキュメントをお読みください。

糸くず

あなたが行くときにあなたのコードを並べることを忘れないでください。

WordPressのテーマの変更を並べるには、このようなphp_codesnifferを使用できます。 

 docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcs -v .

また、PHPCSエラーをAutofixを試みることもできます。 

 docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcbf -v .

JavaScriptアプリを並べてフォーマットするには、きれいなファイルとESLINT構成ファイルの両方が含まれています。

ホスティング

ほとんどのWordPressホストもノードアプリケーションをホストしていないため、ライブを開始するときは、フロントエンドのホスティングサービスを見つける必要があります。

そのため、Amazon Web ServicesやGoogle Cloud PlatformなどのDockerサポートを備えたホスティングプロバイダーに展開できるDockerコンテナにフロントエンドアプリをパッケージ化しました。高速で簡単な代替案については、今すぐチェックしてください。

一般的なエラーのトラブルシューティング

変化のアラートを破る - Docker

プロジェクトが既にセットアップされてから99b4d7bより新しいコミットに更新された場合、プロジェクトがDockerに移行されたため、再びインストールプロセスを実行する必要があります。また、MySQLデータを新しいMySQL DBコンテナに移行する必要があります。

Dockerキャッシング

場合によっては、 wp-headless画像（コンテナだけでなく）を削除して再構築する必要があります。

CORSエラー

WordPressインストールを展開していて、CORSの問題がある場合は、FrontEnd Origin URLで/wordpress/wp-content/themes/postlight-headless-wp/inc/frontend-origin.phpを更新してください。

ここに追加したいことを他に見ていますか？プルリクエストを送信してください！

？ Postlightの友達からのラボプロジェクト。ハッピーコーディング！

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて