DZone>Web开发区>如何在2022年部署你的React网站!
如何在2022年部署你的React网站!
不同的React应用根据其情况需要不同的部署设置。在今天的世界里，有大量的托管平台可供选择。
-
Sep. 06, 22 - Web Dev Zone -分析
喜欢 (2)
评论
保存
鸣叫
6.25K浏览次数
加入DZone社区，获得完整的会员体验。
不同的React应用根据其情况需要不同的部署设置。在今天的世界里，有大量的托管平台可供选择。这篇文章将帮助你了解市场和你的要求。
一旦你准备好从开发到部署，这个选择是你接近这个发布日期的一个重要步骤。
选择部署供应商有很多限制因素，比如安全和无服务器。
基本考虑因素
在讨论各种可用的选择之前，让我们首先对你所构建的React或Vue Js应用进行分类，以便我们能够选择平台提供的特定服务。
价格
当然，最大的问题之一是选择选项时的价格。根据应用程序的类别，有许多选项，从免费部署选项开始。
你可以在现有平台上免费部署SPA-s。
服务的数据（出站）
服务器供应商必须为网站的请求提供服务。有一个计算成本以及数据被发送出去。在大多数情况下，入站数据是免费的或有少量费用，而出站数据/GB有相关费用。
不同的层级是基于出站数据的限制。
无服务器
随着边缘功能的无服务器计算的出现，这一功能已经成为选择服务时的一个重要考虑因素。
无服务器功能使整个应用程序具有极高的性能。它们通常是项目的一个组成部分，迫使客户选择允许这一功能的产品。虽然价格不菲，但也是值得的!
性能
从根本上说，你总是想要一个能提供最快的服务。响应时间、请求时间和加载时间都有助于提高性能。UI/UX研究表明，加载时间对于用户的保留和减少跳出的点击量至关重要。
因此，对于最终用户来说，性能是一个重要方面。优化性能是至关重要的。
管理和工作流程
开发不是免费的。它需要投入时间、技能和大量的资金来完成。像管理广泛的独立动态服务如AWS服务器、安全、CI/CD管道等问题，都是繁琐的任务。
大多数项目/公司不能为开发和管理一个广泛的系统而付出这种努力。因此，最好是由托管服务提供商自己处理管理。这样一来，产品就可以在考虑到预算的情况下快速出货了
类别
根据反应应用的类别，有不同的托管选择。下面是主要的类别和对可用的托管选项的全面展望。
SPA - 单页应用程序
SPA是一种最常见的React应用程序的形式。它由单页组成，可以在部署到托管之前直接预建。这包括市场应用、个人博客、表格应用和信息网站。等等。
这里的关键是，应用程序中的一切在部署前都是固定的，没有动态页面（尽管内容可以是动态的）。你总是可以预先构建它们。
SPA's可以很容易地免费部署，直到你在这些平台上达到一个阈值限制 -
- Netlify
- 渲染
- 涌流
- Vercel（适用于非商业）。
- GitHub页面
- Heroku (非商业性)
此外，如果你有一个动态页面的网站，你可以尝试配置其设置，使其成为一个客户端渲染的应用程序。然而，这将极大地降低性能，并降低SEO的兼容性。
SPA是一个很好的开始。你可以随时切换到服务器端的应用程序。
服务器端 Nodejs React-apps
服务器端是React应用的第二时间。当你使用服务器端道具时，每次请求都会生成HTML。你也可以在构建时用静态道具静态地生成网站。
这个服务器管理着前端请求，所以像Meta-tags、服务器端认证和SEO优化等动态页面属性可以在页面请求时直接提供。
因此，当你查看页面源时，你可以查看所有这些信息。
NodeJS应用程序是一种直接的方法，需要开发人员对许多选项进行编码，如缓存、图像优化等。
这是React-App的一种高级形式，直接的NodeJS服务器供应商可以帮助你设置它。你将不得不购买一个服务器实例来运行这个。
预制选项
- DigitalOcean
- Heroku
传统的云供应商
亚马逊AWS、微软Azure和谷歌GCP都有按使用量付费的选项来促进这种类型的服务器。
然而，这需要高级安全和更多的开发人员努力来设置。如果你知道自己在做什么，或者已经发展到一个很大的程度，必须使用他们提供的规模，你可以使用它。
NextJS应用程序
在NextJS React应用程序中，服务器端的部分是由大受欢迎的NextJS库处理的。它提供了所有的SSR功能，在一个开发者友好的环境中提供无服务器功能。
你可以将Nextjs应用部署到Nextjs的创建者Vercel。
或者你可以使用AWS。在使用AWS进行部署时，NextJS有一个自动检测选项。
Vercel的起价为20美元/分钟，包括NextJS的所有功能，配有优化的缓存服务、无服务器功能和GitHub集成的CI/CD管道，并提供1TB的出站数据。如果这不能满足你的需求，你可以切换到企业计划。
由于NextJS在全球范围内被接受，许多其他托管供应商也能够托管不同配置的NextJS应用程序--
- Netlify (起价25美元)
- DigitalOcean (应用程序起价20美元)
使用AWS Amplify
亚马逊AWS amplify提供了一个服务，可以从一开始就托管NextJS应用程序。在 这里的文档中了解更多。
总结
在选择托管网站时，有很多选择和考虑--从免费托管到完全可定制的按次付费服务。如果你从一个选项切换到另一个选项，那么让你的用户保持更新是很重要的。
React (JavaScript库)
DZone贡献者所表达的观点是他们自己的。
DZone上的热门话题
评论
