개요

Next.js 공부를 시작하고 공식 튜토리얼에서 블로그 사이트를 만들었습니다.
그 과정에서, JAMstack과 같은 아키텍처를 알고, 최근 공부하고 있던 Firebase와 조합하면 스스로도 만들 수 있을 것 같았기 때문에, 노력해 만들어 보았습니다.

목표는 블로그 기사를 게시/삭제하면 자동으로 블로그 사이트에 반영되도록 합니다. 또한 블로그 사이트는 정적 사이트 생성(SSG)에 의해 SEO에 강하게 각 페이지를 고속으로 표시할 수 있는 것으로 합니다.

기사를 하나로 정리하면 길어지므로 분할했습니다.

【JAMstack】Next.js × Firebase로 JAMstack인 블로그 사이트를 만드는 ①[개요]

【JAMstack】Next.js × Firebase 로 JAMstack인 블로그 사이트를 만드는 ②[블로그 사이트]

【JAMstack】Next.js × Firebase로 JAMstack인 블로그 사이트를 만드는 ③［Hooks］

【JAMstack】Next.js × Firebase로 JAMstack인 블로그 사이트를 만드는 ④[관리 앱]

개발 환경

Windows10

VSCode

npm

JAMstack이란?

다음 기사에서 자세히 정리합니다.

아키텍처

이번에 작성하는 서비스는 다음과 같은 아키텍처로 구성되어 있습니다.

코딩

코딩 부분은 세 부분으로 나뉩니다.

블로그 사이트 : 공식 자습서를 따라 Next.js [TypeScript]에서 작성합니다. Vercel에 배포합니다.

Hooks: Firebase Storage의 변경을 모니터링하는 Hook 함수입니다. Firebase Functions에 배포합니다.

관리 앱: 블로그 게시물을 게시하거나 삭제하는 애플리케이션입니다. React에서 만들고 Firebase Hosting에 배포합니다.

JAMstack의 움직임

① 관리 앱에서 Firebase Storage에 기사를 게시/삭제합니다.
② Firebase Functions는 Firebase Storage의 변경 상태를 모니터링합니다.
③ ①의 변경에 따라 API를 통해 Vercel에 배포 요청을 보냅니다.
④ 블로그 사이트는 정적 사이트 생성(SSG)으로 작성되어 있기 때문에 Firebase Storage에서 기사를 취득하여 빌드 배포됩니다.

이렇게 하면 기사 변경에 따라 자동으로 블로그 사이트가 업데이트됩니다.

요약

웹사이트 앱 개발은 올해부터 시작되었습니다.
취미로 하고 있어 개발의 경험이 얕기 때문에, 효율을 무시한 코딩이 있을지도 모릅니다만 용서해 주세요.

Next >