获取React以与生产中不同EC2实例上的后端API服务器对话

提问者：小点点

获取React以与生产中不同EC2实例上的后端API服务器对话

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

1个EC2(API_BACK_END)实例用作API后端服务器，NODE Express js与RDS对话

我正在用NodeJS部署React前端（使用create-react-app）的1个EC2实例，我正在开发模式下运行它（我还没有构建build文件夹），我可以确认我能够使用以下hack命中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运行构建时，我对我需要做什么改变感到困惑，我从过去的几天里读了很多文章，但我不确定需要做什么。

这就是我如何调用我的endpoint

    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-中间件，但这仅适用于开发环境。

共1个答案

匿名用户

在后端应用程序或api（Java，nodejs，php，python等）中，最好使用硬编码在属性文件中的环境变量，因为我们只能为所有环境（开发，阶段，生产）生成一个工件。在它开始之前，我们只需要导出所需的变量，仅此而已。

但是在现代应用程序中会发生什么:前端渲染框架，spa，用react，angular，vue等开发的javascript应用程序？

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

因此，如果您的react应用程序（javascript）需要经典的api url来交换信息，那么在javascript的任何部分都需要一个变量。检查这个可以了解如何在javascript应用程序中注入变量。

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

Apache
nginx
IIS
Tomcat
widfly
基本nodejs静态服务器:https://github.com/jrichardsz/nodejs-statist-pages
无Web ftp服务器
或任何能够发布静态文件的服务:index.html，css，bundle.js

在构建过程之前，只需在一些javascript文件（如constants.js，setting.js，configuration.js等）中将localhost:3000更改为acme.api.com

优点:不需要外部工具而需要简单工具
缺点:
- 由于构建过程中需要人工，DevOps已中断
- 将需要在您的任何环境（开发，测试，分段，生产等）之前重复此过程
- 任何环境都需要新的构建过程:开发，测试，分段，生产等
将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"
}
```
或者使用这些文件的名称和一些var，如node_environment。检查这些链接以查看更多示例:
>
如何在package.json内设置环境变量
https://medium.com/@arrayknight/how-to-use-env-variables-in-package-json-509b9b663867
https://dev.to/rishikeshvedpathak/react-environment-specific-builds-using-env-with-cra-and-env-cmd-296b
优点:
- 与#1方法优点相同
- 变量不再存在于javascript代码中
- 您不需要人工在生成过程之前准备配置文件。
缺点:
- 与#1方法缺点相同
- 如果这些配置在源代码存储库中，则任何有权访问该配置的人都可以查看生产环境的某些敏感信息。
- 如果这些配置在构建服务器中，我们需要一些具有shell访问权限的人来创建它们。
此方法类似于当前的变通方法。检查这个:https://dev.to/rishikeshvedpathak/react-environment-specific-builds-using-env-with-cra-and-env-cmd-296b
还要检查Angular cli限制:每个环境都需要单独的构建
如果您的javascript应用程序在第一次调用时从某种rest端点获取或检索配置，该怎么办？
- 优点:
  - 容易
  - 为所有环境构建一个版本
  - 打开热重新加载javascript应用程序中配置的可能性。比如:嘿，用户！刷新网站以查看新的季节效果。
  - DevOps过程是快乐的
  - 需要新平台或简单端点。它负责给我们变量
  - 在第一次用户调用时执行此ajax调用需要中间javascript knoledge
  在我的应用程序中，我将/settings调用到此端点。这将返回包含以下几个变量的json响应:
  - API基本URL
  - 主页的某些引用
  - 背景颜色
  - 前端应用程序所需的任何配置参数
  - 等
  看看我的服务器:https://github.com/utec/geofrontend-server。它是根据你的要求设计的。我认为自述文件很好，但如果您需要帮助，请与我联系。作为总结，如果您想将此nodejs服务器用于您的应用程序，步骤将是:
  - 使用环境变量创建一个属性文件
  - 向react app Package.json添加一个依赖项
  - 只运行