Setting up the Angular app can be quite tricky. In our Azure Yaml pipeline publishing job, we tackle the challenge by executing a "token" replacement to tailor the configuration for the specific target environment within a tokenized artifact.
Subsequently, we deploy this tokenized artifact (with replaced tokens) to the designated environment:
- task: AzureWebApp@1
inputs:
azureSubscription: 'xxxx'
appType: 'webApp'
appName: [depends on $(environment)]
package: '$(Pipeline.Workspace)/xxx'
This approach allows us to have distinct configurations for DEV, TEST, and STAGING (which serves as a Production slot).
However, when it comes time to switch from STAGING to PROD, an issue arises. The Angular app ends up in PROD with values intended for STAGING, creating a dilemma. I am seeking advice on how best to proceed.
Here are some potential solutions:
During the STAGING deployment, generate the PROD files with a different naming convention (e.g., main.*.js.PROD). Then, after the PROD swap, rename the files. However...
- The files may still be in use, preventing them from being renamed.
- Renaming could introduce downtime, and it is unclear if YAML supports renaming already deployed files.
Prior to deploying to PROD, first deploy to STAGING using PROD variables before executing the swap. But...
- This method elongates the deployment process since STAGING must be redeployed even if it already exists.
- It underutilizes the benefits of slots.
Skip the STAGING swap and opt for a full deployment directly to PROD. Yet...
- This results in the lengthiest deployment time.
- No advantage of utilizing slots in this scenario.
Edit: Thanks to @prawin's suggestion, here's another idea to consider:
- Implement dynamic server-side configuration
- This appears promising when the backend and frontend share a host. However, what about cases where they are decoupled? In such instances, the backend URL would also need to be configured accordingly based on the environment.
After further exploration and experimentation, additional approaches emerge:
Utilize FTP or the Kudu API to deploy only the updated file.
Create and transfer the PROD configuration to STAGING prior to performing the swap. This option seems most appealing to me.
Are there any other factors to consider? What represents the "standard" procedure for handling this situation?