Next Js - Firebase 部署问题答案

【问题标题】：Next Js - Firebase deployment issueNext Js - Firebase 部署问题
【发布时间】：2020-10-30 02:26:24
【问题描述】：

我正在构建一个新的 Next Js 应用程序，它是通过链接 gitlab Next js 项目使该应用程序部署在 vercel 的一种直接方式。

对于同一个项目，我需要在 firebase 中部署它。

我尝试过的事情：

-> 发firebase init

这给了 firebase.json ，

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

但上面给出的错误是，

从这个错误中，我可以得知它试图获取 index.html，但我不确定在 npm run build 之后它会在哪里 ..

所以我尝试给 pages 目录和 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"

请帮助我获取正确的 index.html 的结果，该结果将在构建 Next Js 应用程序后生成，并使应用程序内容加载到 UI 中，而不是错误（如上图）或代码（如 index.html）。 js 代码在 UI 中渲染）。

【问题讨论】：

标签： javascript reactjs firebase next.js server-side-rendering

【解决方案1】：

Firebase 只能托管静态文件，

要将 NEXT js 项目作为静态文件托管，您可以使用导出选项，然后将其部署到 Firebase。

https://nextjs.org/docs/advanced-features/static-html-export

【讨论】：