如何在Firebase托管上部署next.js应用程序?

React.js

Davaid猪猪

2020-03-24

我正在尝试在Firebase托管上部署next.js应用程序。但是我不知道将哪些文件推送到服务器。当我运行npm run build并将构建文件夹推送到firebase时。但是给出的错误是找不到index.html文件。

这是构建文件夹输出的图像。我刚刚创建了一个用于测试目的的简单组件。

生成命令的输出

第3386篇《如何在Firebase托管上部署next.js应用程序?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
神无小卤蛋樱 2020.03.24

在上面,package.json您需要添加npm脚本来进行构建和导出。

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },

然后您可以运行

npm run build && npm run export

下一个版本将构建您的项目以进行运输和导出,并将文件准备好托管在静态托管服务器(例如firebase托管)上。

npm run export

将创建一个out/目录,并将所有文件放在目录中以供上传。

注意:

如果您的应用需要在运行时生成动态页面,则不能将其部署为静态应用。

阅读更多

西里Near 2020.03.24

查看先出。这是next.js在其github存储库中提供的官方示例。

示例背后的想法

目标是使用Firebase托管重写规则将Next.js应用程序托管在Firebase Cloud Functions上,以便从我们的Firebase托管URL提供我们的应用程序。每个单独的页面包都在对Cloud Function的新调用中提供,Cloud Function执行初始服务器渲染。

这基于此处描述的https://github.com/geovanisouza92/serverless-firebasehttps://github.com/jthegedus/firebase-functions-next-example上的工作

PS:我知道将链接发布为答案不是最好的方法,但是我的代表力量不足以将此作为评论。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android