Flask + MongoDB: An "Azure Web App For Dummies" guide

Question

After spending many hours reading dozens of guides, I finally got into a working setup, and decided to publish the instructions here.

The problem: I have a working flask app running in my machine. How do I launch it as a web app using Microsoft Azure platform?

Answer 1

So here is my guide. I hope it will help others!

Steps for launching a new web app under Azure:

0. Login to Azure

Goto Azure portal https://portal.azure.com/ and sign-in using your Microsoft account.

1. Create a resource group:

• Home > create a resource > Resource group
• fill in: subscription(Free Trial), name (something with _resgrp), Region (e.g. West Europe)

2. DB:

• Home > create a resource > create Azure Cosmos DB > Azure Cosmos DB for MongoDB
• fill in: subscription(Free Trial), resource group (see above), account name (something with _db), Region (West Europe), [create]
• goto Home > db account > connection strings, copy line marked "PRIMARY CONNECTION STRING" and keep it aside.

3. App:

• Home > create a resource > create Web App
• fill in: subscription(Free Trial), resource group (see above), name (will appear in the site url!), publish: code, run time stack: python 3.9, region: West Europe, plan: Basic B1 ($13/mon), [create]
• Home > our-web-app > configuration > Application settings > Connection strings click "New Connection strings" and set MYDB with the connection string from step 2.

4. Code:

We will use a nice "to-do list" minimalist app published by Prashant Shahi. Thank you Prashant!

• Clone code from https://github.com/prashant-shahi/ToDo-List-using-Flask-and-MongoDB into some local folder.
• Delete everything but app.py, static, templates, requirements.txt
• Edit requirements.txt so that Flask appears without "==version", because an older version is there by default.
• create wsgi.py with:

from app import app
if __name__ == '__main__':
    app.run()

• Create go.sh with the following code. These commands are will setup the environment and then start gunicorn to respond to web requests. Some of these commands are used for debug only.

# azure webapp: called under sh from /opt/startup/startup.sh
set -x
ls -la
pip install -r /home/site/wwwroot/requirements.txt
echo "$(pwd) $(date)"
ps aux
gunicorn --bind=0.0.0.0 --log-level=debug --timeout 600 wsgi:app

• edit app.py:

  • replace first 3 lines about db connection with: (btw, MYDB comes from steps 3)

CON_STR = os.environ['CUSTOMCONNSTR_MYDB']
client = MongoClient(CON_STR)    #Configure the connection to the database

• after app = Flask(name) add these lines for logging:

if __name__ != '__main__':
    gunicorn_logger = logging.getLogger('gunicorn.error')
    app.logger.handlers = gunicorn_logger.handlers
    app.logger.setLevel(gunicorn_logger.level)

• add first line under def about(): #clicking [about] in the app will dump environment vars to the logs)

app.logger.debug('\n'.join([f'{k}={os.environ[k]}' for k in os.environ.keys()]))

5. Ftp:

• Home > our-web-app > Deployment Center > FTPS Ceredentials
• Open FileZilla, top-left icon, [new site]
• copy paste from web to FileZilla: FTPS endpoint into host, user to username, password to password, [connect]
• upload the content (not the parent!) of the folder from step 4 to the remote path /site/wwwroot

6. Launch:

• Home > our-web-app > configuration > General settings > Startup Command
• paste this: sh -c "cp go.sh go_.sh && . go_.sh"

7. Test:

• Browse to https://[our-web-app].azurewebsites.net

8. Logging / debugging:

• Install Azure CLI (command line interface) from https://learn.microsoft.com/en-us/cli/azure/install-azure-cli
• Open cmd and run

az login
# turn on container logging (run once):
az webapp log config --name [our-web-app] --resource-group [our-step1-group] --docker-container-logging filesystem
# tail the logs:
az webapp log tail --name [our-web-app] --resource-group [our-step1-group]

9. Kudu SCM management for the app

(must be logged into Azure for these to work):

• Show file/dir: https://[our-web-app].scm.azurewebsites.net/api/vfs/site/[path]
• Downloads full site: https://[our-web-app].scm.azurewebsites.net/api/zip/site/wwwroot
• Status: https://[our-web-app].scm.azurewebsites.net/Env
• SSH: https://[our-web-app].scm.azurewebsites.net/webssh/host
• Bash: https://[our-web-app].scm.azurewebsites.net/DebugConsole
• More on REST API here: https://github.com/projectkudu/kudu/wiki/REST-API

10. Notes:

I don't recommend on using automatic deployment from GitHub / BitBucket, unless you have Azure's support available. We encountered many difficulties with that.

Any comments are most welcome.