【发布时间】：2019-06-12 08:42:48
【问题描述】：
暂时回答
这对我来说很难完全正确。通过谷歌的指导方式很少。我希望这对其他人有所帮助。
正如 Dan Cornilescu 指出的那样，处理程序接受了第一场比赛。所以我们从更具体到不太具体。我按照npm run build 创建的文件夹结构解决了这个问题：
1.处理js、css和media的子目录。
2. 处理 manifest.json 和 fav.ico 的 json 和 ico 请求。
3. 将所有其他流量路由到 index.html。
handlers:
- url: /static/js/(.*)
static_files: build/static/js/\1
upload: build/static/js/(.*)
- url: /static/css/(.*)
static_files: build/static/css/\1
upload: build/static/css/(.*)
- url: /static/media/(.*)
static_files: build/static/media/\1
upload: build/static/media/(.*)
- url: /(.*\.(json|ico))$
static_files: build/\1
upload: build/.*\.(json|ico)$
- url: /
static_files: build/index.html
upload: build/index.html
- url: /.*
static_files: build/index.html
upload: build/index.html
欢迎提供更有效的答案。
原问题：
为 react-router 路由设置 GAE app.yaml 会产生“Unexpected token
在开发环境中，所有路由都在直接调用时起作用。 localhost:5000 和 localhost:5000/test 产生预期的结果。
在直接调用 URL www.test-app.com 时根目录的 GAE 标准 app.yaml 函数中。 www.test-app.com/test 产生 404 错误。
app.yaml #1
runtime: nodejs8
instance_class: F1
automatic_scaling:
max_instances: 1
handlers:
- url: /
static_files: build/index.html
upload: build/index.html
将 app.yaml 配置为接受通配符路由对于所有路径都失败。 www.test-app.com/ 和 www.test-app.com/test 产生错误“Unexpected token
app.yaml #2
runtime: nodejs8
instance_class: F1
automatic_scaling:
max_instances: 1
handlers:
- url: /.*
static_files: build/index.html
upload: build/index.html
重现此问题的步骤：
节点：10.15.0 npm：6.4.1
gcloud init 通过 Google Cloud SDK
npm init react-app test-app
npm install react-router-dom
将路由器添加到 index.js：
index.js
import {BrowserRouter as Router, Route} from 'react-router-dom';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root'));
serviceWorker.unregister();
向 app.js 添加路由：
app.js
import {Route} from 'react-router-dom'
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div>
<Route exact path="/"
render={() => <div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>} />
<Route exact path="/test"
render={() => <div className="App">
Hello, World!
</div>} />
</div>
);
}
}
export default App;
package.json 没有变化：
package.json
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
npm run build
gcloud app deploy
我们如何说服应用引擎允许 React SPA 直接处理路由？
【问题讨论】：
-
在运行时它说它是 nodejs8 这是否意味着加载其反应 index.html 的 nodejs？
-
据我所知，这是正确的。 node.js 通过 index.html 提供响应。
-
是的，我刚刚在 GAE 中签入了文档，因此要进行 spa / 反应，nodejs 必须加载文件，并将路由设置为全部指向 index.html Ex
router.get('/*', (req, res) => { res.sendFile(path.join(__dirname, '../../build', 'index.html')) });。现在如何在我不再知道的 GAE 设置中进行设置，在使用 nodejs 和 reactjs 进行部署时，我总是手动设置。 -
谢谢。这与我发现的响应类似。但我不知道这段代码去哪里了。在我看来，这就像服务器端代码，比如 express。这对我来说是一个困惑点。我有一个运行快递的服务，但我的反应内容不是从那里提供的。
-
是的，我明白了，从 GEA 阅读文档在我看来就是这样，nodejs 运行一个 express 并加载它的 index.html，关键是要更改服务器内部的配置。跨度>
标签： google-app-engine google-cloud-platform react-router create-react-app app.yaml