firebase functions next example

déprécié, nouvel exemple à Firebase-GCP-Examples

---

Next.js application SSR sur les fonctions de cloud pour Firebase avec hébergement Firebase

Hébergez une application NEXT.js SSR React sur les fonctions de cloud pour Firebase avec l'hébergement Firebase.

Voici le poste moyen qui l'accompagne Un nouveau post est en cours d'écriture pour décrire la nouvelle structure de projet, les déploiements partiels de Firebase, le support Firebase des crochets pré / post-déploie et quels problèmes résolvent ces nouvelles fonctionnalités.

Pourquoi?

Hébergez votre application SSR Next.js sur les fonctions cloud permettant une expérience d'application SSR à faible échelle à faible échelle en tirant parti de l'expérience du développeur Sweet Developer de Firebase.

Comment?

L'hébergement de Firebase peut réécrire les routes vers une fonction cloud qui sert notre application sur le côté serveur Next.js. En utilisant une règle de réécriture qui attrape tous les itinéraires, nous pouvons ensuite héberger notre application SSR sur notre URL d'hébergement Firebase au lieu de l'URL de la fonction Cloud Firebase.

au lieu de:

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

Nous pouvons utiliser:

<project-name>.firebaseapp.com/

Next.js peut ensuite être utilisé pour réagir SSR avec le rechargement du module à chaud, le routage côté serveur et le côté client, le niveau de code de code d'itinéraire, la préfecture d'itinéraire et plus encore!

Un certain nombre de problèmes avec l'hébergement SSR sur Firebase ont été surmontés avec cette méthode. Veuillez vous référer à la publication moyenne avant de créer des problèmes ici.

Important!

• Cet exemple utilise firebase-tools comme un DevDependance qui est exécuté à partir du dossier node_modules/.bin/ via yarn . Le fil exécutera des scripts à partir du package.json ou des scripts binaires à partir de node_modules/.bin/ . npm run ne vérifie pas le dossier .bin pour les exécutables, donc si vous utilisez npm , vous devrez soit modifier les scripts pour exécuter explicitement le binaire firebase à partir de node_modules/.bin/ ou installer firebase-tools globalement et de le supprimer de la liste DevDeps. Jetez un œil à l'exemple du repo suivant.js pour savoir comment je recommande d'utiliser npm .

• Assurez-vous que vous exécutez le nœud 6.11.5 comme l'émulateur de fonctions l'exige. Je recommande ASDF en tant que gestionnaire de version et j'ai ajouter un fichier ASDF .tool-versions pour définir le runtime de nœud.

• Si vous utilisez _app.js , vous pouvez recevoir l'erreur suivante sur votre fonction cloud déployée:

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

  Malgré NEXT.js ayant @babel/runtime comme dépendance, vous devez l'installer comme dépendance directement dans ce projet.

Installation

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

Connectez-vous à Firebase CLI

Ceci est utilisé comme dépendance de développement au lieu d'une installation globale. J'ai trouvé que c'était une expérience de développement beaucoup plus agréable.

yarn fblogin

Suivant.js Développement

Développement standard.

yarn dev

Tests locaux

yarn serve

Cela fonctionne enfin maintenant! Remarque: vous devez avoir un ID de projet Firebase valide défini dans le fichier .firebaserc car la commande serve vérifie que le projet existe. Je crois que cela est lié à ce que les routes relatives s'alignent avec votre application déployée car le <project id> est utilisé dans vos URL.

Pour ceux qui veulent approfondir ce qui se passe ici, exécutez cette commande:

yarn serve --debug

Déployer sur Firebase

Vous devrez connecter le projet à votre projet Firebase. Modifiez le nom dans .fireBaserc ou exécutez firebase init et choisissez de ne pas remplacer aucun fichier.

Déployer les ressources d'hébergement et la fonction de cloud de réécriture

yarn deploy-app

Déploier les fonctions non utilisées pour le SSR

Déployez toutes les fonctions spécifiées dans le groupe de fonctions. Modifiez ce script pour ajouter plus de groupes de fonctions. - Voir les déploiements partiels de documents pour utiliser les groupes de fonctions.

yarn deploy-funcs

Déployer tout sur Firebase

yarn deploy-all

Dossier dist

yarn clean

Une note sur la compatibilité du code

Tout a été testé sur Ubuntu 17.04 avec bash. Cela devrait fonctionner sur Bash sur Ubuntu sur Windows sans aucune modification. Si vous souhaitez la prise en charge des natifs de Windows, veuillez soumettre un problème afin que nous puissions travailler sur la compatibilité Windows. Veuillez signaler toutes les erreurs macOS car je n'ai pas accès à un appareil à tester. Mon environnement de développement peut être trouvé ici.