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:

name: Deploy to Azure

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v2

      - name: Set Up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 14

      - name: Install Dependencies
        run: npm install

      - name: Build Angular App
        run: ng build --prod

      - name: Deploy to Azure Blob Storage
        run: |
          az login --service-principal -u ${{ secrets.AZURE_CLIENT_ID }} -p ${{ secrets.AZURE_CLIENT_SECRET }} --tenant ${{ secrets.AZURE_TENANT_ID }}
          az storage blob upload-batch --destination ${{ secrets.AZURE_STORAGE_URL }} --source ./dist/my-angular-app

 

Replace placeholders like my-angular-app, ${{ secrets.AZURE_CLIENT_ID}}, ${{ secrets.AZURE_CLIENT_SECRET}}, ${{ secrets.AZURE_TENANT_ID}}, and ${{ secrets.AZURE_STORAGE_URL}} with actual values.

GitHub Secrets:

a. In your GitHub repository, go to "Settings" > "Secrets" and add secrets for Azure, such as AZURE_CLIENT_ID, AZURE_CLIENT_SECRET, AZURE_TENANT_ID, and AZURE_STORAGE_URL with the corresponding values obtained from your Azure Service Principal and Storage Account.

Testing and Deployment:

a. Make changes to your Angular app and create a pull request to the master branch.

b. Once the pull request is merged, GitHub Actions will automatically trigger the deployment workflow.

c. The workflow will build your app and deploy it to Azure Blob Storage.

This is a high-level overview, and depending on your project's complexity, you might need to adjust the workflow to handle additional requirements like environment-specific configurations, testing, or CDN integration if you're using Azure CDN.