【.com快译】在每一个项目的生命周期中，都需要在生产环境上发布新特性，即使新版本更新不是那么明显。大多数Web应用程序使用一些API来完成更新，但它们通常托管在不同的服务器上。在这种情况下，作为开发者，你需要解决跨源资源共享（CORS）问题。所以通常的做法是搭建后端。然而，一个好的开发人员应该保持应用程序简单并删除所有冗余部分。在本文中，我将展示如何准备React应用程序，以便将它们部署到生产环境中。我可以制作一个简单的React示例应用程序，但它不是很有帮助。所以我决定将我的应用程序与联邦储备银行提供的API连接起来。API需要一个访问密钥来检索数据，并且端点受到跨源请求的保护，因此没有外部Web应用程序可以直接使用数据。这里需要注意的是，如果你的应用程序依赖服务端渲染，那么本教程并不是正确的部署策略。虽然在思路上可以得到一些灵感，但还是需要后台的支持。先决条件在阅读本文之前，了解创建React应用程序和Docker的一些基本知识至关重要。ReactAPP示例我使用create-react-app创建了一个简单的Web应用程序。该应用程序的唯一功能是显示代表美国GDP的折线图。该应用程序仅从以下API获取数据：https://api.stlouisfed.org/fred/series/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01&file_type=json&api_key=abcdefghijklmnopqrstuvwxyz123456参数：series_id：序列号。GDPCA代表“实际GDP”。frequency：数据汇总，a代表年份。observation_start：观察期的开始。observation_end：观察期结束。file_type：数据格式。默认*xml*。api_key：从此API检索任何数据所需的访问密钥。生活并不总是完美的，API设计也不尽如人意。它需要开发人员将访问密钥和预期的数据输出作为URL参数传递。将输出作为参数传递对我们来说不是问题，但泄露API密钥的风险是。即使你忽略密钥泄露的风险，在跨域请求的保护下从外部调用FREDAPI，你仍然会收到错误。许多开发人员会建议构建中间件（后端）来代理API请求并过滤敏感数据。在某种程度上，这是一种有效的方法。但我更喜欢以更YAGNI的方式构建我的应用程序，但是，我们这次的示例不需要构建。让我们使用Nginx我是NGINX的忠实粉丝，因为它带来的简单性。Nginx具有准备生产级Web服务器所需的所有功能，例如HTTP2、压缩、TLS等。最重要的是，我们可以通过定义几行配置来完成。就像下面的代码片段：...http{...server{...location/api{set$args$args&&file_type=json&api_key=abcdefghijklmnopqrstuvwxyz123456;proxy_passhttps://api.stlouisfed.org/fred/series;}}上面这4行是我隐藏API密钥和抑制CORS错误所需的所有关键代码。也就是说，从现在开始，所有对API的HTTP请求都将被代理到FREDapi，只有我们的应用程序可以使用该API。所有外部请求都将面临CORS错误。这是我们的端点的样子：/api/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01我们既不需要传递api_key参数也不需要传递file_type参数来检索数据。也没有人可以从URL中读取访问密钥，因为它是安全的。DockerLikeNginx在云中运行NGINX最方便的方法是使用Docker。接下来我们只需要创建一个Dockerfile，内容如下：FROMnginxCOPYcontainer/COPYbuild/usr/share/nginx/html现在，运行FREDAPP只需要三步：构建React应用。此过程生成一个包含静态文件的build/目录。构建Docker映像。将创建可运行的Docker映像。将Docker映像发布到存储库或在本地计算机上运行它。接下来，让我们尝试在我们的机器上运行它。$yarninstall$yarnbuild$dockerbuild-tmsokola/fred-app:latest.$dockerrun-p8081:80-itmsokola/fred-app:latest8081是端口号。这意味着该应用程序将在以下URL下可用：http://localhost:8081。在浏览器中打开此URL后，您应该会在终端中看到如下日志：0.0.0.1--[11/Mar/2021:18:57:50+0000]"GET/HTTP/1.1"2001556"-"“Mozilla/5.0（Macintosh；IntelMacOSX11_2_0）AppleWebKit/537.36（KHTML，如Gecko）Chrome/88.0.4324.192Safari/537.36”“-”...0.0.0.1--[11/Mar/2021:18:57:51+0000]"GET/api/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01HTTP/1.1"200404"http://localhost:8081/""Mozilla/5.0（Macintosh；IntelMacOSX11_2_0）AppleWebKit/537.36（KHTML，如Gecko）Chrome/88.0.4324.192Safari/537.36""-"请注意日志中的两个200，因为它们表示HTTP状态正常。如果您在API请求旁边看到400，则表示您的API密钥有问题。总结如果您的项目还没有开始，您可能还没有部署应用程序。但提前计划是件好事，因为迟早你会需要它。【翻译稿件，合作网站转载请注明原译者和出处.com】
