我如何在我的树莓派上公开托管我的 React JS 网站

Question

i made a react js website and everything is working fine but i can't figure out how to host it on my rasp pi4 and make it publicly visitable by other people. I also bought a domain. So my question is: How can i make my reactjs site public and running on my rasp. Thanks!

Answer 1

You have to configure a web server like Apache and build the React app with npm or yarn. Then copy the build files to the /var/www/html/ directory. You will also have to look into port forwarding your router to your local web server and open it to the public. Just be careful with security.

Answer 2

You need to configure a web server to host the site. Either Apache2 or Nginx (I have a personal preference to Nginx, but either works fine for this). Under Debian/Raspberry Pi OS, /var/www/html should be served on port 80 on all of the pi's IP addresses. Place the site files there and make sure you can access the site from the pi's IP address.

For making the site available outside of your.network, you will either need to look at port forwarding, hosting a VPS with a public IP, or using a tunnel. Port forwarding is likely going to be the hardest option and may not always work, but doesn't require any external services outside of your DNS provider. Tunneling is probably the second easiest, and using a VPS is almost certainly the easiest.

For port forwarding, yu will need to verify that your ISP does not use CGNAT, otherwise this will not work. Assuming they don't, you will need to access your routers configuration and set up port 80 on TCP to forward to your pi's IP address. I would assign your pi a static IP address, either on the pi itself, or using DHCP reservations. Next, you need to see if your DNS provider offers Dynamic DNS. If not, you will need to manually update your DNS settings in the case your.networks public IP changes (unless you purchased a static IP from your provider). In this setup, you point your domain at your.networks public IP. Traffic goes directly between the client's browser and your pi.

Tunneling is a fair bit easier. I personally use Cloudflare for my DNS (I set my domain with my registrar to point to Cloudflare, then used their tunneling tool (Cloudflared) to tunnel traffic from their servers to my pi. There are other tunneling services, but I think Cloudflare's is the best out of all of the ones I used. In this setup, you point your domain at Cloudflare, which forwards the traffic to you via the tunnel. Traffic goes from the browser to Cloudflare to your pi.

Using a VPS is probably the easiest, and your knowledge of working with the pi applies to working with a VPS, assuming you run Debian linux or similar on your VPS. You would install the web server on your VPS, put the app on the VPS, and point your domain at your VPS's public IP. In this setup, traffic goes from the client browser to your VPS. This is the only non-free option (excluding the price of the domain itself), and keeps your local private.network safer by not putting public services on it. You can also run a tunnel between your pi and your VPS if you want (see https://www.jeffgeerling.com/blog/2022/ssh-and-http-raspberry-pi-behind-cg-nat for an example), but I don't personally see the point unless you really want the app to be served from your pi.