如何在 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?

查看：17
本文介绍了如何在 GAE 中设置用于反应的路由?在基本 create-react-app 上的 GAE 中，通过 URL 直接路由到 react-router-dom 路由失败?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

暂时回答

这对我来说很难做到完全正确.通过谷歌的指导方式很少.我希望这对其他人有帮助.

正如 Dan Cornilescu 指出的那样，处理程序接受第一场比赛.所以我们从更具体到不太具体.我已经按照 npm run build 创建的文件夹结构解决了这个问题:1、处理js、css、media的子目录.2. 处理 manifest.json 和 fav.ico 的 json 和 ico 请求.3. 将所有其他流量路由到 index.html.

 处理程序:- 网址:/static/js/(.*)静态文件:构建/静态/js/1上传:build/static/js/(.*)- 网址:/static/css/(.*)静态文件:构建/静态/css/1上传:build/static/css/(.*)- 网址:/static/media/(.*)静态文件:构建/静态/媒体/1上传:构建/静态/媒体/(.*)- 网址:/(.*.(json|ico))$静态文件:构建/1上传:build/.*.(json|ico)$- 网址:/静态文件:build/index.html上传:build/index.html- 网址:/.*静态文件:build/index.html上传:build/index.html

欢迎提供更有效的答案.

<块引用>

原始问题:

为 react-router 路由设置 GAE app.yaml 会产生Unexpected token <"错误.

在开发环境中，所有路由都可以直接调用.localhost:5000 和 localhost:5000/test 产生预期结果.

在 GAE 标准 app.yaml 中，当 URL www.test-app.com 被直接调用时，根目录的函数.www.test-app.com/test 产生 404 错误.

app.yaml #1运行时:nodejs8实例类:F1自动缩放:最大实例数:1处理程序:- 网址:/静态文件:build/index.html上传:build/index.html

配置 app.yaml 以接受所有路径的通配符路由失败.www.test-app.com/和 www.test-app.com/test 产生错误Unexpected token <".它似乎将 .js 文件作为 index.html 提供.

app.yaml #2运行时:nodejs8实例类:F1自动缩放:最大实例数:1处理程序:- 网址:/.*静态文件:build/index.html上传:build/index.html

重现此问题的步骤:

节点:10.15.0npm: 6.4.1

gcloud init 通过 Google Cloud SDK

npm init react-app test-app

npm install react-router-dom

将路由器添加到 index.js:

index.js从react-router-dom"导入{BrowserRouter 作为路由器，路由}；从反应"导入反应；从 'react-dom' 导入 ReactDOM；导入'./index.css';从'./App'导入应用程序；import * as serviceWorker from './serviceWorker';ReactDOM.render(<路由器><应用程序/></路由器>,document.getElementById('root'));serviceWorker.unregister();

向 app.js 添加路由:

app.js从 'react-router-dom' 导入 {Route}import React, { Component } from 'react';从'./logo.svg'导入标志；导入'./App.css';类 App 扩展组件 {使成为() {返回 (<div><路由精确路径="/"渲染={() =><div className="应用程序"><header className="App-header"><img src={logo} className="App-logo" alt="logo"/><p>编辑 <code>src/App.js</code>并保存以重新加载.</p><div className="应用程序">你好世界！</div>}/>

);}}导出默认应用程序；

package.json 没有变化:

package.json{"name": "test-app",版本":0.1.0"，私人":真的，依赖关系":{反应":^ 16.7.0"，"react-dom": "^16.7.0","react-router-dom": "^4.3.1",反应脚本":2.1.3"},脚本":{开始":反应脚本开始"，"build": "react-scripts build","test": "反应脚本测试",弹出":反应脚本弹出"},eslintConfig":{扩展":反应应用程序"},浏览器列表":[">0.2%",没死"，不是即 <= 11"，不是 op_mini 全部"]}

npm run build

gcloud 应用部署

我们如何说服应用引擎允许 React SPA 直接处理路由?

解决方案

我从 Nathan Shephard 那里得到了答案和 Dan Cornilescu 并将它们压缩到下面的 app.yaml 中.它似乎适用于我在 GAE 标准上的 React SPA.不需要应用服务器(例如:serve.js、ExpressJS 等).

env: 标准运行时:nodejs10服务:默认处理程序:- 网址:/静态static_dir:构建/静态- 网址:/(.*.(json|ico|js))$静态文件:构建/1上传:build/.*.(json|ico|js)$- 网址:.*静态文件:build/index.html上传:build/index.html

ANSWER for now

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

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

More efficient answers welcome.

Original Question:

Setting GAE app.yaml for react-router routes produces "Unexpected token <" errors.

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

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

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

Steps to reproduce this issue:

Node: 10.15.0 npm: 6.4.1

gcloud init via Google Cloud SDK

npm init react-app test-app

npm install react-router-dom

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();

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;

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 app deploy

How do we convince app engine to allow a react SPA to process routes directly?

解决方案

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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