firebase functions next example

устаревший, новый пример на Firebase-GCP-привязки

---

Next.js SSR -приложение на облачных функциях для Firebase с хостингом Firebase

Ходить приложение react react hale.js SSR на облачных функциях для Firebase с хостингом Firebase.

Вот сопутствующая средняя пост. Записано новое сообщение для описания новой структуры проекта, частичных развертываний Firebase, поддержки Firebase крючков до/после развертывания и какие проблемы решаются эти новые функции.

Почему?

Размещайте приложение SSR Next.js на облачных функциях, позволяющих недорогим, автоматически масштабирующему приложению SSR, использующему сладкий опыт разработчика Firebase.

Как?

Hosting Firebase может переписать маршруты в облачную функцию, которая обслуживает наше серверное приложение, которое рендерированное приложение. Используя правило переписывания, которое ловит все маршруты, мы можем затем разместить наше приложение SSR на нашем URL -адресах Firebase Hosting вместо URL -функции Firebase Cloud.

вместо:

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

Мы можем использовать:

<project-name>.firebaseapp.com/

Затем можно использовать следующую.

Ряд проблем с размещением SSR на пожарной базе был преодолен с помощью этого метода. Пожалуйста, обратитесь к Medium Post, прежде чем создавать проблемы здесь.

Важный!

• В этом примере используется firebase-tools в качестве DevDepeDendency, которая выполняется из папки node_modules/.bin/ через yarn . Пряжа будет запускать сценарии из package.json или двоичных сценариев из node_modules/.bin/ . npm run не проверяет папку .bin для исполняемых файлов, поэтому, если вы используете npm вам придется либо изменить сценарии, чтобы явно запустить бинар firebase из node_modules/.bin/ или установить firebase-tools в глобальном масштабе и удалить его из списка DevDeps. Посмотрите на пример следующего.js Repo, как я рекомендую использовать npm .

• Убедитесь, что вы запускаете узел 6.11.5 , так как это требует эмулятора функций. Я рекомендую ASDF в качестве менеджера версий и добавляю файл asdf .tool-versions , чтобы определить время выполнения узла.

• При использовании _app.js вы можете получить следующую ошибку на вашей развернутой облачной функции:

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

  Несмотря на то, что @babel/runtime имеет @Babel/Runtime, вы должны установить его как зависимость непосредственно в этом проекте.

Установка

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

Войти в CLI Firebase

Это используется в качестве зависимости от разработки вместо глобальной установки. Я обнаружил, что это гораздо более приятный опыт разработчиков.

yarn fblogin

Next.js Development

Стандартная разработка Next.js с перезагрузкой горячих модулей

yarn dev

Местное тестирование

yarn serve

Это наконец работает сейчас! Примечание. У вас должен быть действительный идентификатор проекта Firebase, определенный в файле .firebaserc , так как команда serve проверяет, что проект существует. Я полагаю, что это связано с обеспечением того, чтобы относительные маршруты соответствовали вашему развернутому приложению, поскольку <project id> используется в ваших URL -адресах.

Для тех, кто хочет углубиться в то, что на самом деле происходит здесь, запустите эту команду:

yarn serve --debug

Развернуть в Firebase

Вам нужно будет подключить проект к вашему проекту Firebase. Отредактируйте имя в firebase init

Развернуть ресурсы хостинга и переписать облачную функцию

yarn deploy-app

Развернуть функции, не используемые для SSR

Развернуть все функции, указанные в функциональной группе. Измените этот скрипт, чтобы добавить больше функциональных групп. - См. Частичные развертывания документов для использования функциональных групп.

yarn deploy-funcs

Развернуть все в Firebase

yarn deploy-all

Чистая папка dist

yarn clean

Примечание о совместимости кода

Все было проверено на Ubuntu 17.04 с Bash. Это должно работать на Bash на Ubuntu на Windows без каких -либо изменений. Если вы хотите поддерживать нативную поддержку Windows, отправьте проблему, чтобы мы могли работать над совместимостью Windows. Пожалуйста, сообщите о любых ошибках macOS, так как у меня нет доступа к устройству для тестирования. Моя среда разработки можно найти здесь.