Я не нашел достаточно информации на сайте firebase о том, как развернуть Next.js.
Ниже приводится то, что я узнал на форумах github / stackoverflow, которые я посетил. Не уверен, что в ближайшее время он будет изменен, но надеюсь, что он все еще будет полезен!
Структура папки
├── dist (folder) ├── functions (folder) ├── next (folder ├── public (folder) ├── functions (folder) ├── index.js ├── public (folder) ├── src (folder) ├── firestore.indexes.json ├── firestore.rules ├── storage.rules ├── firebase.json ├── package-lock.json ├── package.json
инструкции
1. Создайте проект Firebase.
(1) Создайте папку для проекта firebase. пример: firebaseApp
(2) Инициализировать pacakge.json npm init или yarn init
(3) Установить инструменты firebase глобально npm install -g firebase-tools
(4) Войдите в Firebase CLI для входа в firebase
- убедитесь, что вы создали учетную запись google
(5) Инициализировать проект Firebase, firebase init
- Выбираю Firestore, Функции, Хостинг, Хранилище
- Я выбираю существующий проект, созданный в веб-консоли Firebase
- Выбираю firestore.rules
- Выбираю firestore.indexes.json
- Я выбираю javascript
- Я выбираю Нет для использования ESLint
- Я выбираю установку зависимостей сейчас
- Я выбираю общедоступный в качестве общедоступного каталога
- Выбираю storage.rules
(6) Что у нас должно быть сейчас?
- firebase.json, .firebaserc, все выбранные мной правила, каталог функций, общедоступный каталог
(7) Измените путь хостинга / функций для облачных функций Firebase в firebase.json.
"hosting": {
"public": "dist/public",
"rewrites": [
{
"source": "**/**",
"function": "next"
}
]
},
"functions": {
"source": "dist/functions"
}
2. Создайте все папки, как указано выше.
Итак, на этом этапе нам нужно создать каталог dist и src.
(1) dist: для развертывания. Создайте в нем общедоступный каталог и каталог функций.
(2) функции: функции firebase. Он нам нужен для развертывания нашего Next.js.
(3) общедоступные: для статических файлов, таких как изображения.
(4) src: для исходных файлов проекта Next.js. Просто поместите в него все.
3. Работа над справочником функций.
(тот, который создан Firebase CLI). Он уже установил некоторые модули, связанные с облачными функциями Firebase. Поскольку он будет использовать свои зависимости для работы с нашим выпуском сборки из исходного кода, я обнаружил, что он не будет работать, если я не установлю все свои зависимости, которые мне нужны для моего исходного кода.
(1) Установите все зависимости исходного кода моего приложения в каталог функций.
(2) Работайте над index.js. Это облачная функция для обслуживания моего приложения.
const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors');
const path = require('path')
const admin = require('firebase-admin')
const next = require('next');
const dev = process.env.NODE_ENV !== 'production'
const app = next({dev, conf: {distDir: `${path.relative(process.cwd(), __dirname)}/next`}});
const handle = app.getRequestHandler();
admin.initializeApp()
exports.next = functions.https.onRequest(async (req, res) => {
console.log('File: ' + req.originalUrl); // log the page.js file that is being requested
await app.prepare();
handle(req, res);
});4. Работа с каталогами dist
(1) Скопируйте package.json, package-lock.json, index.js в dist / functions.
(2) Установите все зависимости в dist / functions с помощью npm install
(3) Скопируйте все из общей папки в dist / public
5. Создайте сборку для проекта Next.js.
(1) Перейдите в папку src. Создайте next.config.js и добавьте distDir
module.exports = {
distDir: '../dist/functions/next'
}(2) используйте next build create build или используйте npm run build и поместите скрипт в package.json
(3) Убедитесь, что будет создана следующая папка в dist / functions.
6. Готов к развертыванию
(1) Перейдите в папку firebaseApp
(2) Тест с помощью firebase serve Установите следующий скрипт в package.json
"serve": "NODE_ENV=production firebase serve",(3) Развертывание Firebase Просто запустите firebase deploy или поместите его в package.json как скрипт.
