将网络应用上传到 Firebase 的过程答案

【问题标题】：Procedure uploading a web-app to Firebase将网络应用上传到 Firebase 的过程
【发布时间】：2021-12-19 06:47:30
【问题描述】：

虽然我过去在Firebase 上设置了几个网络应用程序。这次我在上传这个到服务器时遇到了问题。

这个应用的特别之处在于我使用的是 React。

我关注this tutorial，在终端做了以下操作：

$ npx create-react-app myapp
$ cd myapp/
$ npm install firebase --save
$ npm start

然后在花了很多时间在 React 方面工作以获得足够接近我口味的东西之后，此时我可以看到应用程序在端口 3000 (http://localhost:3000/) 上运行，在我期望的浏览器。它还可以根据需要访问服务器上的实时数据库。下一步是让应用程序本身在服务器上运行，而不仅仅是像现在这样在我的本地主机上运行。 为此我需要做什么？ 根据我之前使用 Firebase 的经验，我进行了一些试验，运行“firebase deploy”（+ 其他一些东西），但它不起作用。该应用程序不在服务器上。更准确地说，它显示了一个白页。

作为补充信息，这是我的 firebase.json 文件：

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

public 目录的外观如下：

...$ ls public/
404.html    index.html  logo512.png robots.txt
favicon.ico logo192.png manifest.json
...$

【问题讨论】：

您在部署之前构建了应用程序吗？您还可以分享您的 firebase.json 文件和目录结构的屏幕截图吗？r
@Dharmaraj。在运行“firebase deploy”之前，我尝试过运行“npm run build”；但没有特别成功。（这就是“在部署之前构建应用程序”的意思吗？）。我在帖子末尾添加了firebase.json文件，请看一下。对于目录结构，它很长，所以如果你能准确地告诉我你需要知道什么或我需要检查什么，那就太好了。
是的。构建文件夹的名称是什么？现在你的 firebase.json 寻找一个文件夹 'public' 并部署它。
我在帖子末尾添加了公共文件夹的内容，以防万一有用。除此之外，我不知道在任何地方设置构建文件夹的名称。
@Dharmaraj。跟随你的 cmets，我做了一些目录探索和一些思考；并尝试用“build”替换firebase.json文件“public”中的“hosting”中的“public”字段。结果（重新运行后：firebase deploy）是成功的，我现在可以看到我的应用程序直接在服务器上运行。请随时添加您可能有的任何进一步评论。

标签： reactjs firebase firebase-realtime-database

【解决方案1】：

您必须构建您的 React 应用程序（npm run build 或您的构建命令），然后确保 firebase.json 中的 public 目录是您的 build 文件夹。

{
  "hosting": {
    "public": "build", // name of build output directory
  }
}

在您的情况下，它被设置为public，因此正在部署该目录。

【讨论】：