Using Azure CLI

Introduction

These are the following components of the Contoso Real Estate application that we will provision in Azure:

graph LR
    APIM[API Management]
    P[portal.contoso.app]
    B[blog.contoso.app]
    C[cms.contoso.app]
    ACR[Container Registry]
    SA[Storage Account]
    BLOB[Blob Container]
    AF[Azure Functions]
    CA_BLOG[Azure Container Apps]
    CA_CMS[Azure Container Apps]
    SWA[Static Web Apps]
    DOCKER_BLOG[Docker Image Blog]
    DOCKER_CMS[Docker Image CMS]
    DB_POSTGRES[PostgreSQL Database]
    DB_MONGO[MongoDB Database]

    User ---> B
    User --> C
    User --> P

    B --> CA_BLOG --> APIM 
    C --> CA_CMS --> APIM

    APIM  --> ACR
    
    ACR --> DOCKER_BLOG
    ACR --> DOCKER_CMS --> DB_POSTGRES
        
    APIM --> SA
    APIM --> AF

    SA --> BLOB

    P --> SWA
    SWA --> APIM

    AF ---> DB_MONGO
    AF ----> DB_POSTGRES

Loading

Prerequisites

• Azure subscription
• Azure CLI
• PostgreSQL client
• MongoDB client

Log in to Azure.

az login

Set the default subscription.

az account set --subscription <subscription-id>

Create a resource group for the Contoso Real Estate app.

az group create --name contoso-real-estate --location westus

Create the databases

Create a PostgreSQL database

The PostgreSQL database will be used by the CMS application to store blog entries and listings data. The Portal applications will connect to the same database (in readonly mode) to read listing data. The blog will access the database.

1. Create a PostgreSQL flexible server:

DATABASE_PASSWORD=<password>
az postgres flexible-server create --name contosopostgres --resource-group contoso-real-estate --location westus2 --admin-user postgres --admin-password $DATABASE_PASSWORD --sku-name Standard_B1ms --version 12 --tier Burstable

Once the server is created, you can test the connection to the server using the following command:

az postgres flexible-server connect --name contosopostgres --admin-user postgres --interactive

2. Next, we need to create a database for the CMS application:

az postgres flexible-server db create --server-name contosopostgres --database-name strapi  --resource-group contoso-real-estate

We can then test the connection to the database using the following command:

psql -h contosopostgres.postgres.database.azure.com -U postgres -d strapi

Please write down the following values, we will need them later:

• Server hostname: contosopostgres.postgres.database.azure.com
• Database name: strapi
• Database username: postgres
• Database password: $DATABASE_PASSWORD

Create a MongoDB database

The MongoDB database will be used by the Azure Functions (the API of the Portal application) to store users sessions and user data, such as favorites and payment information.

1. Create a Cosmos account for MongoDB:

az cosmosdb create --name contosomongoaccount --resource-group contoso-real-estate --kind MongoDB --server-version 4.0 --default-consistency-level Eventual --locations regionName="eastus2" failoverPriority=0 isZoneRedundant=False --capabilities EnableServerless

2. Create a MongoDB API database:

az cosmosdb mongodb database create --name contosoportal --account-name contosomongoaccount --resource-group contoso-real-estate

3. Fetch the connection string for the MongoDB database:

MONGO_CONNECTION_STRING=$(az cosmosdb keys list --name contosomongoaccount --resource-group contoso-real-estate --type connection-strings --query connectionStrings[0].connectionString --output tsv)

Please write down the following values, we will need them later:

• Database name: contosoportal
• Database connection string: $MONGO_CONNECTION_STRING

Create resources for the Portal application

Create an Azure Static Web Apps resource for the Portal app (without a GitHub integration):

az staticwebapp create --name contoso-portal --resource-group contoso-real-estate

Note: We will deploy the Portal application using the SWA CLI.

Create resources for both the Blog and the CMS applications

In order to deploy the Blog and CMS applications, we need to create an Azure Container Apps resource for each application. Also, we need to create a private container registry to store the Docker images for the Blog and CMS applications. Lastly, to upload image assets, we will create a Azure Storage Account and a Blob Container.

1. Create a private container registry:

az acr create --name contosoacr --resource-group contoso-real-estate --sku Basic

2. Fetch the ACR access token and login to the ACR:

ACR_TOKEN=$(az acr login --name contosoacr --expose-token --output tsv --query accessToken)

3. We need to login to ACR before we can create the Azure Container Apps resource. We will use the ACR access token to login to the ACR.

echo $ACR_TOKEN | docker login contosoacr.azurecr.io --username "00000000-0000-0000-0000-000000000000" --password-stdin

Create storage account

1. Create a storage account:

