如何将 React + NodeJS Express 应用程序部署到 AWS?

2024-03-16

我有一个 React + Webpack/Babel + Node/Express 应用程序,我想将其部署在 AWS 上。

我需要单独部署 React 和 Node/Express 吗?或者他们可以同时部署在一起吗?


1.如果你有两个不同的项目

例如一个反应单页应用程序 https://en.wikipedia.org/wiki/Single-page_application和 Node/Express API。

A。您可以单独部署两者

  • the frontend(React 应用程序)上S3 https://aws.amazon.com/s3 and 云锋 https://aws.amazon.com/cloudfront (tutorial https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af)

  • the backend(节点 API)上弹性豆茎 https://aws.amazon.com/elasticbeanstalk/(推荐)或EC2 https://aws.amazon.com/ec2

另一种选择是同时部署两个部分弹性豆茎 https://aws.amazon.com/elasticbeanstalk/ or EC2 https://aws.amazon.com/ec2。但是,您将错过在 S3 和 CloudFront 上托管的好处,即为您的用户提供更快的交付 and 更便宜的成本。在我看来,单独更新和部署 Web 应用程序的客户端和服务器端也更方便,并且更不容易出现意外错误。

单独部署的另一个好处:对于前端和后端拥有不同团队的组织来说,每个团队都可以更轻松地自行部署自己的应用程序而不依赖于其他团队。

b.为什么使用 S3 + CloudFront 而不是单独使用 S3?

  • all 使用 CDN 的好处 https://stackoverflow.com/a/34330741/652669
  • 一键点击您自己的域名和免费 SSL 证书
  • 重定向开启4xx错误(如果您的应用程序使用HTML5 History基于路由器)
  • 缓存系统
  • http2 https://en.wikipedia.org/wiki/HTTP/2 and http to https重定向

C。如何处理CORS?

您可以使用不同的子域,例如

  • api.domain.com对于 Node/Express API
  • app.domain.com对于反应应用程序

Then 启用跨域资源共享 https://github.com/expressjs/cors在 API 中:

app.get('/api', cors({ origin: 'https://app.domain.com' }), ...)

2.如果你有一个单一的项目

例如一个包含一些 React 视图的 Node 应用程序。

您必须将整个应用程序部署在弹性豆茎 https://aws.amazon.com/elasticbeanstalk/ or EC2 https://aws.amazon.com/ec2.

注意:如果您有一个项目包含两个子项目(即一个用于 React 应用程序的文件夹和另一个用于 Node API 的文件夹),并且两个子项目在分离后仍然可以工作,那么您可以部署子项目单独项目(参见答案的第一部分)。

3. 在这两种情况下

运行你的Webpack 构建 https://webpack.js.org/guides在部署 React 部分之前。您可以手动(在 AWS 上部署之前)或自动(在您的CI https://en.wikipedia.org/wiki/Continuous_integration/CD https://en.wikipedia.org/wiki/Continuous_delivery系统)。如果您使用以下命令启动您的应用程序创建反应应用程序 https://github.com/facebook/create-react-app(CRA),跑吧yarn build or npm run build在项目的根目录下,并将“build”文件夹的内容上传到您的 S3 存储桶。

4. Tools

  • 官方 AWS S3 CLI https://docs.aws.amazon.com/cli/latest/userguide/using-s3-commands.html- 使用高级管理 S3 存储桶和对象aws s3命令。
  • 官方 AWS Elastic Beanstalk CLI https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/eb-cli3.html- 使用管理和部署您的后端eb命令。
  • S3-部署 https://github.com/import-io/s3-deploy- 用于将文件部署到 S3 的 CLI 实用程序。

5.如果不限于AWS

我回答了一个相关的问题 https://stackoverflow.com/a/41252583/652669不限于AWS。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 React + NodeJS Express 应用程序部署到 AWS? 的相关文章

