Question

我正在尝试在我的网站的根目录（例如www.fakedomain.com/robots.txt）上投放robots.txt和sitemap.xml。下面描述的我的设置似乎可以在localhost上运行，但不能在托管产品上运行。托管生产返回空白页。

使用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的关键步骤进行操作：

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

react-create-app' docs的意思是：

如果将文件放入公用文件夹，Webpack将不会对其进行处理。而是将其原封不动地复制到 build 文件夹中。
为了构建用于生产的应用程序，您将执行npm run build或yarn build。这样会将应用程序与robots.txt和sitemap.xml文件一起构建到/build文件夹中。
下一步是使用firebase init初始化Firebase并选择 Firebase托管设置。
这是最重要的部分，我认为问题出在哪里。默认情况下，Firebase公用目录为/public。但是在我们的react-create-app情况下，我们的生产文件位于/build中。因此，您必须手动将其更改为/build。
稍后的Firebase会询问您是否要将应用程序配置为单页应用程序。
1. 键入 y ，然后按Enter。 接受此选项，以后您将可以使用react-router-dom导航您的应用程序。
2. 会说File build / index.html已经存在。覆盖？按 N -因为我们已经从react-create-app获得了它。
最后一步是使用firebase deploy部署项目。

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

如何在Firebase托管的带有响应路由器的create-react-app中提供robots.txt和sitemap.xml

1 个答案: