【JAMstack】Next.js × Firebase で JAMstack なブログサイトを作る③［Hooks］

<!-- ======================================================= -->
# 概要
<!-- ======================================================= -->
本記事は、[【JAMstack】Next.js × Firebase で JAMstack なブログサイトを作る②［ブログサイト］](https://qiita.com/nemutas/items/bb312d26cf3349ce0230)の続きとなっています。

本記事では、**Firebase Functinos**を使用して、Firebase Storageの記事に変更があった場合にVercelにデプロイリクエストを送るHook関数を作成します。
これによって、Vercelでリビルドが走り、そのときに変更された状態のFirebase Storageの記事を取得するので、ブログサイトも更新される寸法です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358498/b8c4bb10-e8bf-fe28-46a0-3eb3dbe8b579.png" width="500px">

<!-- ======================================================= -->
# プロジェクトの作成
<!-- ======================================================= -->
### Firebase Functions
**Firebase Functions**のプロジェクトを作成しておきます。
※ Firebase自体のプロジェクトは、[【JAMstack】Next.js × Firebase で JAMstack なブログサイトを作る②［ブログサイト］](https://qiita.com/nemutas/items/bb312d26cf3349ce0230)で作成したものを使います。

### Hooks

firebase-toolsをインストールしていない場合は、インストールします。

```
npm i -g firebase-tools
```

作業フォルダを作成して、フォルダ内でコマンドプロンプトを使用して以下を実行します。

```
firebase init
```

初期設定は、以下のようにします。

- Functionsを選択します。
- 既存プロジェクトとして、Firebaseのプロジェクトを選択します。
- あとは、使用言語としてTypeScript、Eslint（お好み）、npmの依存関係の設定をします。

![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358498/500cfd85-109a-a75b-b7c0-5cc04e39c826.png)

<!-- ======================================================= -->
# Hooksの作成
<!-- ======================================================= -->
### パッケージ インストール
作成したプロジェクトに、使用するパッケージをインストールします。
パッケージは、**functions**フォルダ内で管理されているので、そこにインストールします。

```
cd functions
npm i axios dotenv
```
- axios：APIリクエストを送るときに使用します
- dotenv：Node環境で環境変数ファイル（.env）を使用できるようにします


### デプロイAPIの設定
Vercelにデプロイリクエストを送るためには、APIを取得して`GET`または`POST`する必要があります。
APIの取得は、Dashboardからできます。

**Setting** > **Git** > **Deploy Hooks**

![無題4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358498/d0d45766-b90b-dbf2-b1d5-baf9abcfed8a.png)

プロジェクトに、取得したAPIアドレスを設定します。
functions以下に**.env**ファイルを作成します。

```.env:functions/.env
VERCEL_DEPLOY_HOOK=https://api.vercel.com/v1/integrations/deploy/******
```

### コーディング
ドキュメントに従いコーディングします。

https://firebase.google.com/docs/storage/extend-with-functions?hl=ja

コーディング部分は、長くなるので割愛します。成果物のGitHubリンクを参照してください。
対象のファイルは以下です。（すべてfunctions以下のファイルです）

- index.ts
- fetch/vercel.ts

要点である**Hook関数**は以下のように書きます。

```index.ts
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です。

<!-- ======================================================= -->
# 成果物
<!-- ======================================================= -->

https://github.com/nemutas/blog-manager-hooks

<!-- ======================================================= -->
# まとめ
<!-- ======================================================= -->
実装自体は簡単でしたが、Firebase Functionsへのデプロイがうまく行かなく沼りました。
権限が足りてないのかなーとか色々やりましたが、結局コーディング上の簡単なミスでした😂

Next >

https://qiita.com/nemutas/items/04fba5681101fd450bda