我试图在我的网站的根部服务robots.txt和sitemap.xml,如www.fakedomain.com/robots.txt.我下面描述的设置似乎在localhost工作,但不是在托管生产。托管产品返回空白页。
使用firebase托管、创建react应用程序和react路由器进行url处理
当前设置模拟:如何使用React与Firebase托管在SPA上robots.txt?
文件夹结构:公共/robots.txt
公共/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();
它看起来像您的Firebase公共目录,没有指向react-create-app
生产/build
目录。
您可以尝试将Firebase公用配置更改为:
"hosting": {
"public": "build"
}
或者您也可以尝试从头开始,但请遵循我的说明以及在Firebase中构建和部署react create app
的关键步骤:
>
首先,为了在react-create-app
中拥有公共资产(robots.txt,sitemap.xml等),您必须将该资产放在您的/Public
目录中。
react-create-app的文档是这样说的:
如果将文件放入公用文件夹,则Webpack不会处理该文件。相反,它将原封不动地复制到构建文件夹中。
为了构建用于生产的应用程序,您将执行npm运行构建
或纱线构建
。这将与您的机器人一起将应用程序构建到/build
文件夹中。txt和站点地图。xml文件。
下一步是使用Firebase init
初始化Firebase,并选择Firebase主机设置。
这是最重要的部分,也是我认为问题所在。默认情况下,Firebase公用目录为/public
。但在我们的react create应用程序案例中,我们的生产文件位于/build
中。因此,您必须手动将其更改为/build
。
稍后Firebase会询问您是否希望将应用配置为单页应用。
最后一步是使用firebase deploy
部署项目。
如何将创建响应应用部署到Firebase的作者的学分。