如何使用 React 和 Firebase 托管在 SPA 上提供 robots.txt？

Posted 2023-02-22

【中文标题】如何使用 React 和 Firebase 托管在 SPA 上提供 robots.txt？

【英文标题】：How can I serve robots.txt on an SPA using React with Firebase hosting?

【发布时间】：2018-10-18 18:43:49

【问题描述】：

我有一个使用 create-react-app 构建的 SPA，并希望有一个这样的 robots.txt：

http://example.com/robots.txt

我在this page 上看到：

您需要确保您的服务器配置为在配置为从目录提供服务后捕获任何 URL。

但对于 Firebase 托管，我不确定该怎么做。

【参考方案1】：

在我的/public 目录中，我创建了一个robots.txt。

在我的/src 目录中，我执行了以下操作：

我创建了/src/index.js：

import React from 'react'
import ReactDOM from 'react-dom'
import TopApp from './TopApp'
import registerServiceWorker from './registerServiceWorker'

import BrowserRouter from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>
    <TopApp/>
  </BrowserRouter>,
  document.getElementById('react-render-root')
)

registerServiceWorker()

我创建了/src/TopApp.js：

import React from 'react'

import 
  Switch,
  Route
 from 'react-router-dom'

import ComingSoon from './ComingSoon'
import App from './App'

export class TopApp extends React.Component 
  render() 
    return (
      <div className="TopApp">
        <Switch>
          <Route path='/MyStuff' component=App/>
          <Route exact path='/' component=ComingSoon/>
        </Switch>
      </div>
    )
  

因为路径 /robots.txt 没有被提供的路由器路径覆盖，所以它从我的公共目录中获取它，并且机器人文件已根据需要发布。

sitemap.xml 也可以这样做。

【讨论】：

我试过了，它似乎适用于 localhost，但不适用于通过 firebase 进行的生产托管。生产呈现空白页

【参考方案2】：

只需将以下规则添加到firebase.json 中的“重写”部分

"rewrites": [
      
        "source": "/robots.txt",
        "destination": "/robots.txt"
      ,
      
        "source": "**",
        "destination": "/index.html"
      
]