Static site image content is royalty free and available for any use through Pexels, see credits.txt but has been modified to include:
- Desktop site with full size images.
- Mobile site with compressed size images.
- CSS objects on a storage account leveraging static website feature.
- Script to automate CDN sample website deployment (see below).
1. Use Azure Cloud Shell
Use https://shell.azure.com/ to execute the steps below. Make sure shell is using Bash because sequence below does not work on CLI running on PowerShell.
#!/bin/bash
#1. Defined variables. By default generates random Webapp name on Resource Group CDN-LAB. You may change mywebapp$RANDOM or RG to any name you wish.
Webappname=mywebapp$RANDOM
RG=CDN-LAB
2. Build storage and static website to store CSS objects
az group create --location eastus --name $RG
az storage account create --location eastus --name $Webappname --resource-group $RG --kind "StorageV2" --sku "Standard_LRS"
az storage blob service-properties update --account-name $Webappname --static-website
3. Clone Git Hub repository to local cloud shell and change index.html to specify CSS objects on Static Website on Storage Account
mkdir quickstart
cd $HOME/quickstart
git clone https://github.com/dmauser/webapp-cdn-sample.git
cd webapp-cdn-sample
strurl=https://"$Webappname".z13.web.core.windows.net
sed -i "s#storage-account-url#$strurl#g" index.html
4. Upload CSS objects to Static Website on Storage Account
az storage blob upload-batch -s static -d \$web --account-name $Webappname
5. Deploy AppService Plan and Webapp
az appservice plan create --name $Webappname-plan --resource-group $RG --sku B1
az webapp create --name $Webappname --resource-group $RG -p $Webappname-plan
az webapp up --location eastus --name $Webappname --resource-group $RG --html -p $Webappname-plan
6. Use results of the following command into a browser to see the web app
echo https://$Webappname.azurewebsites.net
echo Go to Azure Portal and under $RG you will see all created resources.
1. Delete CDN-Storage used to store CSS objects on static website
az group delete --name $RG
2. Remove Git deployment from Cloud Shell drive
cd $HOME
rm -r quickstart --force