Search code examples
reactjsapachenginxmicroservicessubdomain

Connect to multiple microservices using the same subdomain from React


I am having trouble understanding how to use a microservices model. The idea of a microservice is that I have multiple local servers, each serving a different port. Connecting to these local servers can be easily done locally (e.g., using an Express hosted website). But if I am using a frontend application, such as React, how am I supposed to call the different APIs.

The only solution I can seem to think is to create a subdomain per API, but this seems far-fetched and impractical since I would need to create a lot of entries inside the Names Server (e.g., Cloudflare).

If I am using an application like Apache or Nginx, is there a way to publicly access the APIs using a single domain? Or using subsubdomains such as api1.subdomain.domain.com, api2.subdomain.domain.com ... but without adding each of these subdomains to the name server?

An alternative I can think of is creating a public API whose job is to connect to local services, but this seems to defeat the purpose of microservices.

I can't find anything online and all tutorials always use localhost which does not work in production code.

Thanks in advance!


Solution

  • You should research API Gateways / Edge-Services.

    Personally, I like hosting the containers for microservices in Kubernetes and forwarding all traffic to *.mydomain.tld to the kubernetes cluster and configuring the load balancing (in this case: which subdomain should be routed to which service) there.