如何使 ReactJS 应用程序在 AWS 上处于活动/可见状态

2023-12-28

我在AWS上开发了一个reactJS项目(前端),它有来自heroku的RESTFUL API。它们完全分离,即前端和后端。

我已成功将文件上传到 S3,并激活了我的 CloudFront 发行版,但我无法真正找出问题所在,因为当我点击从域名生成的 URL 时,我看不到我的 React 应用程序。

我已经检查过这个SOanswer https://stackoverflow.com/questions/41250087/how-to-deploy-a-react-nodejs-express-application-to-aws#41250688,但这没有帮助。

请提供任何帮助,我们将不胜感激。


首先,将它们部署在不同的服务器/云上是完全可以的。可以给个网址吗?我觉得这不是不同云的问题,而是配置问题。您可以先将一个简单的 html 文件放在同一个 S3 存储桶上,然后看看是否可以通过您的域名访问该文件。

假设您的 React 应用 example.com 托管在名为 ant 的存储桶中。因此,继续将额外的 test.html 放入存储桶 ant 中。然后尝试 example.com/test.html ..这将确保您的域名设置等正确

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

如何使 ReactJS 应用程序在 AWS 上处于活动/可见状态 的相关文章

  • React + Semantic-UI:在 UI MODAL 中使用表单

    在没有 React 的普通旧 Semantic UI 中 我已经能够毫无问题地将表单放入 Modal 中 使用 Semantic UI React 版本 我能够在模态中显示表单 但它并没有按照我期望的方式工作 例如 模态框显示后 模态框内的
  • React Router v4 的优点

    除了能够在 NavLink 上设置 activeClassName 和 activeStyle 之外 还有什么理由使用NavLink over Link在您的网站上不需要活动状态 类的非导航元素 即不是页眉或页脚中的主导航 上创建指向其他路
  • 在 React 应用程序的 shell 脚本中设置环境变量

    我正在尝试在 powershell 和 bash 脚本中设置一些环境变量 并在 ReactJS 应用程序中读取它们 shell脚本很简单 env AUTHDOMAIN some domain com env AUTHCLIENTID bun
  • 在describe-vpcs中按标签过滤的正确语法是什么?

    我试图理解 aws ec2 cli 调用 我希望描述所有 VPC 然后在自定义标记上描述文件管理器 vpcname myvpc 但是在尝试多种组合后 我不断收到有关 filters 的格式和使用的冲突错误 使用作为参考 http docs
  • React 中的 Reconciliation 详解

    我是 React JS 的新手 谁能准确解释和解是如何运作的 我尝试从 React 官方网站上理解它 但没有得到它 我是这样理解的 您会同意 React 使用组件使事情变得简单且更快 通过 JSX 我们可以让用户定义的组件变得更容易 一天结
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • 允许 Amazon VPC A 访问 VPC B 上的新私有子网吗?

    我有一个现有的 VPC vpcA 并且最近设置了一个新的 VPC vpcB 同时具有私有子网 privateSubnet 和公共子网 publicSubnet 我想允许来自以下位置的连接vpcA to vpcB vpcB设置了堡垒服务器以允
  • 为什么 CloudFront 根据 Accept-Encoding 改变 CORS 标头响应?

    我正在尝试让 CORS 与 Amazon S3 CloudFront 一起正常工作 设置我的 CORS 配置后 它似乎可以正常工作 curl H Origin https app close io I https d4389n07pf8cq
  • 在react中使用map方法渲染JSON API

    我对 JSON 对象 数组和映射方法的语法和结构有困难 我是 React 新手 正处于学习的初始阶段 这是我粘贴在下面的 JSON 文件代码 cloud Asia availability last15Min 100 last24Hour
  • webpack 4 React loadable 不会根据卡盘点分割供应商

    我目前正在使用 webpack 4 和 React loadable 来创建块 它实际上分块取决于断点 然而 供应商规模保持不变 React loadable 还不支持 webpack 4 吗 或者我缺少一些设置 css 实际上似乎被分成了
  • Jest 和 React 以及导入 CSS 文件时出现语法错误

    我正在尝试让我的第一个 Jest 测试通过 React 和 Babel 我收到以下错误 SyntaxError Users manueldupont test avid sibelius publishing viewer src comp
  • Next.js 中的 .env.local 文件未正确设置

    当我创建一个 env local文件在我的项目根目录中 它设置不正确 在文件中 我有我的 API 密钥 如下所示 API KEY SOME API KEY 然后当我尝试访问它时获取服务器端属性 with 进程 env API KEY 它不起
  • 卸载 React 时删除事件监听器

    我有更高阶的组件 反应如下 export default function InnerComponent class InfiniteScrolling extends React Component constructor props s
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • 由于 apollo-client 未定义,无法解构 GraphQL 查询?

    我正在寻找调试与错误消息相关的问题 未捕获的类型错误 无法解构 0 apollo client WEBPACK IMPORTED MODULE 4 useQuery 因为它未定义 Context 我正在为我的 React js 项目设置后端
  • yup.js 验证数字字段大于同级字段,或者可以为空

    我正在使用 Yup js 来验证一些表单字段 我有两个整数字段 Year Built Year Renovated Year Built是必填字段 Year Renovated is not 不过 装修年份可以留空如果有一个值它应该大于建造
  • 无法更新 AWS S3 CORS 策略

    我需要更改我的 AWS S3 存储桶 CORS 策略才能将我的 ReactJS 文件上传到 AWS S3 但我不断收到此 API 响应 预期 params CORSConfiguration CORSRules 是一个数组 我现在很茫然 有
  • 代码镜像错误:未捕获错误:扩展集中无法识别扩展值([对象对象])

    全部 我目前正在从事一个React Electron项目 该项目的目标是完成一个Markdown编辑器 当我配置codemirror 该程序报告错误说 Uncaught Error Unrecognized extension value
  • Cypress 在 Create React App 中返回 .scss 文件的 webpack 编译错误

    我正在尝试将 Cypress 添加到非常基本的 CRA 但遇到了 Cypress 无法理解 scss 文件的问题 当我跑步时npm run cypress运行测试 我收到以下错误 Error Webpack Compilation Erro
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro

