Deploying an Angular app to Microsoft Azure when merging to the master branch on GitHub involves different Azure services and GitHub Actions. Here's a general overview of the process:
Set Up Azure Services:
a. Azure Storage Account: Create an Azure Storage Account to host your Angular app's static files (HTML, CSS, JS). You can also use Azure Blob Storage within the Storage Account.
b. Azure CDN (Optional): Set up an Azure Content Delivery Network (CDN) profile and endpoint to serve your app's content globally for better performance.
Configure Azure Credentials:
a. Set up an Azure Service Principal with appropriate permissions to access the Azure Storage Account and CDN (if used).
b. Generate the Azure Service Principal's Application ID, Authentication Key, and Tenant ID.
c. Configure these credentials on your local machine or your CI/CD environment where the deployment will take place. This can be done using environment variables or Azure CLI configuration.
Set Up GitHub Actions:
a. In your Angular project repository on GitHub, create a .github/workflows directory.
b. Create a YAML file (e.g., deploy.yml) in this directory to define the GitHub Actions workflow.
c. Configure the workflow to trigger on merges to the master branch.
Define Deployment Steps:
a. Within the workflow file, define steps to build and deploy the Angular app: