Next Js - Firebase 部署问题

2024-01-02

我正在构建一个新的 Next Js 应用程序,它是使应用程序部署在vercel https://vercel.com/通过链接 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对于用户界面来说,

import React, { Component } from "react";
import Router from "next/router";

export default class Index extends Component {
  componentDidMount = () => {
    Router.push("/landing",'');
  };

  render() {
    return <div />;
  }
}

The 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.js 代码渲染)在用户界面中)。


Firebase 只能托管静态文件,

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Next Js - Firebase 部署问题 的相关文章

随机推荐

  • SKStoreProductViewController 显示开发人员的应用程序

    我在用着SKStoreProductViewController实现 更多应用程序 功能 但是当我点击列表中的产品时 我只看到空白屏幕 控制台中还有警告 无法请求视图控制器 错误域 UIViewServiceInterfaceErrorDo
  • 将平面 PHP 数组转换为基于数组键的嵌套数组?

    我需要将一个平面数组转换为一个嵌套数组 其中数组键指示结构 其中父元素变为元素零 即在示例中 education x 1 Georgia Tech 需要将其转换为 education 1 0 Georgia Tech 这是一个输入数组示例
  • 将样式应用于 Material2 组件不起作用

    我有一个
  • 尝试用GCD创建一个精确的计时器

    我正在尝试制作一个需要非常精确的计时器的音乐应用程序 它需要与背景音乐同步 我还需要在用户界面上将计时器显示为进度条 我最初是从NSTimer 事实证明根本不准确 关闭时间超过 20 毫秒 我转向 GCD 但我似乎也无法让它发挥作用 这是我
  • 在“托管到本地的过渡”期间到底发生了什么?

    我知道 CLR 在某些情况下需要进行封送处理 但假设我有 using System Runtime InteropServices using System Security SuppressUnmanagedCodeSecurity st
  • 在 Matlab 中重命名 Excel 工作表名称

    我正在使用 Matlab 创建 Excelxlswrite功能 如何更改此 Excel 文档的第一张工作表的名称 我已经阅读了官方的matlab帮助 但我还没有找到任何解决方案 您可以直接从 MATLAB 使用 ActiveX xlswri
  • 故事板中 UIButton 的自动收缩设置

    Storyboard中有一个UILabel的设置 可以设置自动收缩配置 如下所示 但我无法找到 UIButton 的文本标签的相同内容 我知道我可以通过编程方式设置此设置 但很想知道是否有办法在 Storyboard 中为 UIButton
  • 如何使用grails中的操作按钮传递参数

    执行操作的按钮出现问题 我有几个btns 我想知道它的参数 在 grails 教程中 它说应该是这样的
  • 如何将 llvm::outs() 重定向到文件?

    我正在使用一些 LLVM 工具 例如llvm nm 作为静态库 IE 我复制了源llvm nm cpp 重命名main to llvm nm 并将其编译为静态库 我想将标准输出转发到我的文件 我尝试使用下一个方法 int out fd er
  • Django:使用 django 表单创建 HTML 输入数组

    我正在尝试自动创建这样的东西
  • Android:为什么我不能在 onCreate 方法之外的按钮上调用 setOnClickListener 方法?

    这是一个新手问题 但为什么我不能在 onCreate 方法之外的按钮上调用 setOnClickListener 方法 例如 为什么我不能这样做 或者也许 Eclipse 只是没有在 onCreate 方法之外暗示 setOnClickLi
  • 我可以将 CloudKit 数据传输到新容器吗?

    我正在制作一个 CloudKit 应用程序 我面临着选择将数据存储在只能由该应用程序访问的默认容器中 还是存储在可以共享数据的自定义容器中 目前我只需要该应用程序来访问数据 因此我可能会将数据放入默认容器中 但是 如果最终我想从不同的应用程
  • 将数组/列表传递给 Python 函数

    我一直在考虑将数组或列表 Python 倾向于这样称呼它们 传递到函数中 我读到了一些关于使用 args 的内容 例如 def someFunc args for x in args print x 但不确定这是对还是错 似乎没有什么能如我
  • 我想抓取Yammer上每个组的所有消息(包括所有公司组)

    我们正在尝试使用以下命令抓取 Yammer 上每个组 包括所有公司组 的所有消息https www yammer com api v1 messages json group id https www yammer com api v1 m
  • 温斯顿中的纯文件日志记录

    我只想将数据而不是日志级别 时间戳等记录到文件中 var logger new winston Logger transports new winston transports File
  • 在 keras 中,如何使用自定义对象克隆模型?

    我有一个带有自定义激活的模型 因此 model2 keras models clone model model 给出一个错误 我可以使用加载保存的模型自定义对象关键字 但我没有看到这样的选项克隆模型 除了重新制作模型和转移权重之外 还有其他
  • 检测外来词

    我正在编写一个脚本来检测语言 A 中来自语言 B 的单词 这两种语言非常相似 并且可能具有相同单词的实例 如果您对我目前掌握的内容感兴趣 代码就在这里 https github com arashsa language detection
  • 具有透明背景和旋转渐变边框的按钮

    我想要实现的是一个像这样的按钮 完成后 我需要在悬停时设置动画 我能找到的最接近的例子是这个codepen https codepen io Chester pen QPoyjN https codepen io Chester pen Q
  • .NET ASMX - 返回纯 JSON?

    我在这里要疯了 我查看了以下条目并none他们中的一些人正在纠正我所看到的异常行为 如何从 2 0 asmx Web 服务返回 JSON https stackoverflow com questions 288850 how to ret
  • Next Js - Firebase 部署问题

    我正在构建一个新的 Next Js 应用程序 它是使应用程序部署在vercel https vercel com 通过链接 gitlab Next js 项目 对于同一个项目 我需要将其部署在 firebase 中 我尝试过的事情 gt 制