Стек Next.js Firebase Hosting

Итак, давайте рассмотрим стек для этого проекта:

  • Next.js:для разработки наших веб-страниц.
  • Firebase Hosting: для размещения наших статических файлов.
  • Облачные функции: для рендеринга наших веб-страниц на сервере.

Начать

Сначала нам нужно создать новый проект Firebase (это совершенно бесплатно), так что давайте сделаем это.

Перейдите в Консоль Firebase и нажмите Добавить проект. Выберите имя для вашего проекта и нажмите Продолжить. Вы можете настроить Google Analytics для своего проекта, но поскольку это демонстрационная версия, это не требуется. Подождите, пока Firebase инициализирует ваш проект, и нажмите Продолжить. Вы закончили создание своего проекта? .

Включить хостинг Firebase

Перейдите на вкладку Хостинг и нажмите Начать. Скопируйте команду для установки firebase-tools и запустите ее на своем компьютере. Перед установкой firebase-tools вам необходимо установить npm на вашем компьютере.

  • npm установить -g firebase-tools
  • Нажмите «Далее» и войдите в свою учетную запись firebase с локального компьютера с помощью команды:
  • вход в firebase

Нажмите «Далее» и продолжайте консоль. После этого вы инициализировали хостинг firebase для своего проекта?.

Включить облачные функции

Перейдите на вкладку «Функции» и нажмите «Начать». Нажмите «Продолжить», так как вы уже установили firebase-tools. Нажимайте «Продолжить», пока не будет достигнута страница «Ожидание первой страницы развертывания».

Создайте свой локальный проект

Перейдите в папку ваших проектов на локальном компьютере и выполните команду:

mkdir ‹YOUR_PROJECT_NAME›

Или вы можете создать папку из пользовательского интерфейса. После этого войдите в свой проект и инициализируйте узел:

компакт-диск ‹ВАШ_ПРОЕКТ_ИМЯ›

инициализация npm -y

Это создаст пустой проект узла. Теперь давайте создадим структуру папок. Добавьте папку src с двумя подпапками с именами app и functions.

См. также:  Вы должны узнать, что реально, а что подделано!

mkdir src src/приложение src/функции

Это будет корневая папка, в которой будет находиться наш исходный код. Далее добавим необходимые пакеты в наш проект. Важной частью здесь является то, что наши пакеты будут совместно использоваться как Next, так и Cloud Functions. Причина этого в том, что облачным функциям потребуются пакеты, используемые приложением Next для его рендеринга. Итак, у нас будет только один package.json для обоих приложений, и мы скопируем его в исходную папку Cloud Functions во время сборки.

npm я затем реагирую

next, react, react-dom:это пакеты, необходимые для создания приложения Next.

firebase-admin, firebase-functions: эти пакеты необходимы для подключения к firebase.

styled-components: этот пакет — мой любимый способ стилизации реагирующего приложения.

Теперь нам нужно добавить наши зависимости для разработчиков:

npm i -d cpx rimraf babel-plugin-styled-components

cpx: мы предоставим вам этот пакет для копирования package.json и наших продуктов сборки в папки развертывания.

rimraf: этот пакет будет использоваться для очистки нашего проекта на этапе предварительной сборки.

babel-plugin-styled-components: этот пакет необходим для запуска styled-components в среде Next.

Теперь мы закончили с нашими пакетами, прежде чем мы продолжим, нам нужно определить наш механизм узлов. Поскольку последняя версия Cloud Functions использует движок Node 10.15.3, мы также определим его в нашем проекте. Добавьте это в свой package.json:

“engines”: { 
    “node”: “10” 
}

Также добавьте в корневую папку новый файл с именем .nvmrc с содержимым:

10.15.3

Теперь давайте создадим наше приложение. Сначала добавьте .babelrc в папку src/app, чтобы активировать стилизованные компоненты.

Затем создайте папку pages в разделе src/app ии добавьте index.js:

Теперь давайте добавим нашу основную функцию в папку src/functions:

Что делает эта функция, так это визуализирует выходные данные, которые генерирует для нас Next, и возвращает визуализированный контент клиенту.

См. также:  Электрон + Auth0 | Настройка аутентификации PKCE для аутентифицированного доступа к API

На этом этапе мы можем добавить наши сценарии npm. После их добавления наш package.json должен выглядеть так:

Скрипты

Вот где происходит волшебство. В основном нам нужно построить два проекта, один для Next и один для облачных функций. После чего нам нужно собрать наши пакеты развертывания для хостинга firebase и облачных функций.

dev: этот скрипт запускает Next в режиме разработки.

clean: используется для удаления папки dist, чтобы обеспечить чистую сборку.

build:app: эта команда создает следующий проект.

build:functions: эта команда просто копирует наши функции из исходной папки в папку dist.

copy:static:Эта команда используется для копирования наших статических файлов предварительной сборки в папку dist. Это необходимо для развертывания этих статических файлов (например, изображений) на хостинге Firebase.

copy:next: используется для копирования статических файлов Next после сборки в папку dist. Это необходимо, так как Next создает файлы .js после своей команды сборки, которые позже связываются в своих HTML-файлах.

copy:deps: этот файл копирует наш package.json в dist/functions, чтобы убедиться, что облачные функции имеют правильные зависимости.

copy:pages: эта команда копирует бессерверные страницы в папку dist. Затем эти страницы будут отображаться и обслуживаться облачными функциями.

Теперь давайте запустим наш проект firebase. Добавьте два файла с именами .firebaserc и firebase.json.

.firebaserc: этот файл будет содержать идентификатор нашего проекта в экосистеме Firebase.

firebase.json: это наш файл конфигурации для хостинга Firebase и облачных функций.

Затем мы можем добавить необходимые скрипты в наш firebase.json для создания задач предварительной сборки.

Как мы видим, мы перемещаем статический контент для Firebase Hosting и динамический контент для облачных функций.

После этого вы можете разработать остальную часть приложения, разработав обычное приложение в папке src/app и добавив свои страницы в файл src/functions/index.js.

См. также:  Стоит ли проводить модульное тестирование компонентов React?

Вы можете найти получившийся проект здесь. Удачного кодирования!

hatakancicek/firebase-next-demo
Вы не можете выполнить это действие в данный момент. Вы вошли в другую вкладку или окно. Вы вышли на другой вкладке или…github.com

Понравилась статья? Поделиться с друзьями:
IT Шеф
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: