From Zero to Azure with Python and Visual Studio Code

Good afternoon, everyone. Thank you for attending this Session today. May name is dan taylor and i’m The program manager for our python developer tools here at Microsoft. And so what i wanted to take you Through in this theater session is starting from zero, basically An empty folder, and creating a python web app and deploying That to azure, using visual studio code So a few different prerequisites that i have on may machine here That let me do this. I have python 3 installed on my machine I have an azure subscription. I’ve got visual studio code and I also have the get command line tools and i’ll be using docker For the publish I’ll be sharing out the code after this so if you want to Follow awrong the steps on your own go to my github repo and Follow along with the steps. We’ll take three main steps today First we’ll create the app and run it locally using visual studio code Then we’ll dockerize the app and deploy that to azure web apps For containers and then we’ll do a quick change to the code and Redeploy so you get a sense of the full end to end So let’s dive right in and create the app and run it Locally so i’ve got visual studio code here on my laptop This is vanilla visual studio code. I don’t have any extensions Installed so i’ll go ahead and install the extensions i need So i’ll go to the extensions tab here. And the first thing i’m going to Do is install the python extension. The pay thon extension happens To be the most popular downloaded extension on the vs Code marketplace so vs code is a great tool for python I’ll install docker. And then i’m going to install The azure app service extension. All right, so with these three Extensions i’ve got python, docker, azure. Makes sense, right? Okay, so all those extensions are installing i’m going to go Ahead and get my code down from my github repo So i’ve got this empty folder, c chron build, and i’m going to Colon this quickstart teem — colon this quickstart template This is what i do with flash here. I’ll get clone I mentioned my name is dan taylor. Very popular name There was at least dan taylors working at microsoft at one point One was on the same floor as me so i have to use creative github Names so cube it tron is my name Quantum computing bit is what that’s for and i have a flask Web app quickstart This is a basic template that i use and i’ll go to that flask Web app quickstart folder and take a look there I need to install the python packages this app depends on Basically just flask but i want to install the packages in a way That won’t conflict with other packages i’ve installed for Other applications, i may have different versions of packages Other apps depend upon so i’ll create a virtual environment So create a virtual environment on windows, we use py-3 That’s just a quick convenient way to make sure you’re running Python 3. If you have multiple versions Installed on windows on mac or linux just type py-3 I’ll run the virtual environment module, and i’ll create a Virtual environment in a folder named n. So this basically creates a copy Of the python 3 runtime in this n folder. It doesn’t have any packages Installed and i installed the packages may app depends on Those are cop toured in this requirements.Txt file If i run which python it will show if i type python that will Use the global python interpreter It’s frozen up here. So that’s using the global Python interpreter. To use the interpreter in the n Folder i run this m/scripts/activate so it puts This indicator next to my command line Whenever i typo thon it will run python out of that local virtual Environment i’ve created. So now i want to use pip, the Python package manager, install requirements.Txt so that will Install all the requirements that are in that requirements.Txt file This is a common pattern for apps on github that have a requirements.Txt file This is how you pull down all the packages they depend upon So we’ve created our virtual environment locally, and we have Installed our extensions in vs code. We need to reload vs code to Load those extensions so i’ll use a neat trick I just closed vs code. I like to go to the folder that I want to launch out of and type code dot and press enter so that