随机推荐

  • Google pydrive 将文件上传到特定文件夹

    我正在尝试将文件上传到我的 Google 驱动器 下面的代码有效 如何指定上传到哪个文件夹 即驱动器 与我共享 csvFolder from pydrive auth import GoogleAuth from pydrive drive
  • 从 UWP 商店应用程序向多个收件人发送电子邮件

    我有一个简单的目标 即打开一封电子邮件 在 Outlook 2016 中 其中为 Windows 10 UWP 应用程序中的多个收件人配置了 收件人 字段 我尝试了3种方法 1 推荐的方式 如UWP示例中的demod 使用EmailMess
  • 如何在 React Native 博览会中使用可教学机器模型

    我正在使用可教学机器导出模型 const modelJson require assets models model json const modelWeights require assets models weights bin use
  • ReactJs componentDidMount 执行两次

    我正在研究 ReactJs 并遇到一些问题 我的问题是我有一个使用最新 ReactJs v 18 0 0 的简单应用程序 并且 componentDidMount 执行两次 为什么 index js import createRoot fr
  • 如何暂时放弃root权限?

    我正在开发一个以 root 身份运行的守护进程 但需要与用户调用 API 我检查了 API 代码 它使用getuid 来获取用户 如果 root 用户通过以下方式放弃权限setuid 无法恢复到root 如果调用 seteuid API 仍
  • Laravel - Jenssegers MongoDB 嵌套数组更新不起作用

    有人可以指出我的代码有什么问题吗 我正在尝试通过 Laravel Jenssegers 更新 MongoDB 中的嵌套数组 这是我的代码 update status Journal where id 5cd10b325586e9122761
  • 使用 mongoose 创建动态模式

    我对 Node js 和 Mongoose 模块非常陌生 我正在尝试创建一个架构 其中有一些必填字段 而其他一些字段可以是动态的 我用过strict to false 我的代码如下所示 var mongoose require mongoo
  • hibernate中缺少@Temporal注释

    如果我们使用怎么办 Column name birth date nullable false length 19 public Date getBirthDate return this birthDate 代替 Temporal Tem
  • 试图摆脱空数据字段(一种空基优化?)

    我想要一个会计 仪表层 如果需要的话 它应该计算对象实例上的许多不同的 事件 事件 可以是发生的任何事情 例如 在一天结束时 您应该能够判断 文件已写入 5400 次 或者 锁拥塞 52 456 次 不拥塞 12 311 次 通过旋转获取
  • 在Python中绘制图表

    我是 Python 新手 正在尝试根据找到的 pyODE 教程绘制图表here http pyode sourceforge net tutorials tutorial1 html 我在用着pylab用于绘图 下面是代码的主要部分 add
  • Chrome 扩展程序无需单击图标即可加载脚本

    大家好 我想加载脚本 无论用户是否单击我的扩展图标 这是我的扩展 它工作得很好 但我希望它能够工作 而不需要用户单击图标来加载脚本 这是代码 name Injecta version 0 0 1 manifest version 2 des
  • 如何在 shell 脚本中缩小 JSON?

    我一直在寻找一种在 bash 控制台中丑化一些 JSON 的方法 这有助于随后在另一个命令中使用它 例如 将 json 内联传递给httpie Giving foo lorem bar ipsum 我想获得 foo lorem bar ip
  • 为什么 scala 值 class#toString 包含案例类信息?

    价值类别 http docs scala lang org overviews core value classes html可用于实现类型安全 而无需拆箱的开销 我的印象是 在运行时 此类类型 类将 不存在 被视为简单类型 例如 值类ca
  • nodeJs巨大数组处理抛出RangeError:超出最大调用堆栈大小

    这是处理大量条目的代码的一部分 最初它与文件系统一起工作并对文件进行一些操作 有什么好的方法可以绕过限制并防止抛出RangeError 超出最大调用堆栈大小 目前它允许我迭代大约 3000 个项目 var async require asy
  • TensorFlow:dataset.train.next_batch 是如何定义的?

    我正在尝试学习 TensorFlow 并研究以下示例 https github com aymericdamien TensorFlow Examples blob master notebooks 3 NeuralNetworks aut
  • 在 .NET 中获取默认 Windows 系统颜色

    我正在编写一个自定义按钮控件作为 即将成为 免费控件套件的一部分 并且我希望将我的 默认 控件颜色基于相应的 Windows 系统颜色 因此 在网上查找 默认 Windows 系统颜色 后 我找不到有关 Windows 控件 尤其是按钮控件
  • 如何在 iOS 上旋转自定义启动屏幕?

    我的启动屏幕可以正常工作 但我的应用程序可以在横向模式下运行 并且启动屏幕以默认的纵向模式显示 如何启动应用程序 以便启动屏幕像我的应用程序一样在横向模式之间旋转 我正在使用以下代码 BOOL shouldAutorotateToInter
  • 使用 MVVM 分配数据上下文的最佳方法是什么?

    我一直在寻找设置数据上下文属性的最佳方法 我找到了三种方法 在视图上分配数据上下文 在 XAML 或隐藏代码上 通过构造函数在 ViewModel 上分配数据上下文 使用一些配置来获取视图和视图模型引用 并通过一些基础结构类在运行时绑定数据
  • 滚动到 javascript 或 jquery 中具有特定 id 的 html 元素

    我有分配了 id 的 html 元素 现在我想滚动到这些元素 我看到 jQuery 有一个scrollTop 它接受一个整数值 我如何轻松地将带有 id 的特定 html 元素滚动到顶部 理想情况下 动画精美流畅 快速搜索显示了许多滚动插件
  • 如何使 ReactJS 应用程序在 AWS 上处于活动/可见状态

    我在AWS上开发了一个reactJS项目 前端 它有来自heroku的RESTFUL API 它们完全分离 即前端和后端 我已成功将文件上传到 S3 并激活了我的 CloudFront 发行版 但我无法真正找出问题所在 因为当我点击从域名生