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

Question

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

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

当前设置模仿: 如何使用React with Firebase托管在SPA上提供robots.txt？

文件夹结构: 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 公共配置更改为：

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

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

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

   这是react-create-app'文档所说的：

   如果将文件放入 public 文件夹中，Webpack 将不会处理该文件。相反，它将原封不动地复制到构建文件夹中。

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

3. 下一步是使用 初始化 Firebasefirebase init并选择Firebase Hosting setup。

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的作者。