【後編】GridsomeとContentfulを使って、簡単に更新できる静的LPページを作ってみる

diffeasyアドベントカレンダー23日目の記事で、前回の「【前編】GridsomeとContentfulを使って、簡単に更新できる静的LPページを作ってみる」の続きです。

みなさん、あと2日でクリスマスですがいかがお過ごしでしょうか？
僕はというもの、12月に入ってから彼女からアドベントカレンダー、自称：沙枝ベントカレンダーを毎日もらっては開けているのですが、早くメインのプレゼントが開けたくて開けたくて喉から手が出そうです😈（自室の手の届くところにすでに置いてあるので…）

そんなことはさておき、前回

1. Contentfulでお知らせコンテンツの作成
2. Gridsomeで 1. で作ったお知らせコンテンツの表示

までを作りました。
今回は、

1. Firebase Hostingへのデプロイ
2. Github Actionsを使ってContentfulでの変更を検知し、自動デプロイ

を作っていきたいと思います💪

サンプルリポジトリも作ったので、よかったら見てください😉
https://github.com/tk07Sky/deadvent-2019-gridsome-sample

事前準備🙇‍♂️

今回はFirebase Hostingを使うので、Firebaseプロジェクトの作成（名前はなんでもいいです）と、Firebase CLIのインストールを行ってください。
また、GitHubも使うので、アカウントの作成や、Gridsomeで作ったアプリケーションをアップするリポジトリ（名前はなんでもいいです）を作成しておいてください。

Firebase Hostingにデプロイしてみる

Firebase Hostingのセットアップ

まず、ターミナルでfirebase initを打って、プロジェクトにFirebaseの設定を行っていきます。
次に、どの設定を組み込むのかを問われるので、Hostingのみにチェックを入れます。

次にプロジェクトを作るか選択するか問われるのでUse an existing projectを選択し、事前準備で用意してもらっているプロジェクト名を選択します。
その後は、一旦エンターを押し続けてFirebaseの設定を終わらせます。

Firebaseの設定を終えると、プロジェクトルートにpublicフォルダができていると思いますが、使わないので削除しておいてください。

Gridsomeコマンドで静的ページを生成し、Hostingのアップロード対象に設定する

Gridsomeのbuildコマンドを使って、Firebase Hostingにアップロードするための静的ページを作ります。

$ npm run build

上コマンドを実行すると、プロジェクトルートにdistフォルダができるので、このフォルダをFirebase Hostingのアップロード対象に設定します。
firebase initをした際に、プロジェクトルートにfirebase.jsonが生成されていると思うので、中身を書き換えていきます。

firebase.json

