概要
本記事は、【JAMstack】Next.js × Firebase で JAMstack なブログサイトを作る②［ブログサイト］の続きとなっています。
本記事では、Firebase Functinosを使用して、Firebase Storageの記事に変更があった場合にVercelにデプロイリクエストを送るHook関数を作成します。
これによって、Vercelでリビルドが走り、そのときに変更された状態のFirebase Storageの記事を取得するので、ブログサイトも更新される寸法です。
プロジェクトの作成
Firebase Functions
Firebase Functionsのプロジェクトを作成しておきます。
※ Firebase自体のプロジェクトは、【JAMstack】Next.js × Firebase で JAMstack なブログサイトを作る②［ブログサイト］で作成したものを使います。
Hooks
firebase-toolsをインストールしていない場合は、インストールします。
npm i -g firebase-tools
作業フォルダを作成して、フォルダ内でコマンドプロンプトを使用して以下を実行します。
firebase init
初期設定は、以下のようにします。
- Functionsを選択します。
- 既存プロジェクトとして、Firebaseのプロジェクトを選択します。
- あとは、使用言語としてTypeScript、Eslint（お好み）、npmの依存関係の設定をします。
Hooksの作成
パッケージ インストール
作成したプロジェクトに、使用するパッケージをインストールします。
パッケージは、functionsフォルダ内で管理されているので、そこにインストールします。
cd functions
npm i axios dotenv
- axios：APIリクエストを送るときに使用します
- dotenv：Node環境で環境変数ファイル（.env）を使用できるようにします
デプロイAPIの設定
Vercelにデプロイリクエストを送るためには、APIを取得してGETまたはPOSTする必要があります。
APIの取得は、Dashboardからできます。
Setting > Git > Deploy Hooks
プロジェクトに、取得したAPIアドレスを設定します。
functions以下に**.env**ファイルを作成します。
VERCEL_DEPLOY_HOOK=https://api.vercel.com/v1/integrations/deploy/******
コーディング
ドキュメントに従いコーディングします。
コーディング部分は、長くなるので割愛します。成果物のGitHubリンクを参照してください。
対象のファイルは以下です。（すべてfunctions以下のファイルです）
- index.ts
- fetch/vercel.ts
要点であるHook関数は以下のように書きます。
import * as functions from 'firebase-functions';
const region = 'asia-northeast1';
const objectBuilder = functions.region(region).storage.object();
/**
* 記事を投稿したときのHook
*/
export const onPostArticle = objectBuilder.onFinalize(async object => {
// デプロイ処理
});
/**
* 記事を削除したときのHook
*/
export const onDeleteArticle = objectBuilder.onDelete(async object => {
// デプロイ処理
});
デプロイ
以下を実行して、Firebase Functionsにデプロイします。デプロイには少し時間がかかります。
npm run deploy
動作確認
Firebase Storageに記事ファイル（Markdownファイル）をアップロードまたは削除して、VercelのDashboardでリビルド・デプロイが走っていればOKです。
成果物
まとめ
実装自体は簡単でしたが、Firebase Functionsへのデプロイがうまく行かなく沼りました。
権限が足りてないのかなーとか色々やりましたが、結局コーディング上の簡単なミスでした😂
Next >