Launches vs code in this folder with that folder open and i can See all the files i have in here. So a couple neat things, let’s Go ahead and take a look at the app that’s here So this is main.Py. And it’s just a very simple Helloworld flask application that basically just on the home Page returns a string helloworld So import the flask object from the flask module, create the App, define a route and then on that route i return a string and If i run this main.Py file, it will basically start the web server and run it So to run this file i can actually just right click on Main.Py and select run python file in terminal but if i do That it will use the global interpreter. So i can actually switch to the Interpreter that i’ve created in this n folder by clicking on This link here, and lets me pick which python environment i want To use it with vs code so i’ll use the one in the n folder i Just created so i select that. And this will come up when you Have a new python environment. You can just select install to Install and enter. This will give me errors as i Save my files so just click install when you see that and You’ll get it installed. If i run this python file in Terminal it will automatically activate that environment, start The web server and you can see it’s listening on local host on Port 5000. I can control, click on this Link and that opens my helloworld app here in the web Browser and so we’re up and running in that local development environment All right, so just a quick recap here: to clone the app and Create the environment, i clone the repo, i ran the command to Create the virtual environment. I have commands for mac and Linux, they’re slightly different. I installed my requirements, Launched vs code. Just wait till this guy takes a picture Then i installed the extensions, azure app service docker and Python, select the virtual environment, click the link and We’re off to the races. All right, now let’s go ahead And dockerize this and get it deployed to azure app service Okay, so the first step i want to take here, let me just brett Ctrl-c to stop this in the terminal I’ll sign into azure with vs code. To sign into azure it run the Azure sign in command so to run commands in vs code, command Shift p if you’re on a mac and i’m going to run 2001 sign-in Planned so we have a cool sign in mechanism for vs code It copies the sign in code to the clipboard It opens the browser and then i just control v to paste that Code in and i click continue, and now i select my azure Account which is this python demos one and now vs code is Authenticated with azure. The other thing i’m going to do Is create an azure container registry, this is a place that Will host my docker containers when they’re published to azure So if you go to portal.Azure.Com, your portal Page will look like this, when you get a new azure subscription So the first thing i want to do is create a container registry So i click the creator resource button in the left-hand corner So i click create, i’ll search for container Registry. And hit enter That’s going to create that — so i select registry, hit Create. It will ask me what i want to Name it and where i want to put it We’ll call this registry 0 to azure That creates a personal registry key use for this app I’ll put it in a resource group named zero to azure This is a folder for all your azure resources So i’ll also enable the admin users. This allows me to log in with vs Code and let’s bump this down to the basic tier We want the cheapest resource costs here in azure so let’s hit create So that’s going to go off and create this container registry In a resource group called zero to azure And it takes pretty — it will get created pretty quickly We’ll just wait as it creates that resource and deploys, it Should be done here in just a moment Okay, so that deployment succeeded. It created that container registry If i go to my resource groups i can go directly to this registry From go to resource. There’s a resource group created It just has the one container registry in it May app will be deployed here afterwards. So the first thing i want to do Now is get the access key so i can deploy to this container Registry from vs code. So i’ve got the password here,

I’ll click to copy that. I’ll go back to vs code, and i’m Going to type: docker log-in zero to azure.Azure cr.Io It will ask me for a user name to use I’ll just give the network a second hear So i’ll just press enter to enter the default user name Control v to paste in the password, hit enter and push to That container registry from this local folder so i’m going To build the container image now of this app and package it up It will use this docker file. So i’m going to run command Control shift p, docker build image. It will ask me which docker file I want to use. I’ll select that docker file There. And it’s got this default name Hear. I need to prefix it with the Name of may registry, zero to azure.Azure cr.Io This is the name of the version. Right now i’m just using colon Latest as my version. It’s also known as a tag That will build the docker image out of this app using the docker File and i’ll show that docker file in a minute Now i want to push this docker file to the continue registry So in vs code the docker extension added this docker Window to the file explorer here and from here i can browse my Local containers, and there’s that zero to azure container i just created I can right click on that and select push That’s going to go upload this container to azure app service So how many of you here are familiar with Docker? roughly, me, recently i knew What docker was. Conceptually, but i got much More familiar with it recently. So there’s a bunch of images or A bunch of layers of this docker image and it’s pushing all the Different layers. So these layers are actually Defined in a docker file. So with this docker file, i Start with the base image somebody else created, this user Tangelo on a docker hub created a base image and i’ll walk Through with you here what’s part of this base image This image has python 3.6 Installed running on alpine Linux, and this means that the image is small It’s only about 200 megabytes for the full operating system, Compared with a full u bunt image which is about a gigabyte We like smaller images, generally uses less space to That’s good. This has flask pre-installed but It has flask hosted behind an engine x web server You can’t run that development server in production because It’s not built to handle production scale, production Load so with this docker container i have an engine x web Server which talks to flask through this uwsgi protocol Which connects engine x to flask flew a socket. This is a production ready, Production scale web container we can go ahead and use So this is published to that azure container registry Next thing i’m going to do is browse my registries in the Docker extension and i’m going to expand here to see where i Just pushed that image to. Soy got zero to azure.Azure cr.Io I just deployed this flask quickstart image and here’s that Specific version colon latest i created. I can do something really cool With vs code, i select deploy image to azure app service so I’ll click that and it will ask me a bunch of questions and go Ahead and publish this app out to the web It asks me where i want to put it I want to put it in the zero to azure resource group i just Created and i want to create a new app service plan, so this is Like a vm that hosts your container. You can have multiple containers On the same plan. But you only pay for the plan This is a really neat future of app service And then we’ll use the basic tier And then we’ll call it zero to azure as our website name so This runs on zero to azure.Websites.Net Looks like i already created this. Let’s deploy it to a different one Must not have cleaned up before my demo Zero to azure plan. We’ll call it zero to azure 2 So that creates the web app. Resource in azure And okay, so that continue is now deployed I need to set the port number because may docker container Listens on port 8000. I need to tell it what port to listen to So i’ll go to the azure tab. This azure tab was installed by The azure app service plug-in. And i can explore my

