05-web-app.md

Web app setup

Previous: Data analysis | Next: Clean up

Build a Docker image

1. Move to the app folder and update the configuration file app/tedapp/config.py using the values you retrieved during database setup:

   Variable	Value
   COSMOSDB_ENDPOINT	Your Cosmos DB endpoint
   COSMOSDB_KEY	Your Cosmos DB primaryMasterKey

   In addition, set SECRET_KEY to the output of the following command:

   import os
   os.urandom(24)

2. Build a Docker image:

   docker build --network=host -t tedapp .

3. Run the Docker image in a container:

   docker run -d --name tedcontainer --network=host tedapp

4. Verify that you can access the app at http://localhost

5. Stop and remove the container:

   docker container stop tedcontainer
   docker container rm tedcontainer

Upload the Docker image to Container Registry

1. Create a new container registry:

   az acr create --name gicampanacr --sku Basic --admin-enabled true

2. Retrieve the name of the login server:

   az acr list --query "[].{acrLoginServer:loginServer}" --output table

3. Log in:

   az acr login --name gicampanacr

4. Tag the Docker image:

   docker tag tedapp gicampanacr.azurecr.io/tedapp:v1

5. Push the Docker image to the container registry:

   docker push gicampanacr.azurecr.io/tedapp:v1

6. Verify that the image was successfully uploaded:

   az acr repository list --name gicampanacr --output table

Run the app on App Service

1. Create an App Service plan:

   az appservice plan create --name gicampan-service-plan --is-linux --sku B1

2. Create a Web App:

   az webapp create --name gicampan-ted-explorer \
                    --plan gicampan-service-plan \
                    --deployment-container-image-name gicampanacr.azurecr.io/tedapp

3. Retrieve your Container Registry credentials:

   ACR_CREDENTIALS=$(az acr credential show --name gicampanacr)
   ACR_USERNAME=$(echo $ACR_CREDENTIALS | jq -r '.username')
   ACR_PASSWORD=$(echo $ACR_CREDENTIALS | jq -r '.passwords[0].value')

4. Pass the credentials to the Web App:

   az webapp config container set --name gicampan-ted-explorer \
                                  --docker-custom-image-name gicampanacr.azurecr.io/tedapp:v1 \
                                  --docker-registry-server-url https://gicampanacr.azurecr.io \
                                  --docker-registry-server-user $ACR_USERNAME \
                                  --docker-registry-server-password $ACR_PASSWORD

5. Access the app at https://gicampan-ted-explorer.azurewebsites.net