GAEでreactのルーティングを設定するにはどうすればよいですか?基本的なcreate-react-appのGAEで、URLを介したreact-router-domルートへの直接ルーティングが失敗しますか?

16
Nathan Shepherd 2019-01-18 18:55.

今のところ答える

これは私が正確に正しく理解するのは大変でした。グーグルを介したガイダンスの方法はほとんどありません。これが他の人の役に立つことを願っています。

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ルートにGAEapp.yamlを設定すると、「予期しないトークン<」エラーが発生します。

開発環境では、直接呼び出されるとすべてのルートが機能します。localhost:5000およびlocalhost:5000 / testは、期待される結果を生成します。

GAEでは、URL www.test-app.comが直接呼び出された場合、ルートディレクトリの標準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は、「予期しないトークン<」というエラーを生成します。.jsファイルを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

gcloud init Google CloudSDK経由

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がルートを直接処理できるようにAppEngineを説得するにはどうすればよいですか?

4 answers

23
John Michelau 2019-04-25 03:26.

私はから答えを取りました https://stackoverflow.com/users/5463417/nathan-shepherd そして https://stackoverflow.com/users/4495081/dan-cornilescuそれらを以下のapp.yamlに凝縮します。GAEStandardのReactSPAで機能しているようです。アプリケーションサーバー(例:serve.js、ExpressJSなど)は必要ありません。

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
2
Dan Cornilescu 2019-01-19 06:27.

リクエストがURLパスに入るhandlersと、app.yamlファイルのセクションで指定されたパターンと、指定された順序で比較されます。最初の一致が勝ち、一致するハンドラーが指定するものはすべて実行されます。これを理解すれば、何が起こっているのかを推測する必要はもうありません。

つまり、www.test-app.comwww.test-app.com/testにリクエストを送信します。これは、それぞれ//testURLパスに変換されます。

1番目の場合app.yaml(パターンが同じであることに注意してください。2番目のパターンは一致しません):

  • /最初のパターンに一致するとbuild/index.html、アプリディレクトリからの静的(.jsファイルではありません!)が返されます
  • /test どのパターンにも一致しない場合、404が返されます

あなたの2番目でapp.yaml

  • /2番目のパターンに一致すると、静的buildディレクトリが提供されます(これにより、ノードアプリがトリガーされると思いますが、確信はありません-私はノードユーザーではありません)
  • /test最初のパターンに一致しbuild/index.htmlます。この場合も、静的ファイルが返されます。

私は疑いbuild/index.htmlあなたの展開(全体のことを作った場所からアプリのディレクトリからファイルをbuild引き起こし、 - DIRは静的でdirとしてアップロードされた)あなたは展開を作った時のHTMLの構文エラーを持っていた(それの静的それが凍結した方法だということを)表示されるエラーメッセージ。

あなたは可能性がある、それは今ローカルで作業しているように見える理由を説明することができ、展開、以来、ファイルのローカルコピーを修正しました。その場合、アプリを再デプロイすると、GAEの問題も修正されるはずです。

更新:

静的ハンドラーは必要ないと思いますbuild/index.html。デプロイメント時にローカルワークスペースのそのファイルに含まれていたコンテンツは常に提供されます。

私は公式からの非静的な例に従いますhttps://cloud.google.com/appengine/docs/standard/nodejs/config/appref#handlers_element(元の.*パターンではなくパターンで更新され、/.*確実に一致する/ようになりました):

handlers:
- url: .*
  script: auto

handlersセクションを完全に削除することさえ可能かもしれません、私はいくつかに1つを見ませんhttps://github.com/GoogleCloudPlatform/nodejs-docs-samples 例:

  • https://github.com/GoogleCloudPlatform/nodejs-docs-samples/blob/master/appengine/datastore/app.standard.yaml
  • https://github.com/GoogleCloudPlatform/nodejs-docs-samples/blob/master/appengine/memcached/app.standard.yaml
  • https://github.com/GoogleCloudPlatform/nodejs-docs-samples/blob/master/appengine/storage/standard/app.yaml