az storage account create --resource-group contoso-real-estate --name contosostorage --location eastus2 --sku Standard_LRS

2. Fetch the storage account key so we can create a blob container:

SAS_KEY=$(az storage account keys list --account-name contosostorage --query "[?keyName=='key1'].value" --output tsv)

3. Create a blob container:

az storage container create --name contosostorage-uploads --public-access blob --account-key $SAS_KEY --account-name contosostorage

Note: You might get security warnings when you enable public access to the blob container. Please refer to this article for more information.

Make sure to note the following values, we will need them later:

• Storage account name: contosostorage
• Storage account key: $SAS_KEY
• Blob container name: contosostorage-uploads
• Blob container URL: https://contosostorage.blob.core.windows.net/contosostorage-uploads
• Blob container CDN URL: https://contosostorage.blob.core.windows.net/contosostorage-uploads

Create resources for the CMS application

1. Let's build the CMS Docker image and push it to the ACR:

docker build -t contosoacr.azurecr.io/cms:v1 .
docker push contosoacr.azurecr.io/cms:v1

2. (optional) To validate that the CMS Docker image is working as expected, we can run the CMS Docker image locally:

docker run -p 1337:1337 --env-file .env contosoacr.azurecr.io/cms:v1

Then navigate to http://localhost:1337/admin to access the CMS application.

Note: On Windows, if you have issues binding to port 1337, try using a different port such as 8080 or higher.

3. We are ready to create the Azure Container Apps resource for the CMS application, but before we do that, we need to create an environment for Container Apps:

az containerapp env create --name contosocmsenv --resource-group contoso-real-estate --location eastus2

4. Create the Azure Container Apps resource for the CMS application:

DATABASE_USERNAME=""
DATABASE_PASSWORD=""
DATABASE_HOST=""

az containerapp up \
    --name contosocms \
    --resource-group contoso-real-estate \
    --environment contosocmsenv \
    --image contosoacr.azurecr.io/cms:v1 \
    --target-port 1337 \
    --ingress 'external' \
    --registry-server contosoacr.azurecr.io \
    --registry-username "00000000-0000-0000-0000-000000000000" \
    --registry-password $ACR_TOKEN \
    --query properties.configuration.ingress.fqdn \
    --secrets   'databaseusername=$DATABASE_USERNAME' \
                'databasepassword=$DATABASE_PASSWORD' \
    --env-var   'DATABASE_HOST=$DATABASE_HOST' \
                'DATABASE_PORT=5432' \
                'DATABASE_NAME=postgres' \
                'DATABASE_SSL=true' \
                'DATABASE_USERNAME=secretref:databaseusername' \
                'DATABASE_PASSWORD=secretref:databasepassword'

At this point, the CMS application is deployed and accessible at the URL returned by the command above. Make sure to note the URL as we will need it later. It should look something like https://contosocms.<random>.<region>.azurecontainerapps.io.

Create resources for the Blog application:

1. Let's build the Blog Docker image and push it to the ACR:

docker build -t contosoacr.azurecr.io/blog:v1 .
docker push contosoacr.azurecr.io/blog:v1

Note: if you have issues pushing the image to the ACR, make sure to login to the ACR before pushing the image.

2. (optional) To validate that the Blog Docker image is working as expected, we can run the Blog Docker image locally:

docker run -p 3000:3000 --env-file .env contosoacr.azurecr.io/blog:v1

Then access the application at http://localhost:3000.

Note: On Windows, if you have issues binding to port 3000, try using a different port such as 8080 or higher.

3. We are ready to create the Azure Container Apps resource for the Blog application, but before we do that, we need to create an environment for Container Apps:

az containerapp env create --name contosoblogenv --resource-group contoso-real-estate --location eastus2

4. Create the Azure Container Apps resource for the Blog application:

# The url returned when deploying the CMS application
NEXT_PUBLIC_STRAPI_API_URL="https://contosocms.<random>.<region>.azurecontainerapps.io" 

az containerapp up \
    --name contosoblog \
    --resource-group nv-contoso-deployments \
    --environment contosoblogenv \
    --image nvstrapidev.azurecr.io/blog:v1 \
    --target-port 3000 \
    --ingress 'external' \
    --registry-server contosoacr.azurecr.io \
    --registry-username "00000000-0000-0000-0000-000000000000" \
    --registry-password $ACR_TOKEN \
    --query properties.configuration.ingress.fqdn \
    --env-vars 'NEXT_PUBLIC_STRAPI_API_URL=$NEXT_PUBLIC_STRAPI_API_URL'

Then access the application at the URL returned by the command above, that looks like https://contosoblog.<random>.<region>.azurecontainerapps.io.