让React与生产中其他EC2实例上的后端API服务器对话

编程问答 2022-08-23

问题描述

我正在运行2个AWS EC2实例。

我正在将1个EC2（API_BACK_END）实例用作NODE Express js与RDS对话的API后端服务器

我正在使用NodeJS部署1个EC2实例（使用create-react-app），我正在开发模式下运行它（我还没有构建build文件夹），我可以确认自己能够使用以下技巧击中API_BACK_END 

const BK_END_HOST = process.env.NODE_ENV !== 'development' ? 
              "localhost:3000" : process.env.REACT_APP_BACK_END_HOST_URL ;

我还没有创建构建版本，我只是做了一个npm开始以开发人员模式运行它，我想确保我在AWS上拥有正确的网络设置并且能够后端。

问题是，我在进行npm运行构建时需要做些什么改变感到困惑，过去几天我一直在阅读很多文章，但是我不确定需要做什么。

这就是我呼叫端点的方式

    callApi = async () => {
    console.log("---------------",BK_END_HOST);
    const response = await fetch(BK_END_HOST+'/MLNumbers');
    const body = await response.json();
    if (response.status !== 200) throw Error(body.message);
    const ret = body.melbCases[0].cases;
    console.log(ret);
    return ret;
  };

我也需要在前端表达吗？如果是这样，我将如何从中调用后端，我需要某种方式将api调用代理到我的API_BACK_END服务器，我遇到了http-prox-middleware，但这仅适用于开发环境。

解决方法

在后端应用程序或api（java，nodejs，php，python等）中，最好的做法是在属性文件中使用环境变量 hardcoded ，因为我们只能生成一个工件用于我们所有的环境（开发，登台，生产）。在开始之前，我们只需要导出所需的变量即可。

但是在称为React，Angular，Vue等开发的前端渲染框架，Spa，JavaScript应用程序的现代应用程序中会发生什么呢？

  • react，angular或vue是要在浏览器中加载的javascript框架，而不是像nodejs javascript一样在服务器中加载的
  • 无法从浏览器访问环境变量。 cra framework（react）提供的 process.env 是在此框架深处使用webpack实现的“仿真”。简要概述一下，该框架读取了操作系统变量并创建了可在您的react文件中使用的javascript全局变量（process.env）。选中this
  • 这些应用程序中使用的任何变量都可以通过简单的浏览器检查访问，因为这些变量被硬编码在bundle.js，dist.js或任何称为构建结果的肠道中。因此，无论您进行什么发明，如果您的javascript需要某些变量，该变量都必须存在于浏览器中，以便您的用户可以访问。

因此，如果您的react应用（javascript）需要经典的api网址来交换信息，则您的javascript的任何部分都需要一个变量。选中this，了解如何在JavaScript应用中注入变量。

还请记住，要从基本工具（因为结果只是静态文件：index.html，css，bundle.js等）部署到高级服务器，就可以部署构建的javascript应用程序：

（1）普通初中方法

在构建过程之前，只需将某些javascript文件中的 localhost：3000 更改为 acme.api.com ，例如constants.js，setting.js，配置.js等

  • 优点：简便易行，不需要外部工具
  • 缺点：
    • devops被破坏是因为在构建过程中需要一个人
    • 需要在您的任何环境（开发，测试，登台，生产等）之前重复此过程
    • 您的任何环境都需要新的构建过程：开发，测试，登台，生产等

（2）中等方法

将您的constants.js替换为经典的.properties文件，.env文件或任何类型的文件，在这些文件中，我们设置了当工件从一种环境移至另一种环境时所有更改的变量。

因此，您可以按环境在靠近源代码或在源代码之外（例如构建服务器）使用一个属性文件：

  • src / resources / dev / app.properties或.env.dev
  • src / resources / staging / app.properties或.env.staging
  • src / resources / prodution / app.properties或.env.prodution

最后，您可以使用一些技巧在这些文件之间切换。 package.json示例

"scripts": {
  "build:dev": "export $(cat .env.dev | xargs) && react-scripts build","build:dev": "export $(cat .env.staging | xargs) && react-scripts build","build:dev": "export $(cat .env.dev | prodution) && react-scripts build"
}

或者使用这些文件的名称和一些变量（例如NODE_ENVIRONMENT）播放。检查这些链接以查看更多示例：

此方法类似于您当前的解决方法。检查以下内容：https://dev.to/rishikeshvedpathak/react-environment-specific-builds-using-env-with-cra-and-env-cmd-296b

还要检查Angular cli limitation: Every environment requires a separate build

（3）动态方法

如果您的javascript应用程序在第一次调用时从某种类型的其他端点获取或检索配置怎么办？

  • 优势：
    • 简单
    • 为您的所有环境打造一个建筑
    • 打开在javascript应用中热重载配置的可能性。像这样：嘿，用户！刷新您的网络以查看新的季节效果。
    • 开发过程很开心
  • 缺点：
    • 需要新平台或简单端点。这是负责给我们变量
    • 需要中级javascript知识才能在第一次用户调用时执行此ajax调用

在我的应用程序上，我将此端点称为/ settings。这将返回带有几个变量的json响应：

  • api基本网址
  • 对首页的一些引用
  • 背景色
  • 前端应用程序所需的任何配置参数
  • 等

看一下我的服务器：https://github.com/utec/geofrontend-server。它的设计完全符合您的需求。我认为自述文件很好，但是如果您需要帮助，请与我联系。作为总结，如果您想将此Nodejs服务器用于您的应用程序，步骤将是：

  • 使用环境变量创建一个属性文件
  • 向您的react app package.json添加一个依赖项
  • 快跑
apiapiexpressjavascriptreactjsreactjs