使用 Raspberry Pi 4 来托管 React Web 应用程序
Using a Raspberry Pi 4 to host react web app
我对如何在 Raspberry Pi 上设置网络应用程序的流程有一些广泛的疑问。
我在我的本地 PC 上构建了一个 React 应用程序，它触发了一个 node/express API 我放在一起然后在我的 MYSQL 上执行基本的 CRUD数据库。我想使用 Raspberry Pi 从互联网上的任何地方访问整个东西。我已经设法将 API 和数据库都转移到 raspberry pi 并且它工作正常。我不认为 React 前端会成为问题，但我有这些问题挥之不去：
像这样的东西的一般架构是什么？
我将如何着手公开前端以便通过 Internet 访问它？
让他们都在同一台机器上是否足以让他们在直播时相互通信？
我需要另一个节点应用程序来为实际网站提供服务吗？（已经为 API 使用了一个节点应用程序）
这样的东西有什么大的安全风险？感觉从我的家庭网络托管一些东西并使其在全球范围内可用是很危险的，我应该注意什么？
我的第一个建议是 Docker, but I understand if you just want a server. I think the best way to go in this case would be to use something like Next.js to combine the API app and the React app and get server-side rendering as a bonus (so you don't even necessarily need API; you can call the server functions in your app using getServerSideProps). You could then use Nginx as a reverse proxy to expose the Next.js server. See here to learn how to set up Nginx on Raspberry Pi and here 学习如何为 Next.js 设置它。
如果您不想使用 Next.js（已经构建了您的应用程序，或其他原因），请注意 create-react-app 或您正在使用的任何其他内容可能会生成静态文件服务，在这种情况下，您只需设置 Nginx，然后将构建文件夹复制到 Nginx 静态文件夹（参见 here). If you're only exposing the front-end then you don't need to do anything else to expose the express server, but if you do want to expose the express server, you can read more about that here（使用 express 而不是 HTTP）。
如果您完全愿意使用 Raspberry Pi，那很好。如果您决定使用 Next.js，甚至只是 React，您也可以在 Vercel or Netlify. You could use their serverless functions as API endpoints for your application (set up automatically with Next.js, otherwise read here for Vercel and here 上为 Netlify 托管您的网站。
我对如何在 Raspberry Pi 上设置网络应用程序的流程有一些广泛的疑问。
我在我的本地 PC 上构建了一个 React 应用程序，它触发了一个 node/express API 我放在一起然后在我的 MYSQL 上执行基本的 CRUD数据库。我想使用 Raspberry Pi 从互联网上的任何地方访问整个东西。我已经设法将 API 和数据库都转移到 raspberry pi 并且它工作正常。我不认为 React 前端会成为问题，但我有这些问题挥之不去：
像这样的东西的一般架构是什么？
我将如何着手公开前端以便通过 Internet 访问它？
让他们都在同一台机器上是否足以让他们在直播时相互通信？
我需要另一个节点应用程序来为实际网站提供服务吗？（已经为 API 使用了一个节点应用程序）
这样的东西有什么大的安全风险？感觉从我的家庭网络托管一些东西并使其在全球范围内可用是很危险的，我应该注意什么？
我的第一个建议是 Docker, but I understand if you just want a server. I think the best way to go in this case would be to use something like Next.js to combine the API app and the React app and get server-side rendering as a bonus (so you don't even necessarily need API; you can call the server functions in your app using getServerSideProps). You could then use Nginx as a reverse proxy to expose the Next.js server. See here to learn how to set up Nginx on Raspberry Pi and here 学习如何为 Next.js 设置它。
如果您不想使用 Next.js（已经构建了您的应用程序，或其他原因），请注意 create-react-app 或您正在使用的任何其他内容可能会生成静态文件服务，在这种情况下，您只需设置 Nginx，然后将构建文件夹复制到 Nginx 静态文件夹（参见 here). If you're only exposing the front-end then you don't need to do anything else to expose the express server, but if you do want to expose the express server, you can read more about that here（使用 express 而不是 HTTP）。
如果您完全愿意使用 Raspberry Pi，那很好。如果您决定使用 Next.js，甚至只是 React，您也可以在 Vercel or Netlify. You could use their serverless functions as API endpoints for your application (set up automatically with Next.js, otherwise read here for Vercel and here 上为 Netlify 托管您的网站。