世界を旅して人生を楽しもう。APIを連携させて、バックエンドはWordPressで管理しつつ、フロントエンドをGatsbyJSで簡単に構築する方法を紹介します。APIを連携させることで、WordPressの管理画面の使い勝手を維持したまま、フロントエンドをモダンに書き換えることが可能です。CMSを構築する上で今最も暑い組み合わせです。今回はJWT認証の設定までさらっと完成させます。APIを連携させて動かしてみましょう。GatsbyJSとは?GatsbyJSとは、ReactとGraphQLを前提とした静的サイトジェネレーターです。静的サイトなので、ページの表示の際にGraphQLで必要な情報を1回取得し、静的ページを生成して表示する仕組みです。開発はReactで行うことになります。以下の準備が完了している必要があります。APIを使う開発環境をDocker上に構築する方法(JWT認証編)」を参照してください。)詳しくは「環境」を参照してください。APIを連携していきましょう。APIを使う開発環境をDocker上に構築する方法(JWT認証編)」から持ってきて使います。0.0.0.0:8080->8080/tcp以前の記事のWordPressの設定がすべて完了している前提で進めますが、一応補足しておくと、以下の2つのプラグインのインストールと設定が必要です。MenusWordPressにテストデータを入れる今回用の固定ページおよびヘッダーメニューのテストデータを準備します。Page"WordPressの管理画面にログインして確認してみましょう。APIの連携GatsbyJSプロジェクトを作成するGatsbyJSのプロジェクトを生成し、必要なプラグインをインストールします。page.jsGatsbyJSとWordPressを連携するために「gatsby-source-wordpress」というプラグインをインストールしています。GatsbyJSにWordPress連携の設定を追加するGatsbyJSにWordPress連携の設定を追加しましょう。],};GatsbyJSのGraphiQL画面でWordPress連携を確認するGatsbyJSを起動します。developブラウザで「http://localhost:8000/___graphql」にアクセスし、GraphQLでWordPressのページ情報「allWordpressPage」とヘッダーメニュー情報「allWordpressWpApiMenusMenusItems」を取得できるか確認します。}}GatsbyJSとWordPressとの連携が確認できました。GatsbyJSの画面を少し作るWordPressから取得したデータを表示させるだけの簡単なフロントエンドをGatsbyJSで作ります。Header;簡単ですが完成です。最後にGatsbyJSを起動してWordPressから取得した情報が表示されることを確認しましょう。GatsbyJSを起動します。developブラウザで「http://localhost:8000/」にアクセスすると、「http://localhost:8000/welcome」にリダイレクトされ、WordPressから取得したWelcomeページが表示されました。Page」のリンクをクリックすると、「http://localhost:8000/test」に遷移し、WordPressから取得したTestページが表示されました。APIを連携させることができるようになったと思います。今回は取得まででしたが、JWT認証も設定しているので、記事の作成や更新もできます。試してみると面白いと思います。CMSという手法が人気を集めています。APIを使う開発環境をDocker上に構築し、JWT認証でCRUDする方法を紹介します。はじめに従来は、WordPressでCMSを構築する場合、フロントエンドとバックエンドを分けることなく、外観はCSSとPHPでテーマとして作成する方法が一般的でした。CMSという手法が人気になっています。CMSとして利用できるようになっています。(詳しくは公式ドキュメントを参照してください。APIのバックエンドとしてDocker上に開発環境として構築する方法を紹介します。APIにした場合に必須の認証としてJWT認証の導入方法も紹介します。それでは、やっていきましょう。CMS)とは、フロントエンドで提供しているコンテンツを配信する機能と、バックエンドで提供しているコンテンツを管理する機能を分離して、バックエンドに特化したCMSです。WordPressは従来から両方の機能を提供していますが、APIの機能をもたせることでバックエンドに特化させて機能させることができます。前はAPI用のプラグインが必要でしたが、今ではデフォルトでWordPressのAPIが利用可能です。事前に以下を準備しておく必要があります。Dockerがインストールされていること詳しくは「環境」を参照してください。必要なファイルとフォルダを作成します。ports.confApacheの設定ファイルを作成する今回はルートを「/var/www/html/wordpress」として、8080ポートでリッスンするようにします。WordPressWordPress用のDockerfileを作成する今回はApacheベースのPHPの公式イメージにWP-CLIでWordPressを入れることにします。Composeで作成します。"./data:/var/lib/mysql"WP-CLIでWordPressを初期設定する今回のDockerイメージにWP-CLIをインストール済みなので、それを使ってWordPressの最小限の設定をします。--activateパーマリンクは分かりやすくポスト名を設定しています。プラグインは最低限として以下を入れています。APIブラウザで「http://localhost:8080/wp-admin/」にアクセスしてWordPressの管理画面にログインし、ヘルスチェックを確認します。CMSとして利用可能になっています。JWT認証用の変数をWordPressに追加するJWT用のプラグインの設定の通りにWP-CLIで変数を設定します。「JWT_AUTH_SECRET_KEY」は適当にランダム値を設定することにします。constantなお、「.htaccess」の設定はすでに完了しています。APIのCRUDの動作を確認してみましょう。初期データの削除WordPressに最初から入っている記事と固定ページのデータを削除し、一応メニューのデータも削除します。jq[]JWTトークンの取得まずはユーザ名とパスワードからJWTのトークンを取得します。}}このトークンを使って記事、固定ページをCRUDしましょう。記事を3つ作成して公開します。作成した記事を取得します。記事を1つ更新します。記事を1つ削除します。固定ページを3つ作成して公開します。作成した固定ページを取得します。固定ページを1つ更新します。固定ページを1つ削除します。}]メニューの取得メニューは取得のみになるので、WP-CLIでデータ作成して、取得します。}}うまくいきましたね。CMSをDocker上で構築する場合に発生する可能性のあるエラーと対処法を紹介します。permalinks」に変更する。permalinks」と呼ばれており、デフォルト以外に変更する必要がある。デフォルトでは「http://localhost:8080/?rest_route=/wp/v2/」ならアクセスできる。)Apacheに「mod_rewite」を入れる。rewrite」でインストールする必要がある。「.htaccess」はWordPressで自動で作成される。Editor」のプラグインを導入する。(新しいエディタ「Gutenberg」の不具合の場合がある)外観のテーマの編集の更新で失敗する場合の対処法Dockerのホスト側ポートとコンテナ側ポートが同じになるように設定する(今回の場合は「docker-compose.yml」のports、「ports.conf」のListenポート、「000-default.conf」のVirtualHostを8080に統一しました。APIを使う開発環境が構築できましたね。AuthorKD世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。0.0010このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。