Shifter Headless と Gridsome を使って Netlify でWebサイトを公開する

前回、 Shifter Headless と GitHub Pages を使ってWebサイトを公開するで作成した内容を Gridsome を使用して再現してみようと思います。

Gridsomeとは

Vue.js ベースで利用できる JAMstack フレームワーク です。
GraphQL を利用して記事などのデータ管理を行うのが特徴です。

同じ Vue.js フレームワークである Nuxt.js との違いは、 Gridsome のほうがより静的サイトジェネレータとして特化されており、 React.js の GatsbyJS と同じ立ち位置を取るフレームワークです。

Shifter Headless の準備

基本は Shifter Headless と GitHub Pages を使ってWebサイトを公開すると同じ手順で行います。
※本記事では、上記記事で作成した Shifter Headless をそのまま使用しています。

1. Shifter Headless を作成

Create new site (Headless) もしくは Create new のどちらかのボタンを押して、 Shifter Headless を新しく作成します。

作成が完了するとこのような画面になります。

2. 管理画面で記事を作成

WordPress admin URL からWordPressへログインし、いくつかサンプルとなる記事を投稿したら Shifter Headless での準備は完了です。

Gridsome を準備

ここから Gridsome を使用して、Webサイトのフロント画面を構築していきます。

1. Gridsome をインストール

Gridsome をインストールするためには node.js が必要となります。予めインストールしてください。

Gridsome のインストールには npm と yarn のどちらでもインストール可能ですが、今回は npm でインストールを行います。

npm install --global @gridsome/cli

※グローバルではなくローカルでインストールすると正常にコマンドが動作しない場合があります。

2. 新しい Gridsome プロジェクトを作成

以下のコマンドを実行して新しく Gridsome プロジェクトを作成します。
今回、 Shifter Headless を使用する前提のため、オプションとして wordpress を付与します。

gridsome create  プロジェクト名 wordpress

この時、新しくプロジェクトを作るとそのプロジェクト名でフォルダが作成されます。
そのフォルダ直下をGit管理対象として設定するため、フォルダ構造に注意して構築しましょう。

3. Git の設定

新しく作成されたプロジェクトフォルダに入って Git の設定を行います。

cd プロジェクト名
git init
git remote add origin GitリポジトリURL

4. gridsome.config.js を編集

gridsome.config.js を開くと以下のような構文があります。

plugins: [
  {
    use: '@gridsome/source-wordpress',
    options: {
      baseUrl: process.env.WORDPRESS_URL, // required
      typeName: 'WordPress', // GraphQL schema name (Optional)
    }
  }
]

これの baseUrl を Shifter Headless のダッシュボードに表示されている WordPress URL に置き換えます。

plugins: [
  {
    use: '@gridsome/source-wordpress',
    options: {
      baseUrl: 'Shifter Headless の WordPress URL', // required
      typeName: 'WordPress', // GraphQL schema name (Optional)
    }
  }
]

元の記述が env を読む様になっているようなので、おそらく env ファイルを作成し記述することで、直接 gridsome.config.js を編集しなくても大丈夫な気がしますが、今回はそのまま置き換えています。

5. Webサイト表示を確認

以下のコマンドを実行することによって、 Gridsome の開発環境をプレビューすることができます。

npm run develop

http://localhost:8080/ Webサイトの表示をプレビュー

この時、プレビュー画面で Cannot GET と表示され、コンソールで ERROR Failed to compile with 2 errors と表示されている場合は、エラー内容を解消してください。

今回発生したエラーでは、全記事中に、タグとメディア（画像など）が1つも存在していないことによるエラーが発生しました。

http://localhost:8080/___explore GraphQL のデータを確認

以下のようなQueryを実行することでWordPressにある記事すべての情報が取得できていることを確認できます。

query {
  allWordPressPost {
    edges {
      node {
        id
        title
        content
        slug
        date
      }
    }
  }
}

Webサイトの構築

1. Gridsome テンプレートのカスタマイズ

Webサイトの開発を行っている間は http://localhost:8080/ でプレビューを確認しながら作業を行いましょう。

プレビューを終了する時は Ctrl + C で終了できます。

今回は、 Shifter Headless と GitHub Pages を使ってWebサイトを公開すると同じフロントを再現しようとしたのですが、実は node.js も Gridsome も今回初めて触るため、何をどうしたらいいのかわからなかったので、一旦デフォルト表示のままで進めます。
後日、勉強して改めて構築し直そうと思います。

2. 静的サイトを生成

Webサイトの構築が完了したら以下のコマンドを実行することで、 dist フォルダに静的サイトとして生成することができます。

gridsome build

Netlify でホスティング

gridsome の README をそのままにしていると、以下のようなバッジが表示されていると思います。

このバッジをクリックすると Netlify との連携画面にリンクします。
画面の案内に従って、 Connect to GitHub で Netlify と GitHub を連携しましょう。

連携が完了するとリポジトリ名と WordPress URL を入力する欄が表示されるので、間違えないように入力し、 Save & Deploy を押します。

Configure your site.
Make this site your own. You can always tweak these settings later.

すると、 Netlify が静的サイトの生成とホスティング処理を開始するのでしばらく待ちます。

しばらくすると、デプロイが完了し、左上にプレビューするURLが表示されます。

ということで、今回デプロイされたWebサイトがこちら。

https://keen-bassi-826bef.netlify.app/

記事の更新

1. Shifter Headless で記事を作成

Shifter Headless の管理画面で更新チェック用の記事を作成します。

npm run develop が動いている状態で、ローカルのプレビューと Netlify のサイト表示状態を比較します。

このように、ローカル環境（画像左）には新しく記事が生成されているのがわかります。
しかし、 Netlify 環境には記事が表示されていません。これは、記事を生成したあとに静的サイトが生成されていないことが原因となります。

2. Netlify で自動デプロイする設定を追加

Netlify の管理画面より Site settings > Build & deploy に進みます。

Build hooks という項目で Add build hook を押します。

Build hook name を入力し、 Build するブランチを設定したら Saveを押します。

Build用のURLが生成されるのでそれをコピーしておきます。

次に、 Shifter Headless 側の管理画面からプラグインの JAMstack Deployments を有効化します。

有効化が完了すると、設定の中に Deployments という項目が追加されています。

設定項目の中にある Build Hook URL に先ほどコピーしたBuild用URLを入力します。
また、 Post Types Taxonomies で更新をトリガーとしたい項目にチェックを入れます。

必要項目の入力とチェックが完了したら一番下にある Save Settings で設定を保存します。

記事を更新すると、このように Netlify 管理画面側で自動で静的サイトへの生成とデプロイが動くようになります。

Netlify環境でもこのように無事デプロイされました。

まとめ

Gridsome を使うことで、しっかりと JAMstack なWebサイトを構築することができるようになりました。

前回の、 Shifter Headless と GitHub Pages を使ってWebサイトを公開するのときに懸念としてあった、 Shifter Headless の管理画面を立ち上げっぱなしにしていないといけない問題も、更新されたときにだけ静的サイトが生成されるように設定することで、懸念を解消することができたと思います。

あとは、 Vue.js と Gridsome そのものの扱いを勉強して、ちゃんとWebサイトが構築できるように頑張ろうと思います。

参考サイト

Developing Shifter Headless website/webapp with Gridsome and deploy to AWS Amplify Console
https://support.getshifter.io/en/articles/4156283-developing-shifter-headless-website-webapp-with-gridsome-and-deploy-to-aws-amplify-console