1
Abdullah Saud 2020-01-23 02:05.

私はこれにしばらく時間を費やしましたが、これはGAEStandardのReactCRAで完全に機能します。

runtime: nodejs10
service: bbi-staging
env: standard
instance_class: F2
handlers:
  - url: /(.*\.(gif|media|json|ico|eot|ttf|woff|woff2|png|jpg|css|js))$
    static_files: build/\1
    upload: build/(.*)
  - url: /(.*)
    static_files: build/index.html
    upload: build/index.html
0
Sahar 2019-09-18 22:36.

Google App Engine、webpack、app.yamlを1日楽しんだ後、次のような設定でうまくいきました。

webpack.js(関連するjsonパーツ、つまりモジュールのルールのみ):

  {
    test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { name: '[name].[ext]', outputPath: 'media/', limit: 8192 } } ] }, { test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'fonts/'
      }
    }
    ]
  },

app.yaml

runtime: nodejs10 
handlers:
  - url: /(.*\.(png|ico|jpg|gif))$ static_files: dist/\1 upload: dist/.*\.(png|ico|jpg|gif)$
  - url: /fonts/(.*\.(woff|woff2))$ static_files: dist/fonts/\1 upload: dist/fonts/.*\.(woff|woff2)$
  - url: /html.js
    static_files: dist/html.js
    upload: dist/html.js
  - url: /javascript.js
    static_files: dist/javascript.js
    upload: dist/javascript.js
  - url: /.*
    static_files: dist/index.html
    upload: dist/index.html
    secure: always
    redirect_http_response_code: 301
  - url: /
    static_dir: dist

注:私の出力ディレクトリはdistなので、その場合はビルドに変更してください。

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

この太陽に優しいショルダーバッグで一日中外出してください

この太陽に優しいショルダーバッグで一日中外出してください

画像クレジット:Richard Mackney / Flickrトラベリングライトは必需品だけを運ぶことを意味するかもしれませんが、デバイスを補充する方法がない外出先では、接続を維持するのが難しくなる可能性があります。それはあなたがすべての生き物の快適さやクールなガジェットを捨てる必要があるという意味ではありません、ただあなたがいくつかのより小さなものを手に入れる必要があるということです、そしておそらくあなた自身をジュースに保つためにいくつかの、例えば非正統的な充電装置を使うでしょう。

ミッドセンチュリーリゾートのポストカードが廃墟に変わるのを見る

ミッドセンチュリーリゾートのポストカードが廃墟に変わるのを見る

ニューヨーク州スプリンググレンにある放棄されたホモワックロッジのボーリング場。キャッツキル南部のこの地域は、ニューヨーク市からのユダヤ人の行楽客に人気があることから、かつてはボルシチベルトとして知られていました。

ブルックリンスレートの美しいボードをあなたのテーブルに座らせましょう

ブルックリンスレートの美しいボードをあなたのテーブルに座らせましょう

ブルックリンスレートブルックリンスレートのマグカップとコースターの賞賛をすでに歌っており、それらの食器製品も同様に堅実です。ブルックリンスレートは、さまざまなサイズとテクスチャのスレートの完全な採石場を販売しています。一部のオプションは赤でも利用できます。上で見ることができるように、彼らは同様にカスタマイズをします。

遺伝子分析により、私たちの体内に生息する微生物の99%がカタログ化されていないことが明らかになりました

遺伝子分析により、私たちの体内に生息する微生物の99%がカタログ化されていないことが明らかになりました

画像:Juan Gaertner / Shutterstock私たちの体の内部は、私たちの細胞とは何の関係もない何十億もの微生物が住んでいる本物の生態系です。これがまだ少し気になることではなかったかのように、これらの微生物の99%が研究されたことがないことがわかりました。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language