Subscription here and see all the apps that i have deployed Zero to azure 2 is the one i just created and here’s the Application settings so i just need to add one setting to tell It what the port is. I’m going to add a new setting We need to name that website underscore port And then set that to 8000. And now we just need to restart This web app, right click restart. It’s going to restart may web app And then after it restarts i can then browse to it Give it a second. It’s finished so right click Browse website Let’s give that a kick. Okay, so there’s my app running In azure app service, helloworld All right. There’s the Clicker. Okay, so just a quick recap First thing we did was signed into azure Pasting the code into the browser Then we created a new azure container registry with that Create a resource button. We set the name for the registry And put it in that zero to azure resource group That’s what created the resource group when i went thank you the step Then we copied the access key for the container registry, and We did docker log-in from the terminal to log into that Then finally we built the image, and pushed it to the container registry And then we right clicked and deployed that image to azure app Service and set the port number. Okay, so in the next couple Minutes i’m going to make a code change and redeploy Now that we have everything set up All right. So everything will be a lot Faster this time. So let’s go back to our Application, and this time i’m going to add a slightly more Interesting url. I’m going to add a template to My flask web app so i create a new folder called templates and I’ll put a new file in here called index.Html and here we’ll Have this return hello and we’ll have it take a parameter name so I’ll pass the name in from the python code so i hit save, hello Name, and let’s go to our main.Py file here And so i’m going to import a method that lets me render these Templates so i’ll import render underscore template Hear i get nice intellisense, and then i’ll define a new route For my app using app.Route, and then we’ll pass in, we’ll put The route at slash name and we’ll have it take a parameter Which is the name we’ll pass to the template so we’ll say hello name And then i just need to do one final call and say that i’m Going to return a template, index.Html and i can just pass Key value arguments for what i want to be passed to the Template so i’ll take the name in from the url Oh, i forgot to define a method Take the name from the url, pass it in, and then pass that along To the template. Okay, so that’s the change of code Now all we need to do is rebuild the docker image, push it again, And then restart the site and we’ll have our new code running So control shift p, docker build image, select that docker file, Zero to azure.Azure.Cr.Io Hit enter. That will go rebuild the docker Image, it will be nice and quick Give it a second to wake up here All right, that’s rebuilt. And this time when i push it Should actually be much quicker because may container registry Already contains the base image i’m using So if i right click push, this will just say all these layers Already exist, and there we go. We’ve pushed our new image And now we just go to our app service tab, right click on that Website, and give it a restart, which will cause it to pull the Latest docker image from may container registry, and we’ll be Able to run that new code. So if i refresh here, Okay, so the site’s up and running I can say: hello. Give it a second

Hello built, so we just deployed a change to our App. Cool All right. Almost at the end hear, so just A quick recap, to redeploy new code after we published the Image the first time we run that build image command We give it the same docker name, push it and restart the site So that’s the basic zero to azure steps Some next things you can do is set up continuous deployment With vsts so you can have a production and staging slot If you want to experiment and dev test you could add Authentication, data services or intelligence apis with azure Cognitive services or machine learning. The code is available here on Github. I’ve got the vs code steps as Well as the command line steps to run through and if you want To stay up to date if anything the python team is doing be sure To follow our blog @ak Ms. Please evaluate the session and I’m around here if you guys have questions