如何在使用React和Firebase托管的单页应用程序中提供robots.txt文件？

Question

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

http://example.com/robots.txt

我在这个页面上看到：

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

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

- WilliamKF

Answer 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也可以采用相同的方法。

- WilliamKF

---

我尝试了这个方法，它似乎在本地主机上可以运行，但是在通过Firebase进行的生产托管上却失败了。生产环境只渲染一个空白页面。 - deanjohnr

Answer 2

只需将以下规则添加到 firebase.json 中的 "rewrites" 部分。

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

- Lukas Kirner