快出海  > AWS  >  如何使用NGINX在AWS上部署React?

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

来源:Hacker Noon
作者:Matt Sokola
时间:2021-04-01

pexels-photo-546819.webp.jpg

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

大多数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。但未雨绸缪是件好事,因为迟早有一天你会用到的。

原标题:How To Deploy React on AWS using NGINX

立即登录,阅读全文
AWS
版权说明

本文内容来自于Hacker Noon,本站不拥有所有权,不承担相关法律责任。文章内容系作者个人观点,不代表快出海对观点赞同或支持。如有侵权,请联系管理员(hj@kchuhai.com)删除!

相关文章
亚马逊搅动云计算“一池春水”,阿里云、华为云还睡的安稳吗?
亚马逊搅动云计算“一池春水”,阿里云、华为云还睡的安稳吗?
当阿里云、华为云、百度云等一众本土厂商坚定地认为,中国的云计算市场早已是囊中之物时,亚马逊云科技的突然杀入,让一切又变得扑朔迷离起来。
科技云报道
2021-04-03
AWS网页应用程序防火墙现可辨识并阻挡机器人流量
AWS网页应用程序防火墙现可辨识并阻挡机器人流量
AWS在其网页应用程序防火墙(WAF)添加功能,让用户能够轻易地阻绝,像是爬虫等不必要的请求流量。
科技社techpub
2021-04-03
AWS现提供EC2串行控制台,可用于排除执行实例启动与网络故障
AWS现提供EC2串行控制台,可用于排除执行实例启动与网络故障
AWS推出EC2串行控制台,这是一种通过创建与EC2执行实例的串行连接,让用户解决执行实例启动和网络连接的安全方法。用户可以通过EC2控制台或是AWS CLI来取用EC2串行控制台。
十轮网
2021-04-03
云端弹性计算的下一步是什么?
云端弹性计算的下一步是什么?
2021年初,亚马逊云科技正式在中国市场落地了基于自研的云原生处理器Amazon Graviton2三类计算实例,这些实例的落地进一步为中国用户提供了更加多样的计算实例选择,同时也将更具性能和价格优势的计算资源带到了中国市场。
陈毅东
2021-04-02
亚马逊云科技 x 外研在线 | 将科技融入教育,用AI点亮数字化创新!
亚马逊云科技 x 外研在线 | 将科技融入教育,用AI点亮数字化创新!
3月31日,亚马逊云科技同近40位教育行业的高管一起走进外研在线,就应用架构现代化和AI助力企业数字化创新话题进行了深入交流与探讨。在热情的氛围里与会嘉宾们互相分享洞见、倾听疑惑、讨论问题、碰撞想法,对云计算未来进一步促进企业发展和产业变革满怀信心。
亚马逊云科技
2021-04-02
扫描关注获取更多 AWS 的相关信息
服务商推荐 更多 >
百度国际MediaGo
百度国际MediaGo
百度国际是百度极具战略意义的海外业务发展部门,拥有超过10年的出海经验。旗下出海营销平台MediaGo旨在为全球广告主提供营销整合方案。成立以来,MediaGo不断进化,在磨炼一站式海外营销服务能力的同时,连接Snapchat、Pinterest、Reddit等优质海外平台,成为连接广告主与价值洼地的桥梁。
本地化变现推广
北京易掌云峰科技有限公司
环信即时通讯云
环信,国内领先的即时通讯、在线客服、智能客服机器人提供商。
云服务
iGlobe Advisory Inc.
爱个萝卜本地化 iGlobe
爱个萝卜总部位于加拿大温哥华,为游戏出海提供所有主要语言的母语级本地化翻译,并由专业项目经理为您保驾护航。并可向全球游戏伙伴提供全方位服务,包括目标市场开拓策略,以及各国本地化运营项目监督。
本地化
厦门比朋科技股份有限公司
比朋科技股份
云服务,软件服务,定制开发
云服务外包源码
北京云中融信网络科技有限公司
融云
融云为全球开发者和企业提供 IM即时通讯和实时音视频通信云服务,独立的海外数据中心,全球 30 万+应用的通信选择。一套 SDK 解决所有通信场景,快速集成,1天实现跨国互动,实时沟通,助力应用出海
云服务
深圳哈希信息技术有限公司
哈希信息
深圳哈希信息技术有限公司成立于2018年,是国内领先的智能网络服务提供商,基于软件定义网络、下一代网络协议、大数据等技术研发面向不同行业领域的产品和解决方案,秉着“专业、创新、信任、分享“的核心价值观,致力为客户提供一个高效可靠的流量云平台。公司对外提供分发云(CDN)、加速云(动态加速)、安全云(防DDOS&云WAF)、流量云(广告交易)、边缘云、短信云等多个云产品,帮助游戏/资讯等互联网公司构建、加速和更好的保护核心业务。
云服务变现
扫码登录
打开扫一扫, 关注公众号后即可登录/注册
加载中
二维码已失效 请重试
刷新
账号登录/注册
小程序
公众号
商务合作
投稿采访
出海管家