随机推荐

  • Flask 蓝图在蓝图中查找静态文件而不是根目录

    我的蓝图应该在根目录中查找静态文件 但事实并非如此 假设我有一个名为 前端 的蓝图 frontend 仅传入了 template folder frontend 即使我将静态文件放在 app frontend static file css
  • 如何:Parallel.Foreach 执行许多进程,每个进程运行一个新进程(但一次一个)? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我确信有人知道这一点 我将非常感谢您
  • 休眠中的未知实体

    执行主类时出现此错误 我正在尝试在表投资组合中插入新记录 正如您所看到的 我使用 Hibernate ORM 模型来做到这一点 另外 可以说 hibernate 与数据库的连接没有任何问题 Exception in thread main
  • 同一模型上雄辩的亲子关系

    我有一个模型CourseModule 并且每个项目都与同一模型相关 数据库结构 模型中的关系 public function parent return this gt belongsTo App CourseModule parent i
  • Java接口命名约定[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 使用线程进行 Android 媒体录制

    我正在开发一个 Android 应用程序 只需使用按钮即可开始和停止录制 我用了线程 我创建了三个类 一个开始录制 一个停止录制和主类 问题是我可以在手机中看到该文件 但它是空的 并且手机给我一条消息 无法播放视频 我希望它与线程一起使用
  • 仅当用户在计算机上时才显示通知

    检测用户当前是否在其计算机上 即以某种方式使用它 的最佳方法是什么 我们有一个应用程序 仅当用户在计算机前时才发出通知 带有关闭按钮的横幅通知 例如 想象一个股票交易应用程序 它提醒用户各种可能只与几分钟相关的时间敏感信息 如果用户离开计算
  • pygtk glib.timeout_add():如何判断计时器是否没有被销毁?

    在我的应用程序中 我使用一个函数来显示带有超时的 GtkInfoBars 如所述https stackoverflow com a 1309257 406281 https stackoverflow com a 1309257 40628
  • CSS:图像链接,悬停时更改

    我有一个图像 它是一个链接 我想当用户将鼠标悬停在链接上时显示不同的图像 目前我正在使用这段代码 a href http twitter com me title Twitter link div class sidebar poster
  • 通过EntityFramework获取表的最新Value

    我有一个包含多个字段的表 每个字段都通过单独的 ViewModel 单独更新 现在我想获取特定字段的最新值 也许它已在我表的第五条记录中更新 好吗 现在我写的看起来像这样 public ViewResult ShowPiece var co
  • 对数据库持久对象进行版本控制,您会如何? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 与数据库架构的版本控制无关 与数据库交互的应用程序通常具有由许多表中的数据组成的域对象 假设应用程序要支持这些域对象的 CVS 意义上的版本
  • 使用 Bean Utils 填充 POJO 时设置字段的默认值

    我正在尝试使用填充 POJO 的字段BeanUtilsBean populate object fieldNameVSfieldValueMap method 我的 POJO 看起来像 class POJO Integer intField
  • 你能解决这个简单的 SQL 查询吗?

    假设这是一个销售相机的网站 这是我的实体 表 Camera A simple camera Feature A feature like 6mp max resolution 1024x768 事情是在相机和功能之间我有一个多对多的关系 所
  • 在 laravel 4 中提交表单后重定向到联系人页面

    提交详细信息后 我想重定向回联系人页面 我已经从论坛中查看了解决方案 但找不到解决方案 到目前为止 这就是我所拥有的 Route post sendmail function Mail send emails auth mail array
  • 如何使用Delphi/DSPack捕获帧而不将其显示在TVideoWindow上?

    DSpack 具有播放 DirectShow 兼容视频设备并同时捕获视频帧的示例代码 TVideoWindow 附加到 FilterGraph 以显示视频 Figure 1 如果删除 TVideoWindow 则操作系统 Windows 将
  • 具有可选 WHERE 选项的 Linq

    我有一个 Net 函数 它接受 3 个参数 所有参数都是可选的 像这样的事情 public List
  • 覆盖 django-admin 编辑表单字段值以获取加密数据

    我的数据库中有加密的值 如何覆盖 django 的管理编辑表单以便字段可以显示解密的数据 只是为了澄清我知道如何解密这些值 我只需要知道如何将解密的值放入字段中 是否有我可以使用的change view方法的django信号 虽然可以覆盖模
  • 如何计算 pandas 系列中的特定单词?

    我正在尝试计算 pandas DataFrame 中的关键字数量 如下所示 df pd read csv amazon baby csv selected words awesome great fantastic amazing love
  • Javascript Fetch api [对象对象]

    为什么我尝试在下面运行的代码返回为 object object var request new Request data some json fetch request then function response return respo
  • 如何将 React + NodeJS Express 应用程序部署到 AWS?

    我有一个 React Webpack Babel Node Express 应用程序 我想将其部署在 AWS 上 我需要单独部署 React 和 Node Express 吗 或者他们可以同时部署在一起吗 1 如果你有两个不同的项目 例如一