Deploying Next.js on Firebase hosting (SSR)

Google I/O 2022에서 Firebae 쪽 변화를 한번 살펴봤는데 눈에 띄는 게 있더라고

원래 Firebase Hosting에서는 static 파일만 호스팅 해줬어. 그러니깐 Next.js 같이 SSR 지원해주는 애들은 단순히 Hosting 기능만으로는 서비스를 할 수가 없었지 그래서 Cloud function 쓰고 Hosting에서 연결하고 난리를 쳐줘야 Next.js를 돌릴 수 있었어. 그런데 이번에 업데이트를 했다고 하잖아? Next.js 폴더에서 Firebase deploy 한방만 때리면 자동으로 deploy해준다 그러네? 오~

 

원래 AWS amplify는 100만년 전부터 되던 기능을 GCP Firebase는 이제서야 지원하다니...

2022.02.28 - [Next.js] - Next.JS + AWS Amplify 맛만 보자 ㅎㅎ

Next.JS + AWS Amplify 맛만 보자 ㅎㅎ

느려.. 매우 느려!! 더러운 베타근성을 가진 난 1등 서비스(AWS) 따위는 못쓰겠다는 일념하에 GCP Firebase를 쓰고 있었고 통일되지 않은 환경 때문에 AWS로 넘어갈까 심각하게 고민하던 때에 이런 서비스가 나오니까... 참... 뭐랄까... 조삼모사 원숭이가 된 기분... 구글 생퀴들..

Google I/O 2022 Firebase 행사장 ㅋ

암튼 구글 Firebase도 next.js 같은 web framework 프로젝트를 바로 hosting에 배포할 수 있게 되긴 했는데 ㅋㅋ 실험이라는데? 구글 이자식들! 그래 ㅋㅋ 내가 테스트 해줄게 ㅋㅋㅋㅋ 우끼끼

그런데 공식 문서에서는 찾을 수가 없어. 아무리 새로운 버전의 firebase-tools를 다운받고 next.js 폴더에서 firebase deploy를 연타해봐야 default static 파일만 hosting 되고 끝이야. 죽여? 살려?

 

이리저리 찾다가 google io firebase youtube 댓글 보고 겨우 찾았어. 아래 링크!

https://github.com/FirebaseExtended/firebase-framework-tools

GitHub - FirebaseExtended/firebase-framework-tools: Experimental addon to the Firebase CLI to add web framework support

엄청 간단하긴 하네.

1. firebase-tools을 최신버전으로 업데이트 해주시고

https://www.npmjs.com/package/firebase-tools/v/11.0.1

firebase-tools

2.experimental addon을 사용할 수 있도록 하는 커맨드 치고

firebase --open-sesame frameworkawareness

 

3. next.js root 폴더에서 firebase hosting init 해서 연결해주고~( 프로젝트 연결하는 그런 건 생략할게 ㅋ)

firebase hosting init

4. next.js root 폴더에 있는 firebase.json 파일 변경~ 아래처럼~

{
  "hosting": {
  	//"public": "public", <-- 이거 삭제
    "source": ".", // <-- 이거 추가
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

 

5. 그리고 firebase serve 똭! 하고 나면 http://localhost:5005 에서 실행하는 화면을 볼 수 있어.

firebase serve

firebase serve 실행 화면

6. Deply까지 하면 실제로 deploy되서 hosting에서 서비스 되는 것까지 확인할 수 있어.

 

굉장히 스무스하게 실행되네 구글답지 않게 ㅋㅋ 암튼 이건 정식 버전이 아니라는 거~ 매우 참고하시고 ㅋㅋㅋ 확 AWS로 가불라!!

 

아래는 현재 지원하는 web framework 목록인데 next.js랑 angular만 되고 기능들 중에는 SWR/E가 안된다는데 -_- 음 이거 swr 이거 데이터 fetch 훅 말하는 건가? 음 암튼 베타 테스터 원숭이답게 이러저리 SSR 기능들 테스트 해봐야겠어. SSR 하려면 결제 계정 활성화 해야 하나봐 참고~(내돈까지 써가면서 테스트 해야 하는 건가 -_-????)

지원하는 기능들

아래 링크들은 Google I/O 2022 Firebase 관련 행사 내용이니까 직접 보고 싶은 양반들은 직접 보시라고~

 

여기는 블로그

https://firebase.blog/posts/2022/05/whats-new-at-google-io

The Firebase Blog

 

여기는 youtube

https://www.youtube.com/watch?v=i0VNBvCqpgI 

Google I/O 2022 Firebase youtube