Azure Flask Applicaiton

app.py

# Basic Flask Application

from flask import Flask, render_template
import os
import random

app = Flask(__name__)

# list of cat images
images = [
    "https://firebasestorage.googleapis.com/v0/b/docker-curriculum.appspot.com/o/catnip%2F0.gif?alt=media&token=0fff4b31-b3d8-44fb-be39-723f040e57fb",
    "https://firebasestorage.googleapis.com/v0/b/docker-curriculum.appspot.com/o/catnip%2F1.gif?alt=media&token=2328c855-572f-4a10-af8c-23a6e1db574c",
    "https://firebasestorage.googleapis.com/v0/b/docker-curriculum.appspot.com/o/catnip%2F10.gif?alt=media&token=647fd422-c8d1-4879-af3e-fea695da79b2",
    "https://firebasestorage.googleapis.com/v0/b/docker-curriculum.appspot.com/o/catnip%2F11.gif?alt=media&token=900cce1f-55c0-4e02-80c6-ee587d1e9b6e",
    "https://firebasestorage.googleapis.com/v0/b/docker-curriculum.appspot.com/o/catnip%2F2.gif?alt=media&token=8a108bd4-8dfc-4dbc-9b8c-0db0e626f65b",
    "https://firebasestorage.googleapis.com/v0/b/docker-curriculum.appspot.com/o/catnip%2F3.gif?alt=media&token=4e270d85-0be3-4048-99bd-696ece8070ea",
    "https://firebasestorage.googleapis.com/v0/b/docker-curriculum.appspot.com/o/catnip%2F4.gif?alt=media&token=e7daf297-e615-4dfc-aa19-bee959204774",
    "https://firebasestorage.googleapis.com/v0/b/docker-curriculum.appspot.com/o/catnip%2F5.gif?alt=media&token=a8e472e6-94da-45f9-aab8-d51ec499e5ed",
    "https://firebasestorage.googleapis.com/v0/b/docker-curriculum.appspot.com/o/catnip%2F7.gif?alt=media&token=9e449089-9f94-4002-a92a-3e44c6bd18a9",
    "https://firebasestorage.googleapis.com/v0/b/docker-curriculum.appspot.com/o/catnip%2F8.gif?alt=media&token=80a48714-7aaa-45fa-a36b-a7653dc3292b",
    "https://firebasestorage.googleapis.com/v0/b/docker-curriculum.appspot.com/o/catnip%2F9.gif?alt=media&token=a57a1c71-a8af-4170-8fee-bfe11809f0b3",
]


@app.route("/")
def index():
    url = random.choice(images)
    return render_template("index.html", url=url)


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=int(os.environ.get("PORT", 80)))

azureContainerDeploy.ps1

# ------------------------- VARIABLES -------------------------
$localImageTag = 'flaskbasicshimu'
$remoteImageName = 'flaskbasicshimu'
$myResourceGroup = 'myResourceGroup'
$location = 'eastus'
$acrName = 'flasktutregistry'
$acrloginServer = $acrName + '.azurecr.io'
$version = 'v1'
$remoteDockerTag = $acrloginServer + '/' + $remoteImageName + ':' + $version
$defaultPort = 80
$extraPort = 5000
$aciDnsLabel = 'myflaskapphimu'

$servicePrincipalName = 'acrdockersp'

# -------------------------------------------------------------

# ---------------------------- BUILD IMAGE -----------------------
# Step 1: Let's build a docker image
docker build . -t $localImageTag

# Step 2: see all the docker images
docker images

# Step 3: Run the container locally to map computer's 8000 port to 80 port
docker run -d -p 8080:80 $localImageTag
# -----------------------------------------------------------------

# ----------------------- CREATE CONTAINER REGISTRY --------------------
# Create resource group
az group create --name $myResourceGroup --location $location
# This will create a new resource group in azure. Resource groups are meant for handling
# mulitple resources together.

# Create an azure container registry
az acr create --resource-group $myResourceGroup --name $acrName --sku Basic
# we create a new azure container registry under the resource group $myResourceGroup
# Note the JSON. Save it somewhere. It will be of help

# login to container registry
az acr login --name $acrName
# A "Login succeeded" message appears

# Tag Container Image 1 - get the full login server name
$acroginServer = $(az acr show --name $acrName --query loginServer)
# ^ Copy the loginServerName

# Tag Container Image 2 - check local docker images
docker images

# Tag Container Image 3 - tag remote image with local image
docker tag $localImageTag $remoteDockerTag

# Push image to azure container registry
docker push $remoteDockerTag

# List all azure container registry images and view tags
az acr repository list --name $acrName --output table
az acr repository show-tags --name $acrName --repository $remoteImageName --output table
# ----------------------------------------------------------------------

# ------------------ Deploy the container using the Azure CLI -------------
# Create a service-principal-id and service-principal-password
New-AzADServicePrincipal -DisplayName $servicePrincipalName
$acrRegistryId = (az acr show --name $acrName --query id --output tsv)
$spAppId = (az ad sp show --id http://$servicePrincipalName --query appId --output tsv)
$spAppPassword = (az ad sp create-for-rbac --name http://$servicePrincipalName --scopes $acrRegistryId --role acrpull --query password --output tsv)

# Finally Deploy the container
az container create `
--resource-group $myResourceGroup `
--name $remoteImageName --image $remoteDockerTag `
--cpu 1 --memory 1 `
--registry-login-server $acrloginServer `
--registry-username $spAppId `
--registry-password $spAppPassword `
--dns-name-label $aciDnsLabel `
--ports $defaultPort $extraPort 

# View Deployment progress
az container show --resource-group $myResourceGroup --name $remoteImageName --query instanceView.state

# View Application Logs
$domain = $(az container show --resource-group $myResourceGroup --name $remoteImageName --query ipAddress.fqdn)

Start ('http://' + ($domain.Substring(1, $domain.Length - 2)))
# --------------------------------------------------------------------------

Dockerfile

# This is the base image that we will be using (python:3 that is)
FROM python:3

# set a directory for the app
WORKDIR /usr/src/app

# copy all the files to the container
COPY . .

# install dependencies
RUN pip install --no-cache-dir -r requirements.txt

# tell the port number the container should expose
# EXPOSE 80

# run the command
CMD ["python", "./app.py"]

index.html

<html>
  <head>
    <style type="text/css">
      body {
        background: black;
        color: white;
      }
      div.container {
        max-width: 500px;
        margin: 100px auto;
        border: 20px solid white;
        padding: 10px;
        text-align: center;
      }
      h4 {
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h4>Cat Gif of the day</h4>
      <img src="{{url}}" />
      <p><small>Courtesy: <a href="http://www.buzzfeed.com/copyranter/the-best-cat-gif-post-in-the-history-of-cat-gifs">Buzzfeed</a></small></p>
    </div>
  </body>
</html>