firebase functions next example

Deprecido y nuevo ejemplo en los exámenes Firebase-GCP

---

Next.js Aplicación SSR en funciones en la nube para Firebase con alojamiento de Firebase

Organice una aplicación reaccionada de SSR Next.js en las funciones de la nube para Firebase con alojamiento de Firebase.

Aquí está el medio acompañante que se está escribiendo una nueva publicación para describir la nueva estructura del proyecto, las implementaciones parciales de Firebase, el soporte de Firebase de los ganchos previos/posteriores a la implementación y qué problemas resuelven estas nuevas características.

¿Por qué?

Aloje su aplicación SSR Next.js en funciones en la nube que permite una experiencia de aplicación de SSR de bajo costo y autoescalado que aprovecha la experiencia de desarrollador de Firebase.

¿Cómo?

El alojamiento de Firebase puede reescribir las rutas a una función en la nube que sirve a nuestra aplicación del lado del lado del servidor Next.js. Usando una regla de reescritura que atrapa todas las rutas, podemos alojar nuestra aplicación SSR en nuestra URL de alojamiento de Firebase en lugar de la URL de la función de nube de Firebase.

en lugar de:

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

Podemos usar:

<project-name>.firebaseapp.com/

Siguiente.js se puede utilizar para lograr la reaccionamiento de SSR con la recarga de módulos en caliente, el enrutamiento del servidor y el lado del cliente, la división de código de nivel de ruta, la prejuicios de la ruta y más.

Varios problemas con el alojamiento de SSR en Firebase se superaron con este método. Consulte la publicación media antes de crear problemas aquí.

¡Importante!

• Este ejemplo utiliza firebase-tools como una Devdependencia que se ejecuta desde node_modules/.bin/ carpeta a través de yarn . Yarn ejecutará scripts desde el package.json o los scripts binarios de node_modules/.bin/ . npm run no verifica la carpeta .bin para ejecutables, por lo que si usa npm , tendrá que cambiar los scripts para ejecutar explícitamente el binario firebase desde node_modules/.bin/ o instalar firebase-tools a nivel mundial y eliminarlo de la lista DevDeps. Eche un vistazo al ejemplo de Repo Next.js sobre cómo recomiendo usar npm .

• Asegúrese de ejecutar el nodo 6.11.5 ya que el emulador de funciones requiere esto. Recomiendo ASDF como administrador de versiones y he agregado un archivo ASDF .tool-versions para definir el tiempo de ejecución del nodo.

• Si usa _app.js , puede recibir el siguiente error en su función de nube implementada:

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

  A pesar de que Next.js tiene @babel/runtime como dependencia, debe instalarlo como una dependencia directamente en este proyecto.

Instalación

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

Iniciar sesión en Firebase CLI

Esto se usa como una dependencia de desarrollo en lugar de una instalación global. He encontrado que esta es una experiencia de desarrollo mucho más agradable.

yarn fblogin

Next.js Desarrollo

Desarrollo estándar de Next.js con recarga de módulos en caliente, etc.

yarn dev

Prueba local

yarn serve

¡Esto finalmente funciona ahora! Nota: Debe tener una ID de proyecto de Firebase válida definida en el archivo .firebaserc , ya que el comando serve verifica que el proyecto existe. Creo que esto tiene que ver con garantizar que las rutas relativas se alineen con su aplicación implementada, ya que el <project id> se usa en sus URL.

Para aquellos que quieren profundizar en lo que realmente está sucediendo aquí, ejecute este comando:

yarn serve --debug

Desplegarse en Firebase

Deberá conectar el proyecto a su proyecto Firebase. Edite el nombre en .firebaserc o ejecute firebase init y elija no anular ningún archivo.

Implementar recursos de alojamiento y la función de reescribir en la nube

yarn deploy-app

Implementar funciones no utilizadas para la SSR

Implemente todas las funciones especificadas en el grupo de funciones. Edite este script para agregar más grupos de funciones. - Consulte los documentos de implementos parciales sobre cómo usar grupos de funciones.

yarn deploy-funcs

Desplegar todo a Firebase

yarn deploy-all

Carpeta dist limpia

yarn clean

Una nota sobre la compatibilidad del código

Todo fue probado en Ubuntu 17.04 con Bash. Esto debería funcionar en Bash en Ubuntu en Windows sin ningún cambio. Si desea soporte nativo de Windows, envíe un problema para que podamos trabajar en la compatibilidad de Windows. Informe los errores de MacOS ya que no tengo acceso a un dispositivo para probar. Mi entorno de desarrollo se puede encontrar aquí.