本文将帮你实现在生产环境上部署React应用程序。这次将使用Docker和Nginx来保护API密钥和代理请求，以防止跨域资源共享（CORS）违规。
本文将帮你实现在生产环境上部署React应用程序。这次将使用Docker和Nginx来保护API密钥和代理请求，以防止跨域资源共享（CORS）违规。
正文
如何使用Nginx在AWS上部署React？
在每个项目的生命周期中，都需要在生产环境上发布新功能，即使新版本更新并不那么明显。
大多数Web应用程序都使用某些API来完成更新，但是它们通常托管在不同的服务器上。这种情况下，作为开发人员就需要解决跨源资源共享(CORS)问题。所以通常的做法是建立一个后端。
不过，优秀的开发人员应该保持应用程序的简单性，并去除所有多余的部分。在本文中，我将展示如何准备React应用程序，以便将它们部署到生产环境中。
我可以做一个微不足道的React示例应用，但它的帮助意义不是很大。因此，我决定将我的应用程序与联邦储备银行提供的一个API连接。API需要一个访问键来检索数据，并且端点受到了跨域请求的保护，所以没有外部web应用程序能够直接使用数据。
这里需要注意的是，如果您的应用程序依赖服务器端呈现，那本次教程并不是正确的部署策略，虽然你可以得到一些思路上的启发，但仍需要后端的支持。
前提条件
在按照本文操作之前，掌握一些创建React应用程序和Docker的基本知识是至关重要的。
React APP 示例
我用create-react-app创建了一个简单的网络应用程序。该应用程序唯一的功能是显示一个代表美国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：序列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和许多其他的。最重要的是，我们可以通过定义几行配置来实现。像下面的代码片段:
- ...
- http {
- ...
- server {
- ...
- location /api {
- set $args $args&&file_type=json&api_key=abcdefghijklmnopqrstuvwxyz123456;
- proxy_pass https://api.stlouisfed.org/fred/series;
- }
- }
- }
上面这4行是我隐藏API键和抑制CORS错误所需要的全部关键代码。也就是从现在开始，所有对API的HTTP请求都将被代理到FRED api，而且只有我们的应用程序才能使用该API。所有外部请求都将面临CORS错误。
这就是我们的端点的样子：
- /api/observations?series_id=GDPCA&frequency=a&observation_start=1999-04-15&observation_end=2021-01-01
我们既不需要传递api_key参数也不需要传递file_type参数来检索数据。也没有人可以从URL中读取访问密钥，因为它是安全的。
Docker喜欢Nginx
在云中运行NGINX最方便的方法就是使用Docker。
接下来我们只需要创建一个包含以下内容的Dockerfile：
- FROM nginx
- COPY container /
- COPY build /usr/share/nginx/html
现在，只需要三个步骤就可以运行FRED APP：
- 构建React应用程序。这个过程生成包含静态文件的build/目录。
- 构建Docker映像。将创建一个可运行的Docker映像。
- 发布Docker镜像到某个存储库或在本地机器上运行它。
接下来，让我们尝试在我们的机器上运行它。
- $ yarn install
- $ yarn build
- $ docker build -t msokola/fred-app:latest .
- $ docker run -p 8081:80 -it msokola/fred-app:latest
8081是一个端口号。这意味着该应用程序将在以下URL: http://localhost:8081下可用。
在浏览器中打开这个URL后，你应该会在终端中看到这样的日志：
- 0.0.0.1 - - [11/Mar/2021:18:57:50 +0000] "GET / HTTP/1.1" 200 1556 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/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-01 HTTP/1.1" 200 404 "http://localhost:8081/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36" "-"
请注意日志中的两个200，因为它们代表HTTP状态OK。如果你在API请求旁边看到的是一个400，这意味着你的API密钥有问题。
总结
如果你的项目还没开始，那你可能还没部署过APP。但未雨绸缪是件好事，因为迟早有一天你会用到的。
【原文地址】：https://developer.51cto.com/art/202103/654465.htm
发表评论