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

时间：2021-07-22 11:14:40

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

如何使用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; 
  12. } 
  13. } 
  14. } 

上面这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

标签：

相关文章