带有 React 和 Node 的谷歌应用引擎：生产设置

Question

我使用 React.js 和 Node.js+Express 创建一个网站。我使用 Google App Engine 和 Google Datastore 作为数据库。

在我的本地机器上一切正常：React 前端能够访问 Node.js 提供的 API 链接。Node 应用程序能够访问在云上运行的数据存储。在本地机器上，我使用 Proxy 连接 Node 的 8080 端口，以便 React 能够访问 API 链接。来自 package.json 文件： "proxy": "http://localhost:8080/" 来自 React 我使用 URL 进行 API 调用： axios.get('/api/XXX' 我在 Express 中使用 HTTP 服务器。

当我将代码部署到 Google App Engine 时，我不确定我需要做哪些更改以便 React 应用程序能够访问 Node API 链接。我需要在 Prod 中使用代理吗？如何从 App Engine 获取 SSL 密钥和证书以放入 Express？我应该立即切换到使用 HTTPS 还是我仍然可以使用 HTTP 直到我调整其余的构建块以协同工作？

当我尝试访问以下链接时： axios.get('https://my_custom_domain/api/XXX'

那么我的 React 应用程序无法访问任何 API 链接。在 Chrome 控制台中，我看到 React 返回 404 错误。

我使用自定义域，我看到 Google App Engine 显示我的域 SSL 安全性是“Google 管理的，自动更新”。在 Node 中，我使用 HTTP 服务器。我想改用 HTTPS，但我不明白如何从 App Engine 控制台获取私钥和​​证书以放入 Express 应用程序。

有没有办法从 App Engine 控制台获取证书和私钥？或者我应该从其他方/公司购买新的 SSL 证书并在我的 Express 应用程序中使用它并将其上传到 App Engine 中？

这是我的 yaml 文件：（server.js 是我的 Node 应用程序）

runtime: nodejs8 handlers: - url: / static_files: build/index.html upload: build/index.html - url: / static_dir: build - url: /api/* script: server.js

404 错误与 HTTPS 相关。所以我也从 HTTP 切换到 HTTPS 服务器。但是，我必须在没有凭据的情况下启动 HTTPS 服务器，因为 Google App Engine 不允许我查看这些凭据。这是我所做的： var httpsServer = https.createServer(/*credentials,*/ app);

但是，我仍然有 404 错误：

> 加载https://www.XXXXX.XXX/api/v1/list失败：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问源“ https://XXXXXXXXX.appspot.com ”。响应具有 HTTP 状态代码 404。

>

我使用了 CORS 库 var cors = require('cors'); app.use(cors());

然而，它仍然没有帮助，我得到了交叉原点错误。

我还尝试在 App.Yaml 中引入以下行： http_headers: Access-Control-Allow-Origin: https://xxxxxx.appspot.com 然而，当我尝试部署代码时，gcloud app deploy gcloud 不喜欢这个标头，即使它来自其官方文档:) 我认为因为 API 被认为是动态的处理程序，因此我无法向其中添加 http_headers。gcloud 控制台的错误是：解析文件时出错：[/xxxxxx/app.yaml] 映射类型脚本的意外属性“http_headers”。在“/Users/xxxxxx/app.yaml”中

所以我不确定如何解决跨域问题。

（我觉得奇怪的是没有网站解释如何在 PROD 中为 Google 应用引擎设置 React + Node/Express。这是一个非常典型的架构）

Answer 1

如果您使用带有Google 管理的 SSL 证书的自定义域，您应该能够自动向您的生产应用程序发出 HTTPS 请求，而无需自己处理任何 SSL 密钥。鉴于您在日志中看到 404，看起来请求已正常到达您的应用程序，但未路由到所需的处理程序代码。

您的app.yaml配置存在一些问题：

1.对于Node.js的App Engine环境，为唯一有效的值script的下一个项目的关键handlers的关键app.yaml文件auto（见本文档）。此外，script密钥是可选的。

2. - url: /api/*应- url: /api/.*参见同一文档中的url密钥部分。

3.由于App Engine的尝试来匹配条目传入的请求中handlers，从第一个到最后，由于条目与static_dir将匹配任何请求与开始的值url（见同样的文档：“以该前缀由该被处理开头的所有网址处理程序，使用前缀之后的 URL 部分作为文件路径的一部分”），例如，请求/api/v1/list将匹配此处理程序：

- url: /
  static_dir: build

因此，App Engine 将尝试build/api/v1/list在应用程序代码中提供一个静态文件，但没有找到此类文件，并返回一个404. 您应该重新排序处理程序，以便以 开头的请求首先/api找到 API 处理程序。

试试这个更新app.yaml：

runtime: nodejs8
handlers:
- url: /api/.*
  script: auto
- url: /
  static_files: build/index.html
  upload: build/index.html
- url: /
  static_dir: build