node.js - Google App Engine,index.html 在 Express/React 应用程序中部署后缓存

标签 node.js reactjs express google-app-engine create-react-app

我有一个部署到 Google App Engine 的 Nodejs10 应用程序。如果用户之前在 Chrome 中使用过该应用程序,则重新部署该应用程序后该应用程序将无法运行。该应用程序是使用 create-react-app 创建的,并使用 webpack 构建的,因此 css 和 js 在构建时被重命名,但引用这些文件的 index.html 却没有重命名。因此,当用户在部署后访问该站点时,它将获取引用不再存在的 js/css 文件的缓存 index.html。这反过来又导致Uncaught syntax error: unexpected token '<'

我发现让应用程序再次运行的唯一方法是打开检查器、禁用缓存并重新加载页面。不用说,这不是您可以要求最终用户做的事情。

我已经为此寻找了解决方案,发现了类似的问题,但不完全相同,或者如果它们相同,则没有可用的解决方案。

快速代码以 res.sendFile 服务于 index.html当未向现有静态文件发出请求以使 React 路由器正常工作时:

app.get('*', (req,res) =>{
    try {
        res.sendFile(path.join(public+'/index.html'))
    } catch(e) {
        res.status(404).send()
    }
});

问题是我最近将该应用程序从个人谷歌云帐户移动到了我的企业帐户,而且我以前从未遇到过这个问题。因此,要么是我更改了某些内容导致出现这种情况,要么是 App Engine 发生了更改。

响应 header (响应代码 304)如下所示:

Accept-Ranges: bytes
Cache-Control: public, max-age=0
Content-Encoding: gzip
Content-Length: 1200
Content-Type: text/html; charset=UTF-8
Date: Thu, 03 Sep 2020 20:43:51 GMT
ETag: W/"967-49773873e8"
Last-Modified: Tue, 01 Jan 1980 00:00:01 GMT
Server: Google Frontend
Vary: Accept-Encoding
X-Cloud-Trace-Context: 7f98678c2ba7dc90ad204b67bec766df;o=1
X-Powered-By: Express

正如您所看到的,文件上的“最后修改”日期是 1980 年 1 月 1 日。我已经验证该文件实际上在应用引擎上具有最后修改日期。但在部署的本地构建文件夹中,该文件具有当前日期。不知道这是否是导致问题的原因。

所以我有点迷失了。我想我可以破解“最后修改的” header ,但这感觉不像是一个好的解决方案。而且我还担心其他文件上可能会发生相同的行为,从而导致类似的问题。还有其他人遇到这个问题并提出解决方案吗?

最佳答案

我对奇怪的时间戳有完全相同的问题。

事实证明这是设计行为,因为应用程序引擎在部署时将所有时间戳设置为零。请参阅:https://issuetracker.google.com/issues/168399701

我用这样的表达方式解决了这个问题:

app.use("/", express.static(root, { etag: false, lastModified: false }));

或者对于单个文件:

app.get("/*", async (req, res) => {
  return res.sendFile("index.html", { root, lastModified: false, etag: false });
});

关于node.js - Google App Engine,index.html 在 Express/React 应用程序中部署后缓存,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63732121/

相关文章:

node.js - npm 无法安装依赖项

json - ReactJS:JSON 文件是从本地主机而不是项目目录获取的

javascript - 从 Javascript 数组导出计算数据

javascript - 将数据从 Quilljs 发送到 Node.js

javascript - 如何从快速渲染的 ejs 网页调用 node.js 函数

node.js - 将 Bunyan 应用于大型 Node 应用程序的推荐方法?

node.js - heroku 服务器上的幽灵博客密码验证失败

node.js - 将中间件应用于 Express 中的路由

javascript - 在react-router-dom中使用条件渲染进行身份验证是否安全

javascript - multer 的唯一目的是将主体对象和文件对象添加到请求对象吗?编辑和保存应该由不同的包来完成吗?