【问题标题】:My react frontend is not changing when I deploy to Google App Engine当我部署到 Google App Engine 时,我的反应前端没有改变
【发布时间】:2020-10-10 00:40:52
【问题描述】:

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

当我部署它时,它不会更新前端。我认为每当我部署时静态文件都不会改变。是缓存吗?我不知道该怎么办

【问题讨论】:

    标签: reactjs google-app-engine google-cloud-platform hosting app.yaml


    【解决方案1】:

    首先,您是否部署到新版本而不是向其迁移流量?在 GCP 控制台中,您可以转到“App Engine”>“版本”(https://console.cloud.google.com/appengine/versions)查看您当前部署的版本,它会告诉您哪个版本正在接收流量。

    接下来,确保您的文件已实际部署。如果您转到 GCP 控制台 (https://console.cloud.google.com/debug) 中的“调试器”,您将能够浏览已部署的文件。如果您有多个版本,则有一个版本下拉菜单可以在它们之间切换,因此请确保您浏览的是正确的版本。

    是缓存吗?

    如果您未另行指定,应用引擎会将静态资产的缓存期限设置为 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。您可能还有其他您现在没有注意到的错误/错字网址。

    编辑 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.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 在本地运行它,按照 hello world 中的说明,但不幸的是,这并不能模拟 handlers:app.yaml 中的行为

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

    【讨论】:

    • 我添加了 url: /index.html 现在当我部署我得到 502 错误 bad gateway nginx 并且即使我回到我的旧 app.yaml 也不会消失,任何知道为什么?
    • 请参阅我的回答中的“编辑 2”。我认为你需要包含一个基本的app.js 并有一个包罗万象的处理程序路由。
    猜你喜欢
    • 2011-07-28
    • 2015-02-19
    • 2015-11-13
    • 2020-09-24
    • 2018-12-16
    • 2017-09-04
    • 1970-01-01
    相关资源
    最近更新 更多