개요

이 기사는 【JAMstack】Next.js × Firebase 로 JAMstack인 블로그 사이트를 만드는 ②[블로그 사이트] 의 계속이 되고 있습니다.

이 기사에서는 Firebase Functinos를 사용하여 Firebase Storage 기사에 변경 사항이있을 때 Vercel에 배포 요청을 보내는 Hook 함수를 만듭니다.
이를 통해 Vercel에서 재구성이 실행되고 그 때 변경된 상태의 Firebase Storage 기사를 얻을 수 있으므로 블로그 사이트도 업데이트되는 치수입니다.

프로젝트 만들기

Firebase Functions

Firebase Functions 프로젝트를 만들어 둡니다.
※ Firebase 자체의 프로젝트는 【JAMstack】Next.js × Firebase로 JAMstack인 블로그 사이트를 만드는 ②[블로그 사이트] 에서 작성한 것을 사용합니다.

후크

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 파일을 만듭니다.

functions/.env

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

코딩

문서에 따라 코딩합니다.

코딩 부분은 길어지므로 할애합니다. 아티팩트의 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입니다.

아티팩트

요약

구현 자체는 쉬웠지만 Firebase Functions에 배포하는 것은 잘 진행되지 않았습니다.
권한이 부족한 것일까-라든지 여러가지 했습니다만, 결국 코딩상의 간단한 실수였습니다 😂

Next >