Updated pipeline to use service principal with federated credential to authenticate with Azure in order to deploy the static web app instead of using the deprecated approach

Author: hvalfangst

.github/workflows/deploy_to_azure.yml

@@ -45,9 +45,9 @@ jobs:
   deploy-function:
     runs-on: ubuntu-latest
     needs: build-function
-    environment:
-      name: 'Production'
-      url: ${{ steps.deploy-to-function.outputs.webapp-url }}
+    permissions:
+      id-token: write
+      contents: read
     steps:
       - name: Download artifact from build job
         uses: actions/download-artifact@v4
@@ -57,11 +57,6 @@ jobs:
       - name: Unzip artifact for deployment
         run: unzip release.zip
 
-      - name: Login to Azure using Service Principal
-        uses: azure/login@v1
-        with:
-          creds: ${{ secrets.AZURE_CREDENTIALS }}
-
       - name: Deploy to Azure Functions
         uses: Azure/functions-action@v1
         id: deploy-to-function
@@ -71,6 +66,7 @@ jobs:
           package: ${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}
           scm-do-build-during-deployment: true
           enable-oryx-build: true
+          publish-profile: ${{ secrets.PUBLISH_PROFILE }}
 
   build-react:
     runs-on: ubuntu-latest
@@ -103,6 +99,9 @@ jobs:
   deploy-react:
     runs-on: ubuntu-latest
     needs: build-react
+    permissions:
+      id-token: write
+      contents: read
     steps:
       - name: Download React build artifact
         uses: actions/download-artifact@v4
@@ -112,10 +111,12 @@ jobs:
       - name: Unzip React build
         run: unzip build.zip
 
-      - name: Login to Azure using service principal
-        uses: azure/login@v1
+      - name: Login to Azure with OIDC
+        uses: azure/login@v2
         with:
-          creds: ${{ secrets.AZURE_CREDENTIALS }}
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
 
 
       - name: Deploy React build to Azure Static Website

README.md

@@ -1,11 +1,14 @@
 # Static web app invoking Azure functions
 
-Static web app built with the React framework. The [application](client/src/App.js) allows users to upload CSV files to a storage blob via an HTTP-triggered function.
-The uploaded files are then processed by a blob-triggered function, which stores the results in a separate container. Aforementioned functions
-are present in the [function_app.py](hvalfangst_function/function_app.py) python script - which is the main entrypoint of our Azure Function App instance.
+This repository contains a [static web app](client/src/App.js), which enables users to upload CSV files containing demographic and financial data about individuals to a designated storage blob via an HTTP-triggered Azure Function. 
+Once uploaded to the blob, another, blob-triggered function calculates correlations between various variables, such as experience, state, gender, and income. The computed statistics are then stored in a separate storage blob. 
+These functions are defined in the python script [function_app.py](hvalfangst_function/function_app.py) - which is the main entrypoint of our Azure Function App instance.
 
-A pipeline has been set up to deploy the function app and the static web app to Azure using GitHub Actions. The pipeline is triggered by a push to the main branch or by manually running the workflow.
+The associated Azure infrastructure is deployed with a script (more on that below).
 
+A branch-triggered pipeline has been set up to deploy our code to the respective Azure resources using a GitHub Actions Workflows [script](.github/workflows/deploy_to_azure.yml). 
+The two functions are deployed using the Function App's associated **publish profile**, whereas the static web app is deployed using a service principal configured with a federated credential. 
+Note that the static web app is actually hosted directly on a storage blob, which is configured to serve static websites. Thus, deploying the web app is simply a matter of uploading the files to the designated blob container.
 
 
 ## Requirements
@@ -18,8 +21,8 @@ A pipeline has been set up to deploy the function app and the static web app to
 
 ## Allocate resources
 
-The shell script [allocate_resources](infra/allocate_resources.sh) creates Azure resources specified in a
-[Bicep](https://learn.microsoft.com/en-us/azure/azure-resource-manager/bicep/overview?tabs=bicep) template [file](infra/main.bicep).
+The shell script [allocate_resources](infra/allocate_resources.sh) creates Azure resources using the Azure CLI and a
+[Bicep](https://learn.microsoft.com/en-us/azure/azure-resource-manager/bicep/overview?tabs=bicep) template [file](infra/main.bicep). 
 
 It will create the following hierarchy of resources:
 
@@ -41,20 +44,13 @@ graph TD
     B -->|Contains| F
 ```
 
-## Deallocate resources
-
-The shell script [deallocate_resources](infra/deallocate_resources.sh) deletes our Azure resources.
-
-# CI/CD
-
-A CI/CD pipeline for deploying our [Function App](hvalfangst_function/function_app.py) to Azure has been set up using a GitHub Actions workflows [script](.github/workflows/deploy_to_azure.yml). The pipeline is either triggered by a push to the main branch or by manually running the workflow. 
-In order for the pipeline to work, the following secrets must be set in the repository settings:
-
-![img.png](img.png)
-
-The associated values of the aforementioned secret can be retrieved from the Azure portal, under our deployed Function App.
-Click on the **Get publish profile** button and copy/paste the file content into the secret value field.
-
-![img_1.png](img_1.png)
+## GitHub secrets
+Four secrets are required in order for the GitHub Actions Workflow script to deploy the code to the Azure resources. 
+As may be observed in the [script](.github/workflows/deploy_to_azure.yml), these are:
 
+- **AZURE_CLIENT_ID**: Used to authenticate the service principal in order to deploy the static web app
+- **AZURE_SUBSCRIPTION_ID**: Used to authenticate the service principal in order to deploy the static web app
+- **AZURE_TENANT_ID**: Used to authenticate the service principal in order to deploy the static web app
+- **PUBLISH_PROFILE**: Used to deploy our two functions to the Azure Function App
 
+![img_1.png](images/img_1.png)