What should the application infrastructure look like with separated Fronted and Backend?

Question

Web development

I am facing this for the first time. There is a backend application written in Laravel under api, there is a separate application written in react that communicates with the backend API. Everyone has their own server. How should it look in production? Should these applications be located on different servers or on the same one. If on one then how should it be, api.example.com for the api and example.com for the front? Should it all be hosted by one webserver? please tell me, a complete mess in the naked, or at least tell me where to read the information you need, I couldn’t find it myself.

Answer 1

Should these applications be located on different servers or on the same one.

Irrelevant.

If on one then how should it be, api.example.com for the api and example.com for the front?

Irrelevant.

Should it all be hosted by one webserver?

If they are on the same domain or on the same IP - yes, so that he can decide which requests to give static to the front, and which requests to apply to the back.
I advise you to read what reverse-proxy is: https://docs.nginx.com/nginx/admin-guide/web-serve...
And see how you can configure nginx for such scenarios.