I have an Angular app that is hosted in S3 as a static website.
I would prefer to have the same build artifact deployed to staging and production, but find no good way to change the configuration depending on the environment I am deploying to. I could offcourse get the configuration from the backend, but the backend url is also part of the configuration.
My last resort would be doing string replacement as part of the deployment but that is pretty lame.
As you indicate, it is recommended to build binaries once, then deploy down a pipeline. This should also enable you to spin up a new environment at any time, eg called load test 2, without any rebuilds. Or recreate an environment on an old version.
WEB DEPLOYMENTS
For this to work you must separate configuration from binaries. In some types of deployment you can represent configuration by environment variables, but that doesn't work for browser or mobile apps.
For web deployments you might therefore deploy the binaries and also a config.json file to S3. This will typically contain an API base URL and maybe one or two other settings. The SPA knows its web origin so can always locate this file.
DEFAULT TO PRODUCTION CONFIG
In any app I like to default the code to use production configuration settings. In a mobile app these could be overridden by testers in a settings page to point to a test environment. In a web app, they can be overridden by deploying a config.json file. This means in production you avoid the need for a config.json file.
FURTHER INFO
These resources of mine provide further info, to show what I mean: