我正在构建一个新的 Next Js 应用程序,它是使该应用程序部署在 vercel 中的直接方式。通过链接 gitlab Next js 项目..
对于同一个项目,我需要将其部署在 firebase 中。
我尝试过的事情:
-> 制作 firebase init
这给出了 firebase.json ,
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
但是上面的错误是这样的,
从这个错误中我可以得知它尝试获取index.html,但我不确定npm run build
之后它会在哪里..
所以我尝试提供页面目录和index.js文件,例如,
{
"hosting": {
"public": "pages",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"rewrites": [{
"source": "/pages/**",
"destination": "/index.js"
},
{
"source": "**",
"destination": "/index.js"
}]
}
但这只是将 index.js 中可用的代码打印到 UI,例如,
import React, { Component } from "react";
import Router from "next/router";
export default class Index extends Component {
componentDidMount = () => {
Router.push("/landing",'');
};
render() {
return <div />;
}
}
gitlab-ci.yml文件如下,
image: node:12.13.0-alpine
stages:
- deploy
cache:
paths:
- node_modules/
key: "$CI_BUILD_REPO"
deploy-prod:
stage: deploy
only:
- master
script:
- npm install
- npm run build
- npm install -g firebase-tools
- firebase -V
- firebase use anvisysytems --token "token_hidden"
- firebase deploy --only hosting -m "Pipe $CI_PIPELINE_ID Build $CI_BUILD_ID" --token "token_hidden"
请帮助我实现获取构建 Next Js 应用程序后生成的正确 index.html 的结果,并使应用程序内容加载到 UI 中,而不是错误(如上图)或代码(如 index.html)。 UI 中渲染的 js 代码)。
最佳答案
Firebase 只能托管静态文件,
要将 NEXT js 项目托管为静态文件,您可以使用导出选项,然后将其部署到 Firebase。
https://nextjs.org/docs/advanced-features/static-html-export
关于javascript - Next Js - Firebase 部署问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62815760/