如何将 graphql Api 连接到 Ec2 上托管的 nginx 上的前端应用程序答案

【问题标题】：how to connect graphql Api to front End apps on nginx hosted on Ec2如何将 graphql Api 连接到 Ec2 上托管的 nginx 上的前端应用程序
【发布时间】：2020-08-24 16:20:50
【问题描述】：

我有一个由三个项目组成的应用程序，结构如下：

主应用 ->/包

    ->/admindashboard
    ->/shopapp
    ->/api

我想在 Ec2 实例上部署项目（我不是管理员），所以我构建了 admindashboard 和 shopapp： yarn build
添加 Nginx 并像这样配置 /nginx/sites-available/default 文件：

server {
   listen 80 default_server;
   server_name localhost;
   location / {
         root /var/www/mainapp/packages/shopapp/out;
         index index.html index.htm;
   }
}

#running admin-Dashboard
server {
   listen 3000 default_server;
   server_name localhost;
   location / {
         root /var/www/mainapp/packages/admindashboard/build;
         index index.html index.htm;
   }
}

-这使前两个应用程序可以工作，但我无法链接 api。当我运行yarn dev:api-shop or yarn dev:api-admin 它显示它正在端口 4000 上运行，但前端应用程序无法获取数据，它无法获取或发布到 api。

部署此类项目的正确方法是什么？

项目技术是：

管理仪表板： -CRA -阿波罗 -BaseUI -打字稿 -React Hook 表单

商店： -NextJs -阿波罗 -打字稿 -风格化的组件 -条纹整合 -Formik

API： -类型 GraphQL - 类型 ORM

谢谢，如果我的解释不清楚，请见谅。

【问题讨论】：

您能否粘贴您的 UI 应用尝试从 API 获取数据的方式？

标签： node.js reactjs nginx graphql next.js

【解决方案1】：

我解决了这个问题，实际上在 .env 文件的管理项目中，API URL 是：

http://localhost:4000/admin/graphql

我不得不像这样将 localhost 更改为实例的 IP 地址：

（示例）

http://15.xxx.xx.xxx:4000/admin/graphql

它有效，但有两个 API（一个用于商店，一个用于 adminDashboard）我必须在 4000 端口上运行一个，在 4001 上运行另一个，现在它可以工作，但我仍然想知道这是否是部署此类应用程序的正确方法。谢谢大家

【讨论】：