与其说这是一个问题,不如说这更像是一个知识问题。我一直在深入研究GAE的文档、Youtube视频和帖子,了解如何从单个应用程序引擎服务中提供完整的MERN stack
应用程序。
老实说,我对App Engine部署在幕后的作用没有深入的了解,但我知道它会从分配的默认路由(即。https://xxxxxxxx.uc.r.appspot.com)。
基于这些知识,我认为完全可以静态地为构建的React应用程序提供服务,并通过/graphql
端点处理来自同一应用程序的传入查询。
例如:
- 这解决了CORS,因为所有东西都有相同的原点
- 您将自己限制在一个应用程序引擎服务内,该服务允许您继续使用免费层服务:(
这是我的项目结构:
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
。我假设您在构建目录中有一些js
、css
或其他静态文件。这些将永远不会提供给浏览器。因此,您需要使用更好的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
目录中的文件或目录树,我们可以确保我们已经说明了所有内容。