在 Google App Engine 上部署反应应用程序：app.yaml 路径问题

Question

我尝试在 google 应用引擎上运行 react 应用，但 app.yaml 配置存在一些问题。如果 url 路径为 https://example.com/path，则 react 应用程序正在运行。但是也有一些路由，比如https://example.com/path/subpath，不起作用。

问题是 react 应用程序尝试使用以下路径获取 .js 和 .css 文件：

• https://example.com/path/static/js/file.js
• https://example.com/path/static/css/file.css

但它必须是：

• https://example.com/static/js/file.js
• https://example.com/static/css/file.css

结尾/路径也不起作用：https://example.com/path/

我的 app.yaml：

service: react-app
runtime: nodejs12
handlers:
  - url: /static/js/(.*)
    static_files: build/static/js/\1
    upload: build/static/js/(.*)
  - url: /static/css/(.*)
    static_files: build/static/css/\1
    upload: build/static/css/(.*)
  - url: /static/media/(.*)
    static_files: build/static/media/\1
    upload: build/static/media/(.*)
  - url: /(.*\.(json|ico))$
    static_files: build/\1
    upload: build/.*\.(json|ico)$
  - url: /
    static_files: build/index.html
    upload: build/index.html
  - url: /.*
    static_files: build/index.html
    upload: build/index.html

我的文件夹结构是：

build/
- static/
-- css/
-- js/
-- media/
- index.html
app.yaml

也许有人对我有同样的问题或解决方案。 谢谢！

Answer 1

我了解到您在部署 App Engine 应用程序时遇到问题，即当您尝试获取 .js 和 .css 文件时，您的应用程序在错误的路径中搜索它们。

official documentation 介绍了如何使用 NodeJS 为 App Engine 管理和提供静态文件，您可以尝试遵循文档中关于如何构建 app.yaml 文件以正确获取静态文件的指南。

我还发现了一个 guide（尽管它使用 Python 作为运行时），它显示了类似的项目结构以及如何构建 app.yaml 的示例。

我认为您的 app.yaml 文件获取 URL 的方式可能是问题所在，尽管子路径的整体处理程序结构也应该修改。