當我部署到 Google App Engine 時，我的 React 前端沒有改變

Question

我的 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

當我部署它時，它不會更新前端。 我認為每次部署時靜態文件都不會改變。 是緩存嗎？ 我不知道該怎么辦

Answer 1

首先，您是否正在部署到新版本而不是將流量遷移到它？ 在 GCP 控制台中，您可以轉到“App Engine”>“版本”（ https://console.cloud.google.com/appengine/versions ）以查看您當前部署的版本，它會告訴您哪個版本正在接收流量.

接下來，確保您的文件確實已部署。 如果您轉到 GCP 控制台 ( https://console.cloud.google.com/debug ) 中的“調試器”，您將能夠瀏覽已部署的文件。 如果您有多個版本，有一個版本下拉菜單可以在它們之間切換，因此請確保您瀏覽的是正確的版本。

是緩存嗎？

如果您沒有另外指定，App 引擎會將靜態資產的緩存時間設置為 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:的順序handlers:重要。 他們按順序檢查。 因此，您的url: /.*規則可能正在捕獲您打算由您的url: /static規則捕獲的所有流量

此外，我認為您的url: /.*處理程序返回 index.html 是錯誤的。 最好有類似url: /index.html返回您的 index.html 並讓其余的只是 404。您可能還有其他錯誤/拼寫錯誤的 url，您現在沒有注意到。

編輯2：

我實際上很驚訝你當前的設置曾經有效，因為在app.yaml的參考中它說：

為了使用靜態處理程序，至少一個處理程序必須包含行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.js

應用程序.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.js和package.json我從 GAE 的“Hello World”示例中復制了它們https://github.com/GoogleCloudPlatform/nodejs-docs-samples/tree/master/appengine/hello-world/standard

應用程序.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;

包.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"
  }
}

根據 hello world 中的說明，我運行npm install並npm start在本地運行它，但不幸的是，這並沒有模擬handlers:的行為handlers:在app.yaml

當我部署它時，轉到https://my_project_id.appspot.com/index.html確實有效。