CSS 文件在部署时未更新（Google AppEngine）

Posted 2023-02-24

【中文标题】CSS 文件在部署时未更新（Google AppEngine）

【英文标题】：CSS File Not Updating on Deploy (Google AppEngine)

【发布时间】：2011-02-16 12:08:46

【问题描述】：

我推送了我的网站的新版本，但现在 CSS 和静态图像没有正确部署。

这里是乱七八糟的页面：http://www.gaiagps.com

Appengine 显示最新版本是正确的：http://1.latest.gaiagps.appspot.com/

有什么帮助吗？

【参考方案1】：

你的链接在我看来不错，除非我遗漏了什么。

您可能已经缓存了旧 CSS，但在更新后没有获得新的 CSS。尝试清除浏览器缓存，看看是否有效。

转到 1.latest 会下载新的 CSS，因为它不在您的缓存中，所以它对您显示正确。

【讨论】：

菜单底部的菜单不水平或不够大，幻灯片中的图像有误。我也尝试过刷新缓存并从其他浏览器加载。

您链接的两个站点在 Firefox 和 Chrome for OS X 上看起来完全一样。我怀疑仍有一些问题只会影响您或您的浏览器，除非其他人可以验证它看起来不同。

尝试使用 + 强制重新加载您的页面（至少在 FF 中）。这里一切似乎都很好，菜单和幻灯片图像。祝你好运。

问题出在服务器端缓存上。 App Engine 很奇怪。

【参考方案2】：

我以前在 App Engine 上看到过这种情况，即使使用像 /stylesheets/default.css? App.Version 这样的缓存清除查询参数也是如此。

这是我的（未经证实的）理论：

您通过将新版本部署或更改为default 来推送新版本。 虽然此更新正在传播到运行您的应用的所有 GAE 实例... ...有人访问了您的网站。 静态资源default.css App.Version 的请求被发送到 Google 的 CDN，它还没有它。 Google 的 CDN 在为所有实例完成第 2 步的传播之前向 GAE 请求资源。 如果运气不好，GAE 会从运行旧版本的实例中提供资源... ...现在作为权威的“新”版本缓存在 Google 的 CDN 中。

当这种情况（如果发生这种情况）发生时，我可以确认，再多的缓存破坏浏览器工作也无济于事。 Google CDN 服务器保存了错误的版本。

修复：我发现解决此问题的唯一方法是部署另一个版本。您不会冒再次发生这种情况的风险（如果您在竞态条件后没有进行任何 CSS 更改），因为即使发生竞态条件，您的第一次更新也可能在您部署第二次时完成，所以无论如何，所有实例都将提供正确的版本。

【讨论】：

我会买这个......虽然我不确定它是否正确。它最终在数小时后自行清理。

我面临同样的问题。就我而言，即使在我离开它过夜之后，也没有提供新的 CSS。我要试试缓存爆破技术

我现在遇到了。我已经部署了很多次，但它一直在为过时的静态文件提供服务。但是，如果我引用应用程序的版本（例如 alpha5.latest.xxx.appspot.com），则会提供正确的文件。

@mainsocial 您是否在 URL 的末尾附加了诸如“foo.css? App.version ”之类的缓存清除查询字符串？

我遇到过几次这个问题。无论出于何种原因，这是固定的。我认为这与来自谷歌实例网络主机的上游缓存有关。如果您看到问题并使用查询字符串直接在浏览器中请求 css 文件，那么问题就会消失。看起来缓存在第一次使用静态文件的唯一 url 发出请求时无效。

【参考方案3】：

以下对我有用。

从静态域提供您的 css 文件。这是由 GAE 自动创建的。

//static.your-app-id.appspot.com/css-file-path

部署您的应用程序。此时您的应用将被破坏。

更改css文件的版本

//static.your-app-id.appspot.com/css-file-path?v=version-Name

再次部署。

每次更改 css 文件时。您将不得不重复 2,3 和 4。

【参考方案4】：

尝试清除浏览器上的缓存。有完全相同的问题，只需清除缓存即可解决。

【参考方案5】：

我也有这个问题。我在 GAE 中使用烧瓶，所以我的app.yaml 中没有静态处理程序。当我添加它时，部署工作。尝试添加类似的内容

handlers:
- url: /static
  static_dir: static

到您的app.yaml 并再次部署。它对我有用。显然，Google 正在尝试通过不更新它认为用户看不到的文件来进行优化。

【参考方案6】：

这对我有用：

首先，我更改了 app.yaml 上的版本。

然后按照以下步骤操作

转到您的控制台 -> 单击您的项目。

在侧边菜单上，点击Computation -> Versions：

