23【後編】GridsomeとContentfulを使って、簡単に更新できる静的LPページを作ってみるVue.jsFirebaseHostingcontentfulGridsomeGitHubActionsdiffeasyアドベントカレンダー23日目の記事で、前回の「【前編】GridsomeとContentfulを使って、簡単に更新できる静的LPページを作ってみる」の続きです。作ったお知らせコンテンツの表示までを作りました。CLIのインストールを行ってください。GitHubも使うので、アカウントの作成や、Gridsomeで作ったアプリケーションをアップするリポジトリ(名前はなんでもいいです)を作成しておいてください。initを打って、プロジェクトにFirebaseの設定を行っていきます。次に、どの設定を組み込むのかを問われるので、Hostingのみにチェックを入れます。projectを選択し、事前準備で用意してもらっているプロジェクト名を選択します。その後は、一旦エンターを押し続けてFirebaseの設定を終わらせます。Firebaseの設定を終えると、プロジェクトルートにpublicフォルダができていると思いますが、使わないので削除しておいてください。Hostingにアップロードするための静的ページを作ります。Hostingのアップロード対象に設定します。initをした際に、プロジェクトルートにfirebase.jsonが生成されていると思うので、中身を書き換えていきます。文字とHosting先のURLが表示されるはずです。Hostingのアクセストークンを取得する自動デプロイする際に必要なので取得していきます。loginしたときと同じように認証画面に飛ぶので、流れに沿って進みます。認証が終わるとターミナルにトークンが表示されるので、コピーしておきます。Actionsのワークフローを作っていきます。Actionsのワークフローはプロジェクト直下に.github/workflows/**.ymlの形で追加してきます。ci次に、何のアクションを起点として発火するかを決めます。APIを叩かれたときに発火するよう設定します。外部からのイベントをキャッチするには、repository_dispatchというGitHubのWebhookイベントを使用します。Actions上でGridsomeのビルドとデプロイをするjobを書きます。tokenなどは、GitHubのSecretsという機能を使って、そこから呼び出すようにする開発の際に使っていた.envはgitの監視外にありそのまま使えないので、ビルドするときに指定するようにするという感じです。}}以上の説明をガッチャンコすると、下のようになります。}}Secretsを登録するGitHubには、外部に公開したくない情報を管理するSecretsという機能があります。tokenは外部に漏らすとまずいので、ここに設定していきます。Secretsを選択してください。Secretsには今回CONTENTFUL_SPACE_IDCONTENTFUL_ACCESS_TOKENFIREBASE_TOKENの3つを登録します。登録は一つずつ行ってください。tokenを取得します。tokenを選択します。下のような画面が出てくるので、Noteには覚えやすい名前を設定し、repoにチェックを入れてください。最後に一番下のgenerateを押すとトークンが発行されます。次で必要になるので、どこかに控えておいてください。ContentfulのWebhookの設定をする最後に、ContentfulのWebhook設定をします。Webhookを選択してください。すると、下画像の画面が開くので、Nameには好きな名前を、URLにはhttps://api.github.com/repos/${YOUR_GITHUB_ID}/${YOUR_RIPOSITORY_NAME}/dispatchesを指定してください。トリガーの設定そしてこのままだとContentfulで行ったすべての行動がWebhookを発動するトリガーになるので、Triggersは下のようにしておいたほうがいいです!Headerの設定Headersも追加していきましょう。今回はAcceptAuthorizationUser-Agentを追加していきます。IDに変更してください)。typeもapplication/jsonにしましょう。name"}を指定しないといけないらしいので、指定していきます。payloadを選択し、下のように指定します。upLoginユーザーは見つかりませんでした。