如何在GAE中设置反应路线？在基本create-react-app的GAE中，通过URL直接路由到react-router-dom路由失败？ [英] How do I setup routing for react in GAE? Directly routing to react-router-dom routes via URL fails in GAE on basic create-react-app?

问题描述

这对我来说很难做到正确。通过Google进行指导的方式很少。我希望这对其他人有帮助。

This was tough for me to get exactly right. Very little in the way of guidance via Google. I hope this helps others.

正如Dan Cornilescu所指出的那样，服务人员接受了第一场比赛。因此，我们从更具体到更具体。我通过遵循 npm run build 创建的文件夹结构来解决此问题：
1.处理js，css和media的子目录。
2.处理json和ico对manifest.json和fav.ico的请求。
3.将所有其他流量路由到index.html。

As Dan Cornilescu pointed out, the handlers accept the first match. So we go from more specific to less specific. I've solved this by following the folder structure created by npm run build: 1. Handle sub-directories for js, css, and media. 2. Handle json and ico requests for manifest.json and fav.ico. 3. Route all other traffic to 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

欢迎更高效的答案。

原始问题：

在开发环境中，所有路由都可以在直接调用时起作用。

In the development enviroment, all routes work when called directly. localhost:5000 and localhost:5000/test produce expected results.

在GAE标准app.yaml函数中，URL www.test-app.com为根目录时，根目录为localhost：5000和localhost：5000 / test会产生预期的结果。直接致电。 www.test-app.com/test会产生404错误。

In GAE standard app.yaml functions for the root directory when the URL www.test-app.com is called directly. www.test-app.com/test produces a 404 error.

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产生错误意外令牌<。

Configuring app.yaml to accept wildcard routes fails for all paths. www.test-app.com/ and www.test-app.com/test produce an error "Unexpected token <". It appears that it is serving .js files as index.html.

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

Steps to reproduce this issue:

Node: 10.15.0 npm: 6.4.1

gcloud init 通过Google Cloud SDK

gcloud init via Google Cloud SDK

npm init react-app test-app

npm install react-router-dom

将路由器添加到index.js：

Add router to 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：

Add routing to 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没有变化：

No changes to 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应用程序部署

推荐答案

我从 Nathan Shephard 和Dan Cornilescu 并将其压缩到下面的app.yaml中。它似乎适用于我在GAE Standard上的React SPA。不需要应用程序服务器（例如：serve.js，ExpressJS等）。

I took the answers from Nathan Shephard and Dan Cornilescu and condensed them into the app.yaml below. It seems to be working for my React SPA on GAE Standard. No application server (ex: serve.js, ExpressJS, etc) is necessary.

env: standard
runtime: nodejs10
service: default

handlers:
  - url: /static
    static_dir: build/static

  - url: /(.*\.(json|ico|js))$
    static_files: build/\1
    upload: build/.*\.(json|ico|js)$

  - url: .*
    static_files: build/index.html
    upload: build/index.html

这篇关于如何在GAE中设置反应路线？在基本create-react-app的GAE中，通过URL直接路由到react-router-dom路由失败？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！