Serverless web application

This sample references an architecture of a serverless web application. The application serves static Angular.JS content from Azure Blob Storage (Static Website), and implements REST APIs for CRUD of a to do list with Azure Functions. The API reads data from Cosmos DB and returns the results to the web app. The GitHub workflow uses Azure Bicep for Infrastructure as Code to deploy and configure Azure resources.

Security

The application uses MSAL.js (1.x) with Implicit flow to authenticate users. You can choose between Implicit flow and Authorization code flow for Single-page application (SPA) and API pattern. However, Authorization code flow is a recommended flow as it is more secure. The built-in authentication on Azure Functions is enabled for Authentication and authorization. In order for the authentication to work, the GitHub workflow uses AZ CLI to register the applications on Azure Active Directory and configure permissions between the SPA and API. Both Azure API Manager and Functions also implement CORS policy to allow only traffic from the client origin to access the API. Azure Functions has network access restriction is enabled to allow only traffic from API Management's IP address to make the request. To connect to Cosmos DB, Azure Functions uses Managed Identity to read connection strings stored in Azure Key Vault.

Azure Functions HTTP Trigger and OpenAPI documents

On APIM, there are two approaches to import Azure Functions as API.

1. Azure backend integration.

   This is done through adding backend services of your Functions. This uses Functions' app key to access functions. The Bicep module apimAPI.bicep demonstrates how deploy this.

2. OpenAPI specification.

   By default, Azure Functions HTTP Trigger does not follow OpenAPI standard. OpenAPI extension is required to enable OpenAPI documents. The Bicep module apimOpenAPI.bicep demonstrates how deploy this.

Prerequisites

1. GitHub account and repository.
2. Azure subscription.
3. User-assigned managed identity (MSI) with Contributor role. This will be used for executing Deployment Scripts in Bicep.
4. A Service Principal with Contributor role at subscription scope. This is the identity that will be used to access the Azure resources from GitHub Action. If you don't have a Service Principal, create one by following these steps. The Service Principal also requires Read/Write permissions to Azure Graph API.

About sample workflows:

This repo contains three GitHub workflows:

• Create Azure Resource (IaC) workflow validates Bicep files and creates Azure resources necessary to host the sample solution. The Bicep file will create the following resources as a pre-requisite to the next two workflows:

  • Azure API Management.
  • Azure CDN.
  • Azure Cosmos DB for MongolDB.
  • Azure Functions (Windows).
  • Azure Key Vault option to BYO.
  • Azure Storage Account for hosting Static Website.

• Build and publish .NET workflow build .NET Core application and publish it to Azure Function. It also import the HTTP Trigger Functions as API's to the API Management using Bicep. This requires that Functions must be able to generate an OpenAPI specification.

• Build and publish Angular (SPA) workflow build Angular application and publish it to Azure Storage Account as a static website. This workflow will register both client and API applications in Azure Active Directory tenant of your subscription for authentication. It also purge Azure CDN to refresh static web content.

Setup an end-to-end CI/CD workflows:

1. Fork this repo to your GitHub account.
2. Clone the copy repo to your local machine.
3. Edit workflow; modify parameter values.
4. Optional parameters in Bicep file can be edited.
5. Commit changes will automatically trigger the workflow to deploy Azure resources and applications.

References

• Azure Bicep
• Protect a web API backend in Azure API Management
• Host a RESTful API with CORS in Azure App Service
• Authentication and Authorization flow single-page application
• Azure Functions and App Services built-in authentication
• API Management cross domain policies
• Azure Functions and App Services network access restriction
• Use Key Vault from App Service with Azure Managed Identity

License

See LICENSE.

Contributing

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments. More details on how to contribute see contributing guide.