如何在create-react-app构建的SPA及Firebase Hosting中部署robots.txt？

安全阿岳

2026-5-27

在Firebase Hosting上为Create React App配置robots.txt和SPA路由 fallback

嗨，刚好我对这个场景很熟，给你一步步说清楚怎么做：

1. 快速添加robots.txt文件

Create React App的public目录是专门放静态资源的地方，你直接在这个文件夹里新建一个robots.txt文件，写入你需要的规则就行，比如：

User-agent: *
Allow: /
Disallow: /admin/

当你运行npm run build打包后，这个文件会自动被复制到build目录里，部署到Firebase Hosting后，就能通过http://your-domain/robots.txt访问到它了。

2. 配置Firebase Hosting捕获所有URL（解决SPA路由问题）

你提到的“捕获目录服务后的所有URL”，其实就是让Firebase在用户访问任何子路径（比如/about、/products/123）时，都返回React的index.html，这样客户端路由才能正常工作，不会出现刷新404的情况。

具体操作是修改项目根目录下的firebase.json文件，在hosting部分添加rewrites规则：

{
  "hosting": {
    "public": "build", // 指向CRA打包后的产物目录
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**", // 匹配所有URL路径
        "destination": "/index.html" // 都返回index.html
      }
    ]
  }
}

这里要注意：Firebase Hosting会优先匹配build目录里存在的静态文件（比如你的robots.txt、favicon.ico），只有当请求的路径没有对应的静态文件时，才会触发rewrite规则返回index.html，所以完全不用担心robots.txt会被覆盖。