在每个项目的生命周期中，都需要在生产环境上发布新功能，即使新版本更新并不那么明显。

大多数Web应用程序都使用某些API来完成更新，但是它们通常托管在不同的服务器上。这种情况下，作为开发人员就需要解决跨源资源共享(CORS)问题。所以通常的做法是建立一个后端。

不过，优秀的开发人员应该保持应用程序的简单性，并去除所有多余的部分。在本文中，我将展示如何准备React应用程序，以便将它们部署到生产环境中。

我可以做一个微不足道的React示例应用，但它的帮助意义不是很大。因此，我决定将我的应用程序与联邦储备银行提供的一个API连接。API需要一个访问键来检索数据，并且端点受到了跨域请求的保护，所以没有外部web应用程序能够直接使用数据。

这里需要注意的是，如果您的应用程序依赖服务器端呈现，那本次教程并不是正确的部署策略，虽然你可以得到一些思路上的启发，但仍需要后端的支持。

前提条件

在按照本文操作之前，掌握一些创建React应用程序和Docker的基本知识是至关重要的。

React APP 示例

我用create-react-app创建了一个简单的网络应用程序。该应用程序唯一的功能是显示一个代表美国GDP的折线图。

该应用程序仅从以下API获取数据：

参数：

• series_id：序列ID。GDPCA代表“实际GDP”。
• frequency：数据汇总，a代表年度。
• observation_start：观察期的开始。
• observation_end：观察期的结束。
• file_type：数据格式。默认*xml*。
• api_key：从此API检索任何数据所需的访问密钥。

生活并不总是完美的，API设计也不理想。它要求开发人员将访问键和预期的数据输出作为URL参数传递。将输出作为参数传递对我们来说不是问题，但泄漏API密钥的风险却是个问题。

即使抛开密钥泄漏的风险，在跨域请求保护下从外部调用FRED API，也会收到错误。

许多开发人员会建议构建中间件(后端)来代理API请求并过滤敏感数据。在某种程度上，这是一个有效的方法。但我更喜欢以一种更YAGNI的方式构建我的应用程序，不过，我们本次的示例将不需要构建。

让我们使用Nginx

我是NGINX的忠实拥护者，因为它带来了简单性。Nginx拥有准备生产级Web服务器所需的全部功能，比如HTTP2、压缩、TLS和许多其他的。最重要的是，我们可以通过定义几行配置来实现。像下面的代码片段:

上面这4行是我隐藏API键和抑制CORS错误所需要的全部关键代码。也就是从现在开始，所有对API的HTTP请求都将被代理到FRED api，而且只有我们的应用程序才能使用该API。所有外部请求都将面临CORS错误。

这就是我们的端点的样子：

我们既不需要传递api_key参数也不需要传递file_type参数来检索数据。也没有人可以从URL中读取访问密钥，因为它是安全的。

Docker喜欢Nginx

在云中运行NGINX最方便的方法就是使用Docker。

接下来我们只需要创建一个包含以下内容的Dockerfile：

现在，只需要三个步骤就可以运行FRED APP：

• 构建React应用程序。这个过程生成包含静态文件的build/目录。
• 构建Docker映像。将创建一个可运行的Docker映像。
• 发布Docker镜像到某个存储库或在本地机器上运行它。

接下来，让我们尝试在我们的机器上运行它。

8081是一个端口号。这意味着该应用程序将在以下URL: http://localhost:8081下可用。

在浏览器中打开这个URL后，你应该会在终端中看到这样的日志：

请注意日志中的两个200，因为它们代表HTTP状态OK。如果你在API请求旁边看到的是一个400，这意味着你的API密钥有问题。

总结

如果你的项目还没开始，那你可能还没部署过APP。但未雨绸缪是件好事，因为迟早有一天你会用到的。

【原文地址】：https://developer.51cto.com/art/202103/654465.htm