Updated pipeline to use service principal with federated credential to authenticate with Azure in order to deploy both the static web app

Author: hvalfangst

.github/workflows/deploy_to_azure.yml

@@ -10,6 +10,8 @@ env:
   AZURE_FUNCTIONAPP_PACKAGE_PATH: '.'
   PYTHON_VERSION: '3.10'
   STORAGE_ACCOUNT_NAME: 'hvalfangststorageaccount'
+  FUNCTION_APP_NAME: 'hvalfangstlinuxfunctionapp'
+  RESOURCE_GROUP: 'hvalfangstresourcegroup'
 
 jobs:
   build-function:
@@ -48,6 +50,7 @@ jobs:
     environment:
       name: 'Production'
       url: ${{ steps.deploy-to-function.outputs.webapp-url }}
+
     steps:
       - name: Download artifact from build job
         uses: actions/download-artifact@v4
@@ -57,20 +60,16 @@ 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
         with:
           app-name: 'hvalfangstlinuxfunctionapp'
           slot-name: 'Production'
           package: ${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}
-          scm-do-build-during-deployment: true
+          publish-profile: ${{ secrets.PUBLISH_PROFILE }}
           enable-oryx-build: true
+          scm-do-build-during-deployment: true
 
   build-react:
     runs-on: ubuntu-latest
@@ -103,6 +102,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 +114,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,17 @@
 # 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.
+The aim of this repository is to demonstrate how to deploy a [static website](client/src/App.js) written in React to a [Storage Blob](https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website). The
+hosted SPA allows users to upload CSV files containing demographic and financial data about individuals. The files are uploaded to a storage blob by calling an HTTP-triggered Azure Function with the appropriate output bindings. 
+Once the CSV has been uploaded to the storage blob, another, blob-triggered Azure Function calculates correlations between various variables, such as experience, state, gender, and income. 
+The computed statistics are then stored in a new blob container, which is used to serve the results to the user.
+These two 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 website is hosted directly from a storage blob, as our associated storage container has been configured to serve static websites in our resource provisioning script. 
+Thus, deploying the website is simply a matter of uploading the static files to the designated blob container.
 
 
 ## Requirements
@@ -18,8 +24,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 +47,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)