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

Question

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

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

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

文件夹结构:public/robots.txtpublic/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 公共(public)目录，并不指向 react-create-app 生产 /build 目录。

您可以尝试更改 Firebase public configuration至:

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

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

1. 首先，为了在 react-create-app 中拥有公共(public) Assets (robots.txt、sitemap.xml 等)，您必须将该 Assets 放入您的 /public 目录。

   这就是 react-create-app' docs说:

   If you put a file into the public folder, it will not be processed by Webpack. Instead it will be copied into the build folder untouched.

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

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

4. 这是最重要的部分，也是我认为问题所在。默认情况下，Firebase 公共(public)目录为 /public。但在我们的react-create-app案例中，我们的生产文件位于/build中。所以你必须手动将其更改为 /build。

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

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

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

<小时/>

致谢 How to deploy create react app to firebase 的作者.