- Container App Workshop
- Steps
- Create a Resource Group
- Create a SQL database for partners backend API
- Create a Key Vault
- Store the database credentials in Key Vault
- Create a SPN
- Create ACR for Docker Images
- Dockerizing a Node.js Application
- Create a Container App
- Store SPN details in Container App Secrets
- Reference Secrets with Environment variables
- Check your application
- Hosting Front End application on Azure Blob Storage
- Azure Subscription
- Azure CLI
- Docker CLI
- Node 16
- Visual Studio (Community/Enterprise)
- Go to Azure Portal
- Create a resource group - containerappdemo in your subscription
- Go to Azure Portal
- Create a resource - SQL Database
Subscription- Choose your subscriptionResource Group- Choose containerappdemo resource groupDatabase Name- Choose partnersdbServer- Hit Create newServer name- Choose unique server name for exampleLocation- Choose West EuropeAuthentication method- Use SQL authentication and choose admin login and password- Hit Ok
Compute + storage- Choose Configure databaseService tier- select DTU-based purchasing model - Basic- Change to 1 GB Data max size
- Hit Apply
Backup storage redundancy- Choose Locally-redundant backup storage- Click Next: Networking
Connectivity method- Select Public endpoint (For this demo only)- Allow Azure services and resource to access this tier - Yes.
- Add current client IP address - Yes.
- Review + create
- Create
Location- Choose your locationCapacity mode- Provisioned throughputApply Free Tier Discount- Apply if you want discount- Go to your SQL server blade
Public network access- Selected networks -> Add your ip addressAllow Azure services and resources to access this server- Check
- Go to your database
- Choose Query editor in database blade
- Login with sql server admin credentials
- In Query Editor create partners table:
CREATE TABLE Partners ( id int IDENTITY(1,1) PRIMARY KEY, email varchar(255) UNIQUE, name varchar(255), project varchar(255), ); - In Query Editor create few rows:
INSERT INTO Partners (email, name, project) VALUES ('Partner1@mtc.com', 'Partner One', 'Azure Cloud') INSERT INTO Partners (email, name, project) VALUES ('Partner2@mtc.com', 'Partner Two', 'Microsoft Office 365') INSERT INTO Partners (email, name, project) VALUES ('Partner3@mtc.com', 'Partner Three', 'Microsoft Power Apps')
- Go to Azure Portal
- Create a Key Vault
- In Key Vault details:
Subscription- Choose your subscriptionResource Group- Choose containerappdemo resource groupKey vault name- Choose a unique key vault nameRegion- West EuropePricing tier- StandardDays to retain deleted values- 7
- Review + Create
- Hit Create
- Go to Your Key Vault
- In Key Vault Blade select Secrets
- Select Generate/Import
Name- dbpasswordSecret value- Enter your database password
- Select Generate/Import
Name- dbuserSecret value- Enter your database user
- Select Generate/Import
Name- dbserverSecret value- Enter your database server url - for example .database.windows.net
- Select Generate/Import
Name- dbdatabaseSecret value- Enter your database name - for example partnersdb
- Hit Create
- Open a Cloud Shell
- Create a Service Principal with a scope for your resource group
az ad sp create-for-rbac \ --name SERVICE-PRINCIPAL-NAME \ --role Contributor \ --scopes "/subscriptions/<SUBSCRIPTION_NAME_OR_ID>/resourceGroups/containerappdemo" - Capture and save the service principal output results of the command to use later
{ "appId": "YOUR-APP-ID-VALUE", "displayName": "YOUR-SERVICE-PRINCIPAL-DISPLAY-NAME", "name": "YOUR-SERVICE-PRINCIPAL-NAME", "password": "!@#$%", "tenant": "YOUR-TENANT-ID" } - Give your service principal access to your keyvault
az keyvault set-policy \ --subscription REPLACE-WITH-YOUR-SUBSCRIPTION-NAME-OR-ID \ --resource-group RESOURCE-GROUP-NAME \ --name "REPLACE-WITH-YOUR-KEY-VAULT-NAME" \ --spn YOUR-SERVICE-PRINCIPAL-APP-ID \ --secret-permissions get list - This service principal will only be able to list all secrets or get a specific secret. You can see this service principal in the Azure portal for your Key Vault
- Go to Azure Portal
- Create a Container Registry
- In Registry details:
Subscription- Choose your subscriptionResource Group- Choose containerappdemo resource groupRegistry Name- Choose a unique nameLocation- Choose West EuropeSKU- Standard
- Review + create
- Create
- Open Cloud Shell
- Clone the git repo
- Open the project - ./nodejs_containerapp_backend_partners_api
- Change the configuration in database/connection.js file
- Build the image and push it to your ACR:
az acr build --image partners:0.1 --registry <registryName> --file Dockerfile .
- Go to Azure Portal
- Create a Container App
- In Container App details:
Subscription- Choose your subscription- Choose containerappdemo resource group
Container app name- partnersRegion- Choose West EuropeContainer Apps Environment- Create newEnvironment name- partnersenvZone redundancy- Disabled- Hit Create
- Hit Next: App settings
- Uncheck - Use quickstart image
- Container Details:
Name- partnersImage source- Azure Container RegistryRegistry- Select the registry you created in the last step ( If you get an Error "Cannot access ACR because admin credentials on the ACR are disabled - Go to ACR and enbaled it - In ACR hit Update and check the Admin user box and hit Save)- Select the image: partners
- Select the Image tag
Application ingress settings-- Check the Ingress Options
- Check the Accepting traffic from anywhere
Target port- 8080
- Hit Create
- Open your container app
- In Container App blaid select Secrets
- Click +Add
Key- azureclientidValue- Client Id- Click Add
- Click +Add
Key- azuretenantidValue- Tenant Id- Click Add
- Click +Add
Key- azureclientsecretValue- Client Id Secret- Click Add
- Open your container app
- In Container App blaid select Containers
- Choose Edit and Deploy
- Choose your container image
- Go down to Environment variables
- Reference an environment variable to a secret
- azureclientid
- azuretenantid
- azureclientsecret
- Hit Save
- Hit Create
- You should run the same revision that you have set your environment variables to
- Open your container app
- In Container App blaid select Overview
- Open Application Url
- Go to /api/partners

- Go to Azure Portal
- Create a resource - Storage account
- In Storage account details:
Subscription- Choose your subscriptionResource Group- Choose containerappdemo resource groupStorage account name- Choose a unique nameRegion- Choose West EuropeRedundancy- LRS
- Hit Review
- Hit Create
- Go to resource
- In left navigation panel choose Static website
- in Static Website details:
Static website- Enabledindex document name- index.htmlError document path- index.html
- Hit Save
- Copy the Primary Endpoint url
- Go your storage account and select Storage browser
- In Blob containers select $web - It is the place where you upload a website.
- Clone the git repo
- Open the project - ./react_frontend_website_no_authentication
- Edit Api.js file and change the baseUrl to your container app url
- Run
npm install - Run
npm run build- Build a project and store it in a build directory - Upload all files to $web directory in a storage account
- In left navigation panel choose Static website
- Copy the Primary endpoint url and test in your web browser
- Test the Web

