Google App Engineにデプロイしても、reactフロントエンドは変更されません

2
BigSteppaJC 2020-10-08 20:22.

私のApp.yaml設定ファイルは:

runtime: nodejs12


handlers:
  # Serve all static files with url ending with a file extension
  - url: /(.*\..+)$ static_files: build/\1 upload: build/(.*\..+)$
  # Catch all handler to index.html
  - url: /.*
    static_files: build/index.html
    upload: build/index.html
    secure: always
    redirect_http_response_code: 301
  - url: /static
    static_dir: static

デプロイしてもフロントエンドは更新されません。デプロイするたびに静的ファイルは変更されないと思います。キャッシングですか?どうしたらいいのかわからない

1 answers

1
Alex 2020-10-09 04:03.

まず、トラフィックを新しいバージョンに移行するのではなく、新しいバージョンにデプロイしますか?GCPコンソールで、[AppEngine]> [バージョン](https://console.cloud.google.com/appengine/versions)現在展開されているバージョンを確認すると、トラフィックを受信して​​いるバージョンがわかります。

次に、ファイルが実際にデプロイされていることを確認します。GCPコンソールの「デバッガー」に移動した場合(https://console.cloud.google.com/debug)、展開されているファイルを参照できます。複数のバージョンがある場合は、それらを切り替えるためのバージョンドロップダウンがあるため、正しいバージョンを参照していることを確認してください。

キャッシングですか?

特に指定しない場合、AppEngineは静的アセットのキャッシュ期間を10分に設定します。

default_expirationオプション。アプリケーションのすべての静的ファイルハンドラーにグローバルなデフォルトのキャッシュ期間を設定します。特定の静的ファイルハンドラーのキャッシュ期間を構成することもできます。値は、スペースで区切られた数値と単位の文字列です。単位は、日を表すd、時間を表すh、分を表すm、秒を表すsです。たとえば、「4d 5h」は、ファイルが最初に要求されてから4日と5時間後にキャッシュの有効期限を設定します。省略した場合、実動サーバーは有効期限を10分に設定します。

https://cloud.google.com/appengine/docs/standard/nodejs/config/appref#runtime_and_app_elements

編集:また、あなたのhandlers:問題の順序。それらは順番にチェックされます。したがって、ルールurl: /.*はおそらく、ルールによってキャプチャされることを意図したすべてのトラフィックをキャプチャすることです。url: /static

さらに、キャッチオールurl: /.*ハンドラーがindex.htmlを返すのは間違いだと思います。url: /index.htmlindex.htmlを返し、残りを404にするようなものを用意することをお勧めします。おそらく、現在気付いていない他のエラー/タイプミスのURLがあります。

編集2:

私は実際にあなたの現在のセットアップがこれまでに機能したことに驚いていますapp.yaml

静的ハンドラーを使用するには、ハンドラーの少なくとも1つに行が含まれているscript: autoか、entrypoint正常にデプロイするための要素を定義する必要があります。

https://cloud.google.com/appengine/docs/standard/nodejs/config/appref

だから私はサンプルプロジェクトをまとめました、これは私のプロジェクト構造です:

- build
  - index.html
- node_modules
  - <folders-from-npm-install>
- static
  - css
    - bootstrap.css
- app.js
- app.yaml
- package.json

app.yaml、私はいくつかのことをしました。

  • キャプチャしていたurl: /staticので最初に置きました。url: /(.*\..+)$/static/css/bootstrap.css
  • すでに処理していたindex.htmlので、エントリを削除しましたurl: /(.*\..+)$
  • 残りのすべてのトラフィックを送信する最後のキャッチオールエントリを追加しました app.js

app.yaml:

runtime: nodejs12

handlers:
  - url: /static
    static_dir: static
  # Serve all static files with url ending with a file extension
  - url: /(.*\..+)$ static_files: build/\1 upload: build/(.*\..+)$
  - url: /.*
    script: auto

以下のためにapp.jspackage.json私はここGAEの「Hello World」の例からそれらをコピーしますhttps://github.com/GoogleCloudPlatform/nodejs-docs-samples/tree/master/appengine/hello-world/standard

app.js:

'use strict';

// [START gae_node_request_example]
const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.status(200).send('Hello, world!').end();
});

