如何使用 react-router 在 firebase 托管的 create-react-app 中提供 robots.txt 和 sitemap.xml

Question

我正在尝试在我的网站的根目录中提供 robots.txt 和 sitemap.xml，例如 www.fakedomain.com/robots.txt。下面描述的我的设置似乎适用于本地主机，但不适用于托管生产。托管生产返回一个空白页。

使用 firebase 托管、create-react-app 和 react-router 进行 url 处理

当前设置模仿： How can I serve robots.txt on an SPA using React with Firebase hosting?

文件夹结构： public/robots.txt public/sitemap.xml

TopApp.js

import React, { Component } from 'react';
import {
  Switch,
  Route,
  Redirect,
} from 'react-router-dom';

import App from './App';

class TopApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
    };

  }

  render() {

    return (
      <Switch>
        <Route exact path="/" render={() => (<Redirect to={"/app"}/>)}/>
        <Route path={"/app"} component={() => <App />} />
      </Switch>
    )

  }

}

export default (TopApp);

/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter,
} from 'react-router-dom';
import TopApp from './components/TopApp';
import registerServiceWorker from './registerServiceWorker';

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

registerServiceWorker();

Answer 1

它看起来像您的 Firebase 公共目录，不指向 react-create-app 生产 /build 目录。

您可以尝试将Firebase public configuration更改为：

"hosting": {
  "public": "build"
}

或者您可以尝试从头开始该过程，但请遵循我的解释以及在 Firebase 中构建和部署 react-create-app 的关键步骤：

1. 首先，为了在react-create-app 中拥有公共资产（robots.txt、sitemap.xml 等），您必须将资产放在您的 /public 目录中。

   react-create-app' docs 是这样说的：

   如果你把一个文件放到 public 文件夹，它不会被 Webpack 处理。相反，它将被原封不动地复制到 build 文件夹中。

2. 为了构建用于生产的应用程序，您将执行npm run build 或yarn build。这会将应用程序连同您的 robots.txt 和 sitemap.xml 文件一起构建到 /build 文件夹。

3. 下一步是使用 firebase init 初始化 Firebase 并选择 Firebase 托管设置。

4. 这是最重要的部分，我认为问题出在哪里。默认情况下，Firebase 公共目录为/public。但在我们的 react-create-app 案例中，我们的生产文件位于/build。所以你得手动改成/build。

5. 稍后 Firebase 会询问您是否要将应用配置为单页应用。

   1. 输入 y 并按 Enter。 接受此选项，稍后您将能够使用 react-router-dom 浏览您的应用程序。
   2. 它会说文件 build/index.html 已经存在。覆盖？按 N - 因为我们已经从 react-create-app 获得了它。

6. 最后一步是使用firebase deploy部署项目。

---

感谢How to deploy create react app to firebase的作者。