那里会有所有版本，哪个版本是默认的。我的设置为旧版本。

标记新版本。

对我来说工作。有什么顾虑吗？

【参考方案7】：

来自 Pyhton 标准环境的文档：static_cache_expiration。

在一个给定的过期时间传输文件后，有 通常没有办法从中间缓存中清除它，即使 用户清除自己的浏览器缓存。重新部署新版本的 应用程序不会重置任何缓存。因此，如果您打算修改 静态文件，它应该有一个短的（少于一小时）到期 时间。在大多数情况下，默认的 10 分钟到期时间是 合适。

【参考方案8】：

shoresh 发现，Pyhton 标准环境的文档指出，static cache expiration、单个元素 expiration 和***元素 default_expiration 的设置都负责用于定义“将在Cache-Control 和Expires HTTP 响应标头中发送的到期时间”。这意味着“文件可能会被用户的浏览器以及中间缓存代理服务器（例如 Internet 服务提供商）缓存”。

这里的问题是“重新部署应用程序的新版本将不会重置任何缓存”。因此，如果将default_expiration 设置为例如 15 天，但对 CSS 或 JS 文件进行了更改并重新部署应用程序，则无法保证这些文件会由于活动缓存而自动提供服务，尤其是由于到中间缓存代理服务器，其中可能包括 Google Cloud 服务器 - 似乎是这种情况，因为访问 your-project-name.appspot.com 也会提供过时的文件。

上面链接的相同文档指出“如果您打算修改静态文件，它应该有一个短的（少于一小时）到期时间。在大多数情况下，默认的 10 分钟到期时间是合适的”。这是在设置任何静态缓存到期之前 应该考虑的事情。但是对于像我一样事先不知道所有这些并且已经被这个问题困扰的人，我已经找到了解决方案。

尽管文档声明无法清除这些中间缓存代理，但至少可以删除 Google Cloud 缓存。

为此，请前往您的Google Cloud Console 并打开您的项目。在左侧汉堡菜单下，前往存储 -> 浏览器。您应该在那里找到至少一个 Bucket：your-project-name.appspot.com。在 Lifecycle 列下，单击与 your-project-name.appspot.com 相关的链接。删除任何现有规则，因为它们可能与您现在创建的规则冲突。

通过单击“添加规则”按钮创建新规则。对于对象条件，选择only“Newer version”选项并将其设置为1。不要忘记单击“Continue”按钮。对于该操作，选择“删除”并单击“继续”按钮。保存您的新规则。

这条新创建的规则最多需要 24 小时才能生效，但至少对我的项目来说只需要几分钟。一旦启动并运行，您的应用在 your-project-name.appspot.com 下提供的文件版本将始终是最新部署的，从而解决问题。此外，如果您经常编辑静态文件，则应从 app.yaml 文件中删除 default_expiration 元素，这将有助于避免其他服务器意外缓存。

【讨论】：

这个答案 +1 构成了最终对我有用的解决方案的基础，这里有完整的记录 - ***.com/a/69781887/1205871

【参考方案9】：

对于遇到这些旧问题/答案集的新人，我想提供一个更新的答案。我认为在 2018-19 年，以下信息可能会解决人们遇到的大多数 CSS 更新问题：

确保您的app.yaml 具有以下内容：

 handlers:
   - url: /static
     static_dir: static

运行gcloud app deploy 冷静 10 分钟......然后换班重新加载您的网站

google 也建议使用此方法 (https://cloud.google.com/appengine/docs/standard/python/getting-started/serving-static-files)。

【参考方案10】：

好的，对于看到这个问题的新人，我尝试了缓存爆破方法，似乎已经修复了这里是我为 app.cfg 文件上的 css 导入所做的一个示例，创建一个变量来保存您的 appid 设置app.yaml 文件并将其设置为下面的一个

<link href=" url_for('static', filename='file.css') ?config.APP_ID" rel="stylesheet"> 

同样为 app.yaml 文件添加此配置以确保安全

处理程序：

网址：/静态 static_dir：静态

【参考方案11】：

确保在 dispatch.yaml 文件中的 url 和服务设置的末尾添加通配符。

例子：

dispatch:
  - url: "example.com/*"
    service: default

  - url: "sub.example.com/*"
    service: subexample

【参考方案12】：

如果您使用 2020 GCP App Engine，只需将 default_expiration 添加到您的 app.yaml 文件并将其设置为 1m。

default_expiration: "1m"

更多信息：https://cloud.google.com/appengine/docs/standard/python3/config/appref/#runtime_and_app_elements

【讨论】：

请注意，如果您之前部署了静态文件，App Engine 仍将提供旧文件，即使设置了 default_expiration。解决方法是重命名文件。