Итак, давайте рассмотрим стек для этого проекта:
- 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, и возвращает визуализированный контент клиенту.
На этом этапе мы можем добавить наши сценарии 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.
Вы можете найти получившийся проект здесь. Удачного кодирования!