{
  "hosting": {
    "public": "dist", // ←ここ
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

デプロイしてみる

ターミナルで

$ firebase deploy --only hosting

を実行してみましょう！
成功すれば、下画像のように Deploy complete! の文字とHosting先のURLが表示されるはずです。

🎉🎉🎉🎉🎉

Github Actionsを使ってContentfulでの変更を検知し、自動デプロイされるようにする

Firebase Hostingのアクセストークンを取得する

自動デプロイする際に必要なので取得していきます。
ターミナルで

$ firebase login:ci

を入力すると、firebase loginしたときと同じように認証画面に飛ぶので、流れに沿って進みます。
認証が終わるとターミナルにトークンが表示されるので、コピーしておきます。

Github Actionsを設定する

まずはGithub Actionsのワークフローを作っていきます。
Github Actionsのワークフローはプロジェクト直下に.github/workflows/**.ymlの形で追加してきます。

$ touch .github/workflows/ci.yml
$ vim .github/workflows/ci.yml

まずワークフロー名を決めます

.github/workflows/ci.yml

# 今回はciと名付けます
name: ci

次に、何のアクションを起点として発火するかを決めます。
今回はmasterブランチにpushされたときか、外部からリポジトリにGitHub APIを叩かれたときに発火するよう設定します。
外部からのイベントをキャッチするには、repository_dispatchというGitHubのWebhookイベントを使用します。

.github/workflows/ci.yml

on:
  push:
    branches:
      - master
  repository_dispatch:

次に、GitHub Actions上でGridsomeのビルドとデプロイをするjobを書きます。

大まかな部分の説明は公式ドキュメントやプラグインのドキュメントに載っているので割愛しますが、今回知ってほしい点を説明すると

• 外部に公開できない.envの内容やFirebase tokenなどは、GitHubのSecretsという機能を使って、そこから呼び出すようにする
• 開発の際に使っていた.envはgitの監視外にありそのまま使えないので、ビルドするときに指定するようにする

という感じです。

.github/workflows/ci.yml

jobs:
  build:
    name: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: yarn install
      - name: Build
        run: yarn build
        env:
          CONTENTFUL_SPACE_ID: ${{ secrets.CONTENTFUL_SPACE_ID }}
          CONTENTFUL_ACCESS_TOKEN: ${{ secrets.CONTENTFUL_ACCESS_TOKEN }}
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: dist
          path: dist

  deploy:
    name: deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: dist
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

以上の説明をガッチャンコすると、下のようになります。

.github/workflows/ci.yml

name: ci

on:
  push:
    branches:
      - master
  repository_dispatch:

jobs:
  build:
    name: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: yarn install
      - name: Build
        run: yarn build
        env:
          CONTENTFUL_SPACE_ID: ${{ secrets.CONTENTFUL_SPACE_ID }}
          CONTENTFUL_ACCESS_TOKEN: ${{ secrets.CONTENTFUL_ACCESS_TOKEN }}
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: dist
          path: dist

  deploy:
    name: deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: dist
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Secretsを登録する

GitHubには、外部に公開したくない情報を管理するSecretsという機能があります。
ContentfulのAPIキーやFirebase tokenは外部に漏らすとまずいので、ここに設定していきます。
事前に作ってもらっていたリポジトリの画面からSettings → Secretsを選択してください。

Secretsには今回

• CONTENTFUL_SPACE_ID
• CONTENTFUL_ACCESS_TOKEN
• FIREBASE_TOKEN

の3つを登録します。
登録は一つずつ行ってください。

登録例

Name
CONTENTFUL_SPACE_ID

Value
YOUR_CONTENTFUL_SPACE_ID

下画像のようになれば、登録完了です✨

GitHub Personal access tokenを取得する

外部（今回はContentful）からのWebhookイベントを受信するために必要なPersonal access tokenを取得します。
右上の自分のアイコン → Settings → Developer settings → Personal access tokensからGenerate new tokenを選択します。
下のような画面が出てくるので、Noteには覚えやすい名前を設定し、repoにチェックを入れてください。

最後に一番下のgenerateを押すとトークンが発行されます。次で必要になるので、どこかに控えておいてください。

ContentfulのWebhookの設定をする

最後に、ContentfulのWebhook設定をします。

NameとURLの設定

Contentfulの画面を開いてSettings → Webhooksから、右上のAdd Webhookを選択してください。
すると、下画像の画面が開くので、Nameには好きな名前を、URLにはhttps://api.github.com/repos/${YOUR_GITHUB_ID}/${YOUR_RIPOSITORY_NAME}/dispatchesを指定してください。

トリガーの設定

そしてこのままだとContentfulで行ったすべての行動がWebhookを発動するトリガーになるので、Triggersは下のようにしておいたほうがいいです！

Headerの設定

Headersも追加していきましょう。
今回は

• Accept
• Authorization
• User-Agent

を追加していきます。
HeadersセクションのAdd custom headerを選択して、下のように追加してください(User-Agentは自分のGitHub IDに変更してください)。
ついでにContent typeもapplication/jsonにしましょう。

Payloadの設定

PayloadはGitHubのAPIで{"event_type": "event name"}を指定しないといけないらしいので、指定していきます。
Customize the webhook payloadを選択し、下のように指定します。

すべて設定が終わったら、右上のSaveを押して保存しましょう！
保存後、新しく記事をPublishすると、GitHub Actionsがうまく動いてるはずです！👍

これですべて終了です！
お疲れさまでした🎊

終わりに

いかがでしたか？
思ってた以上に結構ボリューミーになったのですが、作って公開までできればサクッとメンテしたりページ追加できると思うので、よかったらぜひ試してみてください✨