世界を旅して人生を楽しもう。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認証も設定しているので、記事の作成や更新もできます。試してみると面白いと思います。AuthorKD世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。0.0010このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。