使用路由在 React 应用程序的特定目录中托管静态文件答案

【问题标题】：Hosting static files in specific directory along React app with routes使用路由在 React 应用程序的特定目录中托管静态文件
【发布时间】：2022-10-19 04:17:54
【问题描述】：

我有一个React (CRA) 应用程序，我通过以下方式成功部署到Firebase 托管：

$ firebase deploy

这是文件：firebase.json:

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "functions": [
    {
      "source": "functions",
      "codebase": "default",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ],
      "predeploy": [
        "npm --prefix \"$RESOURCE_DIR\" run lint"
      ]
    }
  ]
}

这是根目录的内容：

.env
.firebase/
.firebaserc
.git/
.gitignore
build/
firebase.json
node_modules/
package.json
package-lock.json
public/
src/

我通过以下链接访问React 应用程序：

https://my-project-name.web.app

我需要的是配置周围的东西，以便我可以在项目的根目录上添加一个新目录，例如：/files/ 我可以访问其中的任何文件（主机），例如：

同时我应该继续使用与上面相同的链接访问该应用程序：

https://my-project-name.web.app

请注意，该应用已配置路由，例如，我可以在应用中访问以下路由：

这就是为什么我需要某种例外只为路线：/files/。

谢谢！

【问题讨论】：

public 可能是您想要使用的。
@abraham 你完全正确，这对我有用。如果您将您的建议作为答案发布，我会接受。谢谢！

标签： node.js reactjs firebase firebase-hosting

【解决方案1】：

应在未捆绑到应用程序的情况下提供的文件应放在public directory 中。

如果你把一个文件放到 public 文件夹中，它不会被 webpack 处理。相反，它将被原封不动地复制到构建文件夹中。要引用公用文件夹中的资产，您需要使用名为 PUBLIC_URL 的环境变量。

【讨论】：