firebase functions next example

Firebase-GCP 검사에서 더 이상 사용되지 않은 새로운 예

---

Firebase 호스팅이있는 Firebase의 클라우드 기능에 대한 Next.js SSR 앱

Firebase 호스팅을 사용하여 Firebase의 클라우드 기능에 대한 Next.js SSR React 앱을 호스팅합니다.

다음은 함께 제공되는 매체 게시물입니다. 새로운 프로젝트 구조, Firebase 부분 배포, 사전/후 고리의 소방베이스 지원 및 이러한 새로운 기능이 해결하기 위해 새 게시물이 작성되고 있습니다.

왜?

클라우드 기능에서 SSR Next.js 앱을 호스팅하여 저렴한 자동 스케일링 SSR 앱 경험을 활용하여 Firebase의 Sweet Developer 경험을 활용하십시오.

어떻게?

FireBase 호스팅은 서버 측 렌더링 된 Next.js 앱을 제공하는 클라우드 기능으로 경로를 다시 작성할 수 있습니다. 모든 경로를 포착하는 다시 쓰기 규칙을 사용하면 Firebase Cloud Function URL 대신 Firebase 호스팅 URL에서 SSR 앱을 호스팅 할 수 있습니다.

대신 :

https://us-central1-<project-name>.cloudfunctions.net/<function-name>

우리는 사용할 수 있습니다 :

<project-name>.firebaseapp.com/

그런 다음 JS를 사용하여 Hot Module Reloading, Server 및 Client-Side 라우팅, 경로 수준 코드 분할, Route Prefetching 등으로 SSR 반응을 달성하는 데 사용될 수 있습니다!

이 방법으로 Firebase에서 SSR을 호스팅하는 데 많은 문제가 극복되었습니다. 여기에서 문제를 만들기 전에 중간 게시물을 참조하십시오.

중요한!

• 이 예제는 yarn 통해 node_modules/.bin/ 폴더에서 실행되는 devdependency로 firebase-tools 사용합니다. 원사는 package.json 또는 node_modules/.bin/ 의 이진 스크립트에서 스크립트를 실행합니다. npm run 실행 파일에 대한 .bin 폴더를 확인하지 않으므로 npm 사용하는 경우 node_modules/.bin/ 에서 firebase Binary를 명시 적으로 실행하려면 스크립트를 변경하여 firebase-tools 전역으로 설치하고 DevDeps 목록에서 제거해야합니다. npm 사용하는 방법에 대한 다음 Next.js Repo 예제를 살펴보십시오.

• 함수 에뮬레이터에 필요하므로 노드 6.11.5 실행하십시오. 버전 관리자로서 ASDF를 권장하고 Node 런타임을 정의하기 위해 ASDF .tool-versions 파일을 추가했습니다.

• _app.js 사용하는 경우 배포 된 클라우드 기능에서 다음 오류가 수신 될 수 있습니다.

   { Error: Cannot find module '@babel/runtime/regenerator'...
  

  @babel/runtime 종속성으로 사용하는 Next.js에도 불구 하고이 프로젝트에서 직접 의존성으로 설치해야합니다.

설치

git clone https://github.com/jthegedus/firebase-functions-next-example
cd firebase-functions-next-example
yarn install

Firebase CLI에 로그인하십시오

이는 글로벌 설치 대신 DEV 의존성으로 사용됩니다. 나는 이것이 훨씬 더 좋은 Dev 경험이라는 것을 알았습니다.

yarn fblogin

다음 .js 개발

핫 모드 재 장전 등이있는 Standard Next.js 개발

yarn dev

로컬 테스트

yarn serve

이것은 이제 마침내 작동합니다! 참고 : serve 명령이 프로젝트가 존재하는지 확인하기 때문에 .firebaserc 파일에 정의 된 유효한 Firebase Project ID가 있어야합니다. <project id> 가 URL에 사용될 때 상대 경로가 배포 된 응용 프로그램과 일치하는 것과 관련이 있다고 생각합니다.

실제로 일어나는 일에 대해 더 깊이 파고 들고 싶은 사람들을 위해이 명령을 실행하십시오.

yarn serve --debug

Firebase에 배포

프로젝트를 Firebase 프로젝트에 연결해야합니다. .firebaserc 또는 run firebase init 에서 이름을 편집하고 파일을 재정의하지 않도록 선택하십시오.

호스팅 리소스 및 다시 쓰기 클라우드 기능을 배포합니다

yarn deploy-app

SSR에 사용되지 않은 배포 기능

기능 그룹에 지정된 모든 기능을 배포합니다. 이 스크립트를 편집하여 더 많은 기능 그룹을 추가하십시오. - 기능 그룹 사용 방법은 부분 배포 문서를 참조하십시오.

yarn deploy-funcs

Firebase에 모든 것을 배포하십시오

yarn deploy-all

dist 폴더를 청소하십시오

yarn clean

코드 호환성에 대한 메모

모든 것이 Bash와 함께 Ubuntu 17.04에서 테스트되었습니다. 이것은 변경없이 Windows의 Ubuntu의 Bash에서 작동해야합니다. Windows 기본 지원을 원한다면 Windows 호환성에서 작업 할 수 있도록 문제를 제출하십시오. 테스트 할 장치에 액세스 할 수 없으므로 MACOS 오류를보고하십시오. 내 개발 환경은 여기에서 찾을 수 있습니다.