我正在尝试将nextjs应用程序部署到Firebase托管,并希望支持多个站点。当我部署它时,所有应用程序都会呈现默认应用程序。我该如何解决?
我一直在遵循使用AngularJs将多个网站部署到Firebase的教程here,并尝试用NextJs替换Angularjs。
package.json中的脚本
{
"scripts": {
"accounts": "next \"src/apps/accounts/\"",
"accounts-build": "next build \"src/apps/accounts/\"",
"admin": "next \"src/apps/admin/\"",
"admin-build": "next build \"src/apps/admin/\"",
"preserve": "npm run build-public && npm run build-funcs && npm run admin-build && npm run copy-deps && npm run install-deps",
"serve": "cross-env NODE_ENV=production firebase serve",
"predeploy": "npm run build-public && npm run build-funcs && npm run accounts-build && npm run admin-build && npm run copy-deps",
"deploy": "firebase deploy",
"clean": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
"build-public": "cpx \"src/public/**/*.*\" \"dist/public\" -C",
"build-funcs": "babel \"src/functions\" --out-dir \"dist/functions\"",
"copy-deps": "cpx \"*{package.json,package-lock.json,yarn.lock}\" \"dist/functions\" -C",
"install-deps": "cd \"dist/functions\" && npm i"
}
}
firebase.json
{
"hosting": [
{
"target": "accounts",
"public": "dist/public",
"rewrites": [
{
"source": "**/**",
"function": "accounts"
}
]
},
{
"target": "admin",
"public": "dist/public",
"rewrites": [
{
"source": "**/**",
"function": "admin"
}
]
}
],
"functions": {
"source": "dist/functions"
}
}
.firebaserc
{
"projects": {
"default": "example-app"
},
"targets": {
"example-app": {
"hosting": {
"accounts": [
"example-accounts"
],
"admin": [
"example-admin"
]
}
}
}
}
函数中的index.js
import {https} from 'firebase-functions'
const dev = process.env.NODE_ENV !== 'production'
const app = require('next')({dev, conf: {distDir: 'next'}})
const handle = app.getRequestHandler()
const accounts = https.onRequest((req, res) =>
app.prepare().then(() => handle(req, res)))
const admin = https.onRequest((req, res) =>
app.prepare().then(() => handle(req, res)))
export {accounts, admin}
next.config.js将其移至根文件夹
module.exports = {
distDir: '../../../dist/functions/next'
}
所有应用都会呈现默认的“帐户”应用。希望管理员呈现管理应用。
答案 0 :(得分:0)
我在package.json中复制了build-public,并相应地更新了firebase.json,并且可以正常工作。
package.json
"scripts": {
"accounts": "next \"src/apps/accounts/\"",
"accounts-build": "next build \"src/apps/accounts/\"",
"accounts-build-public": "cpx \"src/public/**/*.*\" \"dist/accounts/public\" -C",
"admin": "next \"src/apps/admin/\"",
"admin-build": "next build \"src/apps/admin/\"",
"admin-build-public": "cpx \"src/public/**/*.*\" \"dist/admin/public\" -C",
...
firebase.json
将"public": "dist/public"
更新为"public": "dist/admin/public"
和"public": "dist/accounts/public"
答案 1 :(得分:0)
由于您在apps目录中具有作为admin和accounts的不同文件夹,因此当您为每个文件夹进行构建时,next.js始终考虑您正在构建的最后一个构建并服务于最后一个构建的页面,因此可以克服这一点问题,我们必须在不同的目录中为管理员创建构建,该目录将为
dist / functions / admin / next
对于客户,目录将为
dist /功能/帐户/下一个
您必须为此定义不同的distDir,以便在投放页面时它将显示在指定目录中,因此请更改您的
next.config.js(管理员)
module.exports = {
distDir: '../../../dist/functions/admin/next'
}
帐户的next.config.js
module.exports = {
distDir: '../../../dist/functions/accounts/next'
}
分别将此 next.config.js 保留在 src / apps / admin 和 src / apps / customer 目录中< / strong>并更改
函数中的index.js
import {https} from 'firebase-functions'
const dev = process.env.NODE_ENV !== 'production'
const appAdmin = require('next')({dev, conf: {distDir: 'admin/next'}});
const appAccounts= require('next')({dev, conf: {distDir: 'accounts/next'}});
const handle = app.getRequestHandler()
const accounts = https.onRequest((req, res) =>
appAccounts.prepare().then(() => handle(req, res)))
const admin = https.onRequest((req, res) =>
appAdmin.prepare().then(() => handle(req, res)))
export {accounts, admin}