小编Luk*_*ron的帖子

我最近一直在学习 React 和 Node js，并且玩得很开心。我想使用 Amazon AWS 将我的作品部署/发布到互联网上（与朋友和潜在雇主分享我的应用程序）。但是，我遇到了麻烦。

我对这个过程进行了相当多的研究，似乎找不到任何足够详细且涉及我的网络应用程序各个方面的资源。澄清一下，我的前端是用 React 编写的，后端是用 Node/Express js 编写的，并且连接到 MySQL 数据库。目前所有这些都存储在我的计算机本地。

我不知道如何继续...我已经尝试将所有代码添加到 github 并运行 AWS Amplify 上的部署功能，但这似乎仅限于反应前端（至少我无法发现任何东西）关于包括我的后端功能以及包括我的数据库连接和来自 Node 的查询）。

有人能指出我正确的方向吗？提供任何提示、建议和/或资源来帮助此过程将不胜感激。具体到这个问题：如何通过 Amazon AWS 将我的 React、Node/Express 和 MySQL Web 应用程序（当前完全存储在我的本地计算机上）部署到互联网？

我在弄清楚如何将自定义字体导入到 next js 13 中时遇到了麻烦。第一个问题是 next js 文档有一个关于如何使用 google fonts 执行此操作的完整示例，但他们没有列出有关使用 typekit 的任何内容。另一件事是，我在网上看到的几乎所有示例都在谈论这个声称正在使用 Next JS 13，但是它们都无法识别新 App 目录和旧 Pages 目录之间的区别。根据下一个 js 13 有关字体的文档：

虽然内联 CSS 在页面中仍然有效（next js v. 12），但它在应用程序中不起作用（next js v. 13）。您应该使用 next/font 代替。

因此，这里是讨论版本 13 的新 next/font 方法的文档： https://nextjs.org/docs/app/building-your-application/optimizing/fonts

然而，这个文档只展示了如何做谷歌字体；甚至页面顶部的视频也显示他们使用旧的页面目录。

那么，如何使用新 App 目录的新 next/font 方法将自定义 TYPEKIT 字体导入 Next.JS 13 并使用？

我需要更多细节来支持这个问题：Explain data revalidation in Next JS 13

我正在使用新的 next js 13 应用程序目录功能来获取数据；正如 Next JS 13 文档所述，在本页标题为“在服务器上获取数据”的部分中：

只要有可能，我们建议在服务器上获取数据。

该文档讨论了新的数据获取技术（例如服务器操作和路由处理程序）如何允许客户端组件与服务器通信以获取数据，而不是直接在客户端中获取数据。服务器操作和路由处理程序用于创建可直接访问数据库的专用 API；但是，我使用的是 Supabase，Supabase 生成了一个 API 供我与数据库进行通信。

因此，我正在争论在服务器操作或路由处理程序上执行 Supabase API 调用是否有意义，或者（因为 Supabase API 已经托管在 supabase 服务器上）客户端 API 调用是否可以。

具体来说，Next JS 建议在服务器上获取数据，然后调用生成的 api（服务器操作或路由处理程序），我有点困惑；虽然服务器操作和路由器处理程序可以为我进行 api 调用，但这有必要吗？由于我正在调用在其他地方提供服务的专用 API 路由，而不是直接数据库调用，为什么不直接从客户端进行调用（例如 fetch api 或 React 查询，直接在客户端组件中）。这与调用服务器操作或路由处理程序有何不同，因为它们只是生成要从客户端调用的 api？

最近在学习react。我将状态设置为对象数组。我想在页面上的表格中显示该数组（每个对象在一行上）。我一直在研究地图，但是我在理解它时遇到了一些困难。我能够在代码中的不同位置很好地使用 map 来映射数组，但我在映射对象数组时遇到问题。此代码发生在我的渲染内的 div 中：

<table>
  {this.state.orderDetails.map((item =>
  <tr key={item}>{item}</tr>
  ))}
</table>

我收到此错误：“未处理的拒绝（错误）：对象作为 React 子项无效（找到：带有键 {OrderID、CustomerID、AddressID、Date、ItemID、BookID、UnitPrice、Quantity} 的对象）”。如果您打算渲染子集合，请改用数组。

订单详细信息肯定已正确设置；当我打开反应工具并检查该组件中的状态时，它被列为一个包含两个元素的数组，每个元素都是一个包含多个元素的对象。如何成功地映射这个对象数组并以表格形式显示它（每个对象都在自己的行上）？感谢您提供任何想法！

编辑 从答案和评论中获取一些建议后，我已将地图更改为以下内容：

<table>
  {this.state.orderDetails.map((item =>
  <tr><td key={item.OrderID}>{item.CustomerID}</td></tr>
  ))}
</table>

错误已经消失。但是，当我单击该按钮时，我会看到一个空的小表格单元格。我期望有多个单元格，因为我的数组有两个对象，当然我期望它不为空。另外，我想要显示的不仅仅是 customerID。我想要在表格上呈现的每个对象中有几个元素（例如数量、价格、标题等）。还有其他建议吗？

我的静态 React 应用程序托管在 AWS s3 存储桶中。它渲染得很好。然而，我正在利用react-router-dom在“页面”之间导航。（我已启用公共访问，启用静态网站托管，将我的索引文档列为index.html）。例如，我的存储桶网站端点是 http://<bucketname.s3-website-us-east-1.amazonaws.com。当我点击链接到 http://<bucketname.s3-website-us-east-1.amazonaws.com/Support 的导航按钮之一时，它要么将我重定向到索引页面，要么给我一个 403 错误（取决于我是否使用存储桶网站端点或index.html对象url）。不管怎样，关键是我无法访问任何比主页最顶层更具体的 URL 路径。它不允许我路由到更具体的位置/不同的页面。我对此进行了相当多的研究，并且正在拔掉我的头发。重定向规则似乎不是一个可以接受的答案。我的理由是，如果每次尝试访问不同页面时都会收到 403 错误，则重定向回索引并不是一个可行的解决方案。我想允许公共访问所有 URL 位置，以便我可以从初始端点访问任何位置。我怎样才能解决这个问题？