Az-204 - Lab 1 to Lab 10

Lab 01 - Build a web application on Azure platform as a service offering

For complete instruction please visit microsoft learn github here we will do the following:

• Creating a web application on Azure by using the PaaS model.

• Uploading existing web app files by using the Apache Kudu zip deployment option.

• Viewing and testing the newly deployed web application.

Lab Scenario

1. Create a storage account of imgstor50403225 and go to the resource > Access keys > copy a Connection string to Notepad then

2. Go to the Storage Account > Containers > + Container > name it imagesupload blob

3. Create a web App (API) of imgapi50403225 with runtime of .net 8 LTS

4. Configure the web app to storage account using the connection string from notepad

5. Deploy the API with openning vs code and the folder downloaded from this location: https://github.com/MicrosoftLearning/AZ-204-DevelopingSolutionsforMicrosoftAzure/tree/master/Allfiles/Labs/01/Starter/API

6. Enter the following CLI command:

az login
az webapp list --resource-group ManagedPlatform-lod50403225 --query "[?starts_with(name, 'imgapi')].{Name:name}" --output tsv
cd C:\Allfiles\Labs\01\Starter\API
az webapp deployment source config-zip --resource-group ManagedPlatform-lod50403225 --src api.zip --name <your-api-name>

7. To create Front-End Web App Repeat Web App creation:

• Name: imgweb50403225

• Use existing plan: ManagedPlan

• Same stack/region/OS

• Disable Insights, then Review + create > Create.

8. To configure Front-End Go to app > Configuration > + New application setting:

• • Name: ApiUrl

    • Value: Your previously copied API URL (with https://)

    • Click Save.

9. To deploy Front-End, In VS Code > Open Folder: C:\Allfiles\Labs\01\Starter\Web.

10. In terminal:

az login
az webapp list --resource-group ManagedPlatform-lod50403225 --query "[?starts_with(name, 'imgweb')].{Name:name}" --output tsv
cd C:\Allfiles\Labs\01\Starter\Web
az webapp deployment source config-zip --resource-group ManagedPlatform-lod50403225 --src web.zip --name <your-web-name>

11. To test the App, Browse to your front-end app, You should see grilledcheese.jpg in the gallery. Upload banhmi.jpg using the UI. Refresh if needed.

    ---