It seems that Volto has http://localhost:8080/Plone as apiPath.
I notice that the documentation contains this command:
docker run --name plone6-frontend --link plone6-backend:backend -e RAZZLE_API_PATH=http://localhost:8080/Plone -e RAZZLE_INTERNAL_API_PATH=http://backend:8080/Plone -d -p 3000:3000 plone/plone-frontend:latest
The RAZZLE_API_PATH env var should point to the publicly-available Plone backend domain. It will be used by the end-user browser to connect to Plone using the ++api++ traversers and special rules. So it needs to be properly adjusted to your custom case.
This would fix your "production deployment" issue.
When I visit the site using a browser running on a remote host, I can see the current version of the page being visited for a second, and then the content area is replaced by the message "The backend is not responding, due to a server timeout or a connection problem of your device. Please check our connection and try again. Thank you."
This is because there's two things happening. I assume that Volto (frontend) and Plone (backend) run on the same remote machine and you're trying to connect to them from your development machine.
Volto, when generating the HTML that gets loaded in the browser, will use the default http://localhost:8080/Plone address to connect to Plone. This will work fine. After your browser loads the HTML and the JS, Volto will start running in your browser. It will immediately try to "rehydrate" and attach React components to the loaded DOM elements. It will trigger network fetches, etc, and that's why you see the initial content (based on HTML loaded) and then an error, because the network fetch failed. It will try to connect to http://localhost:8080/Plone from your development machine. This may not work, depending on your tunneling setup.
I do my development remote all the time, it works. I tunnel ports 3000, 3001 and 8080.