This is the problem, it’s not using relative URLs. The frontend needs to know how to make API requests to the backend as the frontend code is executed by the users browser, thus that browser is making API calls.
We can’t change the absolute URL during runtime because nothing modifies the admin build during runtime (the entire admin is compiled at build time and during runtime we are just serving the static assets)
The only thing the backend understands is that anything point at /admin means it needs to load the static files and serve them. What you are describing would be fine if we were using something like Next.js for the admin (SSR) but it won’t work with just normal React (CSR).
Now if your docker container only ran the backend and you had some kind of CI/CD to build the admin and deploy it to a static location (Say AWS-S3 + Cloudfront) then you could easily get away with only building one container and swapping the vars out at runtime since the docker container wouldn’t be serving the admin panel. The vars needed to build the admin would be injected during the build process in CI/CD and deployed.
Assuming you had 3 environments:
- CI/CD builds and deploys 3 static admin builds for Prod, Stag, Dev to S3 => Cloudfront acts as the public proxy/cache for the Admin
- One docker container built and stored in a registry (private most likely) that could be auto-scaled and deployed to any environment.