将Create-React-App应用程序部署到不同的环境中

时间:2017-12-15 12:33:48

标签: reactjs deployment create-react-app

我有一个我正在处理的应用程序,包括使用CRA编写的前端 - 以及用Java编写的后端。我们希望支持在整个流程中的多个环境中部署它,即:

  • 本地开发机器 - 这很容易。只需运行" npm start"并使用"开发"环境
  • 本地端到端测试 - 这些在Docker中构建一个由前端,后端和数据库组成的基础架构,并根据该测试运行所有测试
  • 开发CI系统
  • QA CI系统
  • 预生产系统
  • 生产系统

我遇到的问题是 - 在无数不同的系统中,前端知道后端位置的最佳方法是什么?我也希望前端可以部署到CDN上,所以如果它可以是具有最小复杂性的静态文件,那将是首选。

到目前为止,我已经完成了前两个工作 - 他们通过使用.env文件并使用硬编码的主机名进行调用。

一旦我进入第三个及以后 - 这是我的下一个工作 - 这就会失败,因为在每个案例中都有一个不同的主机名要调用,但具有相同的输出npm run build开展工作。

我看过以下建议:

  • 对每个选项进行硬编码,并根据big switch语句中的当前浏览器位置确定它。这只会让我感到害怕 - 我不仅要在源代码中维护部署属性,而且生产源会知道内部主机名,这可能会带来安全风险。
  • 使用提供的环境变量运行不同的构建 - 例如REACT_APP_BACKEND=http://localhost:8080/backend npm run build。这样可行,但是进入QA,PreProd和Prod的代码实际上是不同的,可能会使测试无效。
  • 添加另一个单独部署到服务器上并从index.html加载的Javascript文件。这再次意味着不同的测试环境在技术上是不同的代码。
  • 使用DNS技巧,以便主机名在任何地方都相同。那只是一团糟。
  • 从活动的Web服务器提供文件,并以某种方式动态写入URL。这可行,但我们希望Production one可以只是一个简单的CDN来提供静态文件。

那么 - 管理这个的最佳方法是什么?

干杯

0 个答案:

没有答案