ОТВЕТ на данный момент
Мне было очень трудно правильно понять. Очень мало способов руководства через Google. Я надеюсь, что это помогает другим.
Как указал Дан Корнилеску, обработчики принимают первый матч. Итак, мы идем от более конкретного к менее конкретному. Я решил это, следуя структуре папок, созданной npm run build:
1. Обработка подкаталогов для js, css и media.
2. Обработка запросов json и ico для manifest.json и fav.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
Более эффективные ответы приветствуются.
Оригинальный вопрос:
Установка GAE app.yaml для маршрутов реакции-маршрутизатора приводит к ошибкам «Неожиданный токен <». </h2>
В среде разработки все маршруты работают при непосредственном вызове. localhost: 5000 и localhost: 5000 / test дают ожидаемые результаты.
В стандарте GAE app.yaml работает для корневого каталога, когда URL-адрес www.test-app.com вызывается напрямую. 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 выдают ошибку «Неожиданный токен <». Похоже, что он обслуживает файлы .js как index.html. </p>
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
нпм: 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
Как убедить механизм приложений разрешить реагирующему SPA обрабатывать маршруты напрямую?