当我部署到 Google App Engine 时,我的 React 前端没有改变

IT技术 reactjs google-app-engine google-cloud-platform hosting app.yaml
2021-05-13 19:29:31

我的 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个回答

首先,您是否正在部署到新版本而不是将流量迁移到它?在 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:事情的顺序他们按顺序检查。因此,您的规则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

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

应用程序.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 installnpm start运行它,但不幸的是,这并不能模拟handlers:inapp.yaml

当我部署它时,转到https://my_project_id.appspot.com/index.html确实有效。