// Start the server
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}`);
  console.log('Press Ctrl+C to quit.');
});
// [END gae_node_request_example]

module.exports = app;

package.json:

{
  "name": "appengine-hello-world",
  "description": "Simple Hello World Node.js sample for Google App Engine Standard Environment.",
  "version": "0.0.2",
  "private": true,
  "license": "Apache-2.0",
  "author": "Google Inc.",
  "repository": {
    "type": "git",
    "url": "https://github.com/GoogleCloudPlatform/nodejs-docs-samples.git"
  },
  "engines": {
    "node": ">=12.0.0"
  },
  "scripts": {
    "start": "node app.js",
    "test": "mocha --exit test/*.test.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "mocha": "^8.1.3",
    "supertest": "^5.0.0"
  }
}

私は走ったnpm installnpm startの行動ハロー、世界の指示に従って、ローカルで実行するために、残念ながらそのdoesntのエミュレートhandlers:でのapp.yaml

私がそれを展開したとき、 https://my_project_id.appspot.com/index.html 動作しました。

Related questions

MORE COOL STUFF

Reba McEntire は、彼女が息子の Shelby Blackstock と共有する「楽しい」クリスマスの伝統を明らかにしました:「私たちはたくさん笑います」

Reba McEntire は、彼女が息子の Shelby Blackstock と共有する「楽しい」クリスマスの伝統を明らかにしました:「私たちはたくさん笑います」

Reba McEntire が息子の Shelby Blackstock と共有しているクリスマスの伝統について学びましょう。

メーガン・マークルは、自然な髪のスタイリングをめぐってマライア・キャリーと結ばれました

メーガン・マークルは、自然な髪のスタイリングをめぐってマライア・キャリーと結ばれました

メーガン・マークルとマライア・キャリーが自然な髪の上でどのように結合したかについて、メーガンの「アーキタイプ」ポッドキャストのエピソードで学びましょう.

ハリー王子は家族との関係を修復できるという「希望を持っている」:「彼は父親と兄弟を愛している」

ハリー王子は家族との関係を修復できるという「希望を持っている」:「彼は父親と兄弟を愛している」

ハリー王子が家族、特にチャールズ王とウィリアム王子との関係について望んでいると主張したある情報源を発見してください。

ワイノナ・ジャッドは、パニックに陥った休暇の瞬間に、彼女がジャッド家の家長であることを認識しました

ワイノナ・ジャッドは、パニックに陥った休暇の瞬間に、彼女がジャッド家の家長であることを認識しました

ワイノナ・ジャッドが、母親のナオミ・ジャッドが亡くなってから初めての感謝祭のお祝いを主催しているときに、彼女が今では家長であることをどのように認識したかを学びましょう.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

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

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

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

モンサントは世界で最も強力な遺伝子編集ツールにアクセスできるようになりました

モンサントは世界で最も強力な遺伝子編集ツールにアクセスできるようになりました

画像:AP通信の農業会社であるモンサントは、MITのブロード研究所とハーバード大学からCRISPR / Cas9遺伝子編集システムを使用するための非独占的なグローバルライセンス契約を取得しました。同社はこれを使用して新しい種子や植物を設計および栽培しますが​​、モンサントがこの革新的な新技術を悪用するのを防ぐために、その使用には重要な制限があります。

グーグルのAIが囲碁世界チャンピオンの李世ドルとの最初の試合に勝った

グーグルのAIが囲碁世界チャンピオンの李世ドルとの最初の試合に勝った

画像提供:Linh Nguyen一連の試合の最初の試合で、Google Deepmindの強力な人工知能AlphaGoが囲碁の世界チャンピオンであるリーセドルを打ち負かしました。セドルとDeepMindの試合(実際には5つのうちの最初の試合)がYouTubeで生放送されました。 3月9日。

アマゾンのタイルスポーツとタイルプロブラックフライデーのお得な情報には無料のエコードットが付属しています

アマゾンのタイルスポーツとタイルプロブラックフライデーのお得な情報には無料のエコードットが付属しています

タイルトラッカーは、鍵を見つけることができないためにいつも遅れている友人に素晴らしい贈り物をします(真剣に、彼らはとても時間厳守です、誰もがいつもそれを言っています、彼らは彼らの鍵を見つけることができませんでした!)、そしてAmazonのタイルブラックフライデーのお得な情報彼ら(またはあなた自身)のためにいくつかを購入するのは簡単です。ここでは3つの選択肢があります:私のお金のために、それはプロを取得する価値があります。

それにふたを置きます。実際、すべてに蓋をしてください。14ドルで12個のシリコンストレッチキッチン蓋を手に入れよう. [エクスクルーシブ]

それにふたを置きます。実際、すべてに蓋をしてください。14ドルで12個のシリコンストレッチキッチン蓋を手に入れよう. [エクスクルーシブ]

Tomorrow's Kitchen シリコンストレッチ蓋 12個パック | $14 | アマゾン | プロモーション コード 20OFFKINJALids は基本的にキッチンの靴下です。常に迷子になり、二度と閉じられない孤立したコンテナーが残ります。しかし、蓋が伸びて、残った容器、鍋、フライパン、さらには大きなスライスされた果物のすべてに適合するとしたらどうでしょうか? その非常に特殊な蓋を失うことを二度と心配する必要はありません。

米国のフィギュア スケートは、チーム イベントでの最終決定の欠如に「苛立ち」、公正な裁定を求める

米国のフィギュア スケートは、チーム イベントでの最終決定の欠如に「苛立ち」、公正な裁定を求める

ロシアのフィギュアスケーター、カミラ・バリエバが関与したドーピング事件が整理されているため、チームは2022年北京冬季オリンピックで獲得したメダルを待っています。

Amazonの買い物客は、わずか10ドルのシルクの枕カバーのおかげで、「甘やかされた赤ちゃんのように」眠れると言っています

Amazonの買い物客は、わずか10ドルのシルクの枕カバーのおかげで、「甘やかされた赤ちゃんのように」眠れると言っています

何千人ものAmazonの買い物客がMulberry Silk Pillowcaseを推奨しており、現在販売中. シルクの枕カバーにはいくつかの色があり、髪を柔らかく肌を透明に保ちます。Amazonで最大46%オフになっている間にシルクの枕カバーを購入してください

パデュー大学の教授が覚醒剤を扱った疑いで逮捕され、女性に性的好意を抱かせる

パデュー大学の教授が覚醒剤を扱った疑いで逮捕され、女性に性的好意を抱かせる

ラファイエット警察署は、「不審な男性が女性に近づいた」という複数の苦情を受けて、12 月にパデュー大学の教授の捜査を開始しました。

コンセプト ドリフト: AI にとって世界の変化は速すぎる

コンセプト ドリフト: AI にとって世界の変化は速すぎる

私たちの周りの世界と同じように、言語は常に変化しています。以前の時代では、言語の変化は数年または数十年にわたって発生していましたが、現在では数日または数時間で変化する可能性があります。

SF攻撃で91歳のアジア人女性が殴られ、コンクリートに叩きつけられた

犯罪擁護派のオークランドが暴力犯罪者のロミオ・ロレンゾ・パーハムを釈放

SF攻撃で91歳のアジア人女性が殴られ、コンクリートに叩きつけられた

認知症を患っている 91 歳のアジア人女性が最近、47 番街のアウター サンセット地区でロメオ ロレンゾ パーハムに襲われました。伝えられるところによると、被害者はサンフランシスコの通りを歩いていたところ、容疑者に近づき、攻撃を受け、暴行を受けました。

ℝ

“And a river went out of Eden to water the garden, and from thence it was parted and became into four heads” Genesis 2:10. ? The heart is located in the middle of the thoracic cavity, pointing eastward.

メリック・ガーランドはアメリカに失敗しましたか?

バイデン大統領の任期の半分以上です。メリック・ガーランドは何を待っていますか?

メリック・ガーランドはアメリカに失敗しましたか?

人々にチャンスを与えることは、人生で少し遅すぎると私は信じています。寛大に。

Language