개요

이 기사는 【JAMstack】Next.js × Firebase로 JAMstack인 블로그 사이트를 만드는 ①[개요]의 연속입니다.

이 기사에서는 Firebase Storage에서 블로그 사이트 기사를 검색하는 프로세스를 구현합니다.

블로그 사이트의 병아리 만들기

블로그 사이트는 Next.js의 공식 자습서를 기반으로 작성됩니다.
또한 Next.js를 개발하는 Vercel의 Hosting 사이트(Vercel)에 배포합니다.

문서는 모두 영어입니다만, 일본어로 해설해 주시고 있는 동영상이 있습니다.
매우 이해하기 쉽기 때문에, 이쪽을 보면서 작성하는 것을 추천합니다.

※ 동영상의 시리즈의 번외편으로서, 마지막으로 GitHub에 업로드하고 있는 Markdown 파일을 취득하는 처리를 추가하고 있습니다만, 이번의 구현에서는 불필요합니다.
또한 모든 파일을 TypeScript에 대응시킵니다. 여기 참조

Firebase 프로젝트 만들기

블로그 사이트 기사를 Firebase Storage에서 가져오기 위해 Firebase 프로젝트를 만듭니다.
작성 절차는 아래 문서의 Firebase 프로젝트 작성을 참조하십시오.

※ 리전의 선택이 있는 경우는, 모두 asia-northeast1로 통일합니다.

프로젝트를 작성한 후 Storage를 작성하십시오.

스토리지에서 데이터 검색

Next.js의 SSG · SSR에서 Firebase를 취급하는 경우의 함정으로서 Firebase의 처리가 서버 측에서 동작하게됩니다.
서버측에서 Firebase를 처리하려면 firebase-admin을 사용합니다. 이렇게 하려면 Firebase에서 개인 키를 가져와야 합니다.

취득 방법은 다음을 참고하십시오.

패키지 추가

프로젝트에 다음을 추가합니다.

npm i firebase firebase-admin text-encoding

npm i -D @types/text-encoding

환경 변수 파일 추가

프로젝트 루트 바로 아래에 다음을 추가합니다.

.env.local

FIREBASE_STORAGE_BUCKET="<storageBucket>"
FIREBASE_SECRET_PROJECT_ID="<project_id>"
FIREBASE_SECRET_CLIENT_EMAIL="<private_key_id>"
FIREBASE_SECRET_PRIVATE_KEY="<private_key>"

storageBucket은 Firebase 프로젝트의 SDK の設定と構成를 참조하십시오.
project_id, private_key_id, private_key는 Firebase에서 가져온 개인 키입니다.

코드 추가/변경

코딩 부분은 길어지므로 할애합니다. 아티팩트의 GitHub 링크를 참조하십시오.
추가·변경한 파일은 다음과 같습니다.

firebase/nodeApp.ts (추가)

firebase/nodeFunctions.ts (추가)

lib/posts

pages/index.ts

pages/posts/[id].tsx

구현은 이쪽을 참고로 했습니다.

문서

Firebase Storage 디렉토리 구성

Firebase Storage에 posts라는 폴더를 만들고 그 안에 블로그 기사를 넣을 수 있도록 했습니다.

동작 확인

설정 및 구현이 완료되면 Firebase Storage에 블로그 기사를 배치하여 개발 환경에서 블로그 사이트를 실행합니다.
개발 환경에서 실행하는 경우 각 요청에 대해 기사를 검색합니다. (배포하는 경우, SSG는 빌드시에 취득)

npm run dev

Vercel에 환경 변수 설정

프로덕션 환경에서 작동하려면 .env.local의 내용을 Vercel 환경 변수로 설정해야 합니다.

Setting > Enviroment Variables

배포

Vercel에 배포합니다.
GitHub와 연계되어 있으면(튜토리얼대로 작성하고 있으면), GitHub에 푸시(병합)한 단계에서 자동으로 리빌드 배포됩니다.

아티팩트

요약

Next.js (SSG)의 getStaticPaths와 getStaticProps 부분에서 Firebase를 처리하는 경우 서버 측 구현이 필요하다는 것이 중요합니다. (말해 보면 당연합니다만... 이 함정에 빠졌습니다)

Next >