apollo express服务器v2.x.x的应用程序引擎服务静态服务React应用程序



与其说这是一个问题,不如说这更像是一个知识问题。我一直在深入研究GAE的文档、Youtube视频和帖子,了解如何从单个应用程序引擎服务中提供完整的MERN stack应用程序。

老实说,我对App Engine部署在幕后的作用没有深入的了解,但我知道它会从分配的默认路由(即。https://xxxxxxxx.uc.r.appspot.com)。

基于这些知识,我认为完全可以静态地为构建的React应用程序提供服务,并通过/graphql端点处理来自同一应用程序的传入查询。

例如:

  1. 这解决了CORS,因为所有东西都有相同的原点
  2. 您将自己限制在一个应用程序引擎服务内,该服务允许您继续使用免费层服务:(

这是我的项目结构:

root/
app/
node_modules/
build/ <----- React app built
src/
App.js
index.js
...
server/ <----- In here is the Apollo Express Server v2.x.x serving app/build generated above^
index.js
package.json
node_modules/
app.yaml <---- This file tells App Engine what to do and which routes to expose
...

我的应用程序

runtime: nodejs12
env_variables:
PORT: 4000
handlers:
- url: /
static_files: app/build/index.html
upload: app/build/index.html
- url: /
static_dir: app/build
- url: /graphql
script: auto <---- Supposedly App Engine is smart enough to understand what to do with this route.

我只是无法从served to React应用程序查询回我的应用程序引擎服务。

有人知道我正在做的事情是否可能,或者根本没有办法用Apollo Server配置App Engine来同时为静态Web应用程序+公开/graphql端点。

非常欢迎任何建议或想法!

---------------------------------更新-------------------------------

GAEfan建议之后,我更新了app.yaml文件:

是的,好吧!我认为这确实有效,我只是在控制台上仍然收到一些关于resources not found的错误,所以,以下是build/的内部结构

build/
static/
css/
js/
asset-manifest.json
favicon.ico
index.html
logo192.png
manifest.json
robots.txt
service-worker.js

我已经以相同的方式向这个建议添加了json|txt|map|ico资源。

- url: /(.*.(gif|png|jpg|css|js|json|txt|map|ico))$
static_files: app/build/1
upload: app/build/.*.(gif|png|jpg|css|js|json|txt|map|ico)$

这解决了找不到资源的问题。您的通配符已经解析了/graphql端点。出于某种原因,WebSocket握手没有正确建立,但我不确定这是来自App Engine的直接限制,还是默认情况下阻止了协议。

有人知道应用程序引擎上的Websockets吗?

还有更多问题,但我将把它作为部分/临时答案添加。。。

app.yaml中的前两个url处理程序是重复的。URL处理与第一个匹配,并将所有内容发送到...index.html。我假设您在构建目录中有一些jscss或其他静态文件。这些将永远不会提供给浏览器。因此,您需要使用更好的regex路由,带有通配符等。

让我们一次做一个:

handlers:
- url: /$  # this '$' ends the match, so the url matches only the root domain
static_files: app/build/index.html
upload: app/build/index.html

接下来,让我们测试.js.css等:

- url: /(.*.(gif|png|jpg|css|js))$
static_files: app/build/1
upload: app/build/.*.(gif|png|jpg|css|js)$

然后(假设graphql工作正常,则可以将所有其他请求发送到那里:

- url: /graphql
script: auto

甚至:

- url: /(.*) # catches everything else!
script: auto

显示/build目录中的文件或目录树,我们可以确保我们已经说明了所有内容。

相关内容

最新更新