firebase functions next example

Depreciado e novo exemplo em exemplos de Firebase-GCP

---

App SSR Next.JS SSR nas funções em nuvem para Firebase com Hosting de Firebase

Host um aplicativo Next.JS SSR React em funções em nuvem para Firebase com Hosting Firebase.

Aqui está o médio post que acompanha uma nova postagem está sendo gravada para descrever a nova estrutura do projeto, implantações parciais do Firebase, suporte de Firebase de ganchos pré/pós-implantação e quais problemas esses novos recursos resolvem.

Por que?

Hospedar seu aplicativo SSR Next.js em funções em nuvem, permitindo um aplicativo SSR de baixa escala automática e de baixo custo, aproveitando a doce experiência do desenvolvedor da Firebase.

Como?

A hospedagem do Firebase pode reescrever rotas para uma função de nuvem que serve nosso aplicativo renderizado do lado do servidor Next.js. Usando uma regra de reescrita que captura todas as rotas, podemos hospedar nosso aplicativo SSR em nosso URL de hospedagem de Firebase em vez do URL da função de nuvem Firebase.

em vez de:

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

Podemos usar:

<project-name>.firebaseapp.com/

Em seguida, o JS pode ser usado para obter o reagir SSR com recarregamento de módulos a quente, roteamento do servidor e do lado do cliente, rota a divisão de código de nível, pré-busca e muito mais!

Vários problemas com a hospedagem de SSR na FireBase foram superados com esse método. Consulte o post médio antes de criar problemas aqui.

Importante!

• Este exemplo usa firebase-tools como uma dependência de devDerend que é executada na pasta node_modules/.bin/ via yarn . O fio executará scripts do package.json ou scripts binários de node_modules/.bin/ . npm run não verifica a pasta .bin para executáveis; portanto, se você usar npm , precisará alterar os scripts para executar explicitamente o binário de firebase de node_modules/.bin/ ou instalar firebase-tools globalmente e removê-lo da lista DevDeps. Dê uma olhada no exemplo do próximo.js repo de como eu recomendo usar npm .

• Verifique se você está executando o nó 6.11.5 , pois o emulador de funções exige isso. Eu recomendo o ASDF como um gerenciador de versões e adicione um arquivo ASDF .tool-versions para definir o tempo de execução do nó.

• Se estiver usando _app.js , você poderá receber o seguinte erro na sua função de nuvem implantada:

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

  Apesar do próximo.JS ter @babel/runtime como uma dependência, você deve instalá -lo como uma dependência diretamente neste projeto.

Instalação

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

Faça login na CLI de Firebase

Isso é usado como dependência de dev em vez de uma instalação global. Eu achei que isso é uma experiência de desenvolvimento muito melhor.

yarn fblogin

Desenvolvimento Next.JS

Desenvolvimento Standard Next.js com recarga do módulo quente etc

yarn dev

Teste local

yarn serve

Isso finalmente funciona agora! NOTA: Você deve ter um ID do projeto FireBase válido definido no arquivo .firebaserc , pois o comando serve verifica se o projeto existe. Acredito que isso tem a ver com garantir que as rotas relativas alinhadas ao seu aplicativo implantado, pois o <project id> é usado em seus URLs.

Para aqueles que querem se aprofundar no que realmente está acontecendo aqui, execute este comando:

yarn serve --debug

Implantar para Firebase

Você precisará conectar o projeto ao seu projeto Firebase. Edite o nome em .FireBASERC ou execute firebase init e escolha não substituir nenhum arquivo.

Implantar recursos de hospedagem e a função de nuvem de reescrita

yarn deploy-app

Implantar funções não usadas para o SSR

Implante todas as funções especificadas no grupo de funções. Edite este script para adicionar mais grupos de funções. - Consulte Parcial implanta documentos para usar grupos de funções.

yarn deploy-funcs

Implante tudo para Firebase

yarn deploy-all

Limpe a pasta dist

yarn clean

Uma nota sobre compatibilidade de código

Tudo foi testado no Ubuntu 17.04 com Bash. Isso deve funcionar no Bash no Ubuntu no Windows sem alterações. Se você deseja o suporte nativo do Windows, envie um problema para que possamos trabalhar na compatibilidade do Windows. Por favor, relate quaisquer erros do MacOS, pois não tenho acesso a um dispositivo para testar. Meu ambiente de desenvolvimento pode ser encontrado aqui.