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

Posted 2023-02-22

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

【英文标题】：How to serve robots.txt and sitemap.xml in firebase hosted create-react-app with react-router

【发布时间】：2019-05-23 08:11:49

【问题描述】：

我正在尝试在我的网站的根目录中提供 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();

【参考方案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 是这样说的：

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

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

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

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

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

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

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

---

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

【讨论】：

这已经是我的设置了。我通过重新运行这个过程来确定，但它并没有改变结果。我仍然看到一个包含 index.html HTML 代码的空白页面。