如何使用Nginx在AWS上部署React?

米米素材网

本文将帮你实现在生产环境上部署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获取数据:

  1. 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和许多其他的。最重要的是,我们可以通过定义几行配置来实现。像下面的代码片段:

  1. ... 
  2.  
  3. http { 
  4. ... 
  5.  
  6. server { 
  7. ... 
  8.  
  9. location /api { 
  10. set $args $args&&file_type=json&api_key=abcdefghijklmnopqrstuvwxyz123456
  11. proxy_pass https://api.stlouisfed.org/fred/series; 

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

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

  1. /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:

  1. FROM nginx 
  2.  
  3. COPY container / 
  4. COPY build /usr/share/nginx/html 

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

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

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

  1. $ yarn install 
  2. $ yarn build 
  3. $ docker build -t msokola/fred-app:latest . 
  4. $ docker run -p 8081:80 -it msokola/fred-app:latest 

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

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

  1. 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" "-" 
  2. ... 
  3. 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