Set up Branch preview deployments with gitlab-ci.yml for static website deployed on azure

Question

I have a static web app deployed on an azure app service. This is my gitlab-ci.yml for CI/CD on production -

variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR'
  REACT_APP_ENV: $REACT_APP_ENV
  REACT_APP_GOOGLE_AUTH_CLIENT_ID: $REACT_APP_GOOGLE_AUTH_CLIENT_ID
  REACT_APP_OPENAI_API_KEY: $REACT_APP_OPENAI_API_KEY

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

This works great for deploying when I merge to master.

Now I want to update this yml to also do deployments and create preview urls when I open a PR on a branch branched-off master.

How do I update this yml to do that?

Tried -

variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR'
  REACT_APP_ENV: $REACT_APP_ENV
  REACT_APP_GOOGLE_AUTH_CLIENT_ID: $REACT_APP_GOOGLE_AUTH_CLIENT_ID
  REACT_APP_OPENAI_API_KEY: $REACT_APP_OPENAI_API_KEY

deploy:
  stage: deploy
  script:
    - apt-get update -qy
    - apt-get install -y nodejs npm
    - npm install
    - npm run build
    - curl -sL https://aka.ms/InstallAzureCLIDeb | bash
    - az --version
    - DEPLOYED_URL=$(az staticwebapp show --resource-group providentiainterviewbackend --name aihyr-prod-frontend --query "defaultHostname" -o tsv)
    - echo $DEPLOYED_URL
  environment: review/$CI_COMMIT_REF_SLUG
  only:
    - branches
  except:
    - master

It says I need to add az login. But wouldnt I need to give credentials for az login? Is there a better and easier way of doing this?

Answer 1

You can utilize GitLab's CI/CD environment variables along with the Azure Static Web Apps CLI to generate preview URLs for branches derived from the master branch, eliminating the need for repeated logins. and use az login with service principal authentication. Make sure The AZURE_CLIENT_ID, AZURE_CLIENT_SECRET, AZURE_TENANT_ID, and AZURE_SUBSCRIPTION_ID environment variables are set in your GitLab CI/CD settings. These values are associated with your Azure service principal.

variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR'
  REACT_APP_ENV: $REACT_APP_ENV
  REACT_APP_GOOGLE_AUTH_CLIENT_ID: $REACT_APP_GOOGLE_AUTH_CLIENT_ID
  REACT_APP_OPENAI_API_KEY: $REACT_APP_OPENAI_API_KEY
  AZURE_CLIENT_ID:  c0c952e9-5254-45b5-b838-6d26a31435cb
 AZURE_CLIENT_SECRET:  snG8Q~c13XI06mOPVrqDWZaSTb6oFCl-LUD_Aavp
 AZURE_TENANT_ID:  83331f4e-7f45-4ce4-99ed-af9038592395
 AZURE_WEBAPP_NAME:  siliconfunc653

deploy:
  stage: deploy
  script:
    - apt-get update -qy
    - apt-get install -y nodejs npm
    - npm install
    - npm run build
    # Authenticate with Azure using the provided service principal
    - az login --service-principal -u $AZURE_CLIENT_ID -p $AZURE_CLIENT_SECRET --tenant $AZURE_TENANT_ID
    # Set Azure subscription
    - az account set --subscription $AZURE_SUBSCRIPTION_ID
    # Get the URL for the production deployment
    - DEPLOYED_URL=$(az staticwebapp show --resource-group providentiainterviewbackend --name aihyr-prod-frontend --query "defaultHostname" -o tsv)
    - echo "Production deployment URL: $DEPLOYED_URL"
    # Create preview URL for the branch
    - PREVIEW_URL=$(az staticwebapp hostname create --resource-group providentiainterviewbackend --name aihyr-prod-frontend --hostname $CI_COMMIT_REF_SLUG --branch $CI_COMMIT_REF_NAME --query "hostname" -o tsv)
    - echo "Preview deployment URL: $PREVIEW_URL"
  environment:
    name: review/$CI_COMMIT_REF_SLUG
    url: $PREVIEW_URL
  only:
    - branches
  except:
    - master

throwing invalid Tenant ID error for me now. I am using the correct tenant id that I am getting from azure though

In order to resolve this error:-

Make sure the Tenant ID variable you are using if correct and from this option below:-

It should be the Tenant Id of the Directory connected to your Azure subscription.

Make sure you are logged into correct directory or Switch to the correct directory that has your subscription which contains the Web app.