部署到Google App Engine时，我的React前端没有改变 [英] My react frontend is not changing when I deploy to Google App Engine

问题描述

我的App.yaml配置文件是:

My App.yaml configuration file is :

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

当我部署时，它不会更新前端.我认为每次部署时静态文件都不会更改.它在缓存吗?我不知道该怎么办

When I deploy it doesn't update the frontend. I think the static files are not changing whenever I deploy. Is it caching? I don't know what to do

推荐答案

首先，您是否要部署到新版本并且不将流量迁移到该版本?在GCP控制台中，您可以转到"App Engine" > 版本" ( https://console.cloud.google.com/appengine/versions )查看您当前部署的版本，它会告诉您哪个正在接收流量.

First, are you deploying to a new version and not migrating traffic to it? In the GCP console, you can go to "App Engine" > "Versions" (https://console.cloud.google.com/appengine/versions) to see your currently deployed versions and it will tell you which one is receiving traffic.

接下来，请确保您的文件已实际部署.如果您转到调试器"，在GCP控制台( https://console.cloud.google.com/debug )中，您将能够浏览已部署的文件.如果您有多个版本，则会有一个版本下拉列表供您在两个版本之间切换，因此请确保您浏览的版本正确.

Next, make sure your files actually got deployed. If you go to the "Debugger" in the GCP console (https://console.cloud.google.com/debug), you'll be able to browse what files have been deployed. If you have multiple versions, there is a version dropdown to switch between them, so make sure you are browsing the correct version.

它在缓存吗?

如果没有另外指定，App Engine会将静态资产的缓存时间设置为10分钟.

App engine does set the cache period for static assets to 10 minutes if you dont otherwise specify.

default_expiration可选.为应用程序的所有静态文件处理程序设置全局默认缓存周期.您还可以为特定的静态文件处理程序配置缓存持续时间.该值是一串数字和单位，以空格分隔，其中单位可以是d表示天，h表示小时，m表示分钟，s表示秒.例如，"4d 5h"表示将缓存过期时间设置为首次请求文件后的4天5小时.如果省略，则生产服务器将到期时间设置为10分钟.

default_expiration Optional. Sets a global default cache period for all static file handlers for an application. You can also configure a cache duration for specific static file handlers. The value is a string of numbers and units, separated by spaces, where units can be d for days, h for hours, m for minutes, and s for seconds. For example, "4d 5h" sets cache expiration to 4 days and 5 hours after the file is first requested. If omitted, the production server sets the expiration to 10 minutes.

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

此外，handlers:的顺序也很重要.它们按顺序检查.因此，url: /.*的规则可能是捕获url: /static

Also, the order of your handlers: matters. They are checked in order. So your rule for url: /.* is probably capturing all of the traffic you intended to be captured by your rule for url: /static

此外，我认为您所有的url: /.*处理程序返回index.html是一个错误.最好使用类似url: /index.html的方法返回index.html，让其余的仅返回404.您可能还有其他错误/输入错误，而您现在还没有注意到.

Furthermore, I think its a mistake for your catch-all url: /.* handler to return index.html. It'd be better to have something like url: /index.html return your index.html and let the rest just 404. You probably have other errors/typo'd urls that you aren't noticing right now.

实际上，您当前的设置曾经奏效令我感到惊讶，因为在app.yaml的参考中它说:

I'm actually surprised your current setup ever worked, because in the reference for app.yaml it says:

要使用静态处理程序，您的至少一个处理程序必须包含行script: auto或定义entrypoint元素才能成功部署.

In order to use static handlers, at least one of your handlers must contain the line script: auto or define an entrypoint element to deploy successfully.

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

所以我整理了一个示例项目，这是我的项目结构:

So I put together a sample project, this is my project structure:

- 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

• I put url: /static first because url: /(.*\..+)$ was capturing /static/css/bootstrap.css.
• I removed the entry for index.html because url: /(.*\..+)$ was already taking care of it
• i added a final catch-all entry to send all remaining traffic to 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.js和package.json，我从GAE的"Hello World"中复制了它们.此处的示例 https://github.com/GoogleCloudPlatform/nodejs-docs-samples/tree/master/appengine/hello-world/standard

For app.js and package.json i copied them from GAE's "Hello World" example here 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:

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 install和npm start在本地运行，但是不幸的是，这并没有模仿app.yaml中的handlers:行为.

I ran npm install and npm start to run it locally, per the instructions in the hello world, but unfortunately that doesnt emulate the behavior of handlers: in app.yaml

当我部署它时，请转到 https://my_project_id.appspot.com/index.html 起作用了.

when i deployed it, going to https://my_project_id.appspot.com/index.html did work.

这篇关于部署到Google App Engine时，我的React前端没有改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！