Deploy your website using Python and Flask | Nour Islam Mokhtari | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Deploy your website using Python and Flask

teacher avatar Nour Islam Mokhtari, Deep Learning Engineer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

19 Lessons (1h 38m)
    • 1. Who am I and what are we going to build in this course?

    • 2. What tools will we be using?

    • 3. Why Python and Flask for a simple landing page?

    • 4. Start from a template

    • 5. Preparing our VSCode project

    • 6. Ordering our template files into the right Flask project structure

    • 7. Finishing the code inside our python file

    • 8. Running our Python app with Flask

    • 9. Modifying our HTML files to account for new paths

    • 10. Running our Python app with Gunicorn

    • 11. Docker and how to install it

    • 12. Creating an account on Google Cloud Platform and setting up a project

    • 13. Creating our Dockerfile and adding the necessary lines of code

    • 14. Enabling billing inside our project

    • 15. Connecting to our project from a terminal window

    • 16. Building a docker image using Cloud Build

    • 17. Deploying our app using Cloud Run

    • 18. Updating our app and deploying it again

    • 19. Final project and where to go from here

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class you will learn how to deploy your website on Google Cloud Platform using Python, Flask, Docker and Cloud Run.

I take through the different steps from choosing a template for your website to deploying it on the internet and being able to share it with your friends.

Meet Your Teacher

Teacher Profile Image

Nour Islam Mokhtari

Deep Learning Engineer



My name is Nour-Islam Mokhtari and I am a machine learning engineer with a focus on computer vision applications. I have 3 years of experience developing and maintaining deep learning pipelines. I worked on several artificial intelligence projects, mostly focused on applying deep learning research to real world industry projects. My goal on Skillshare is to help my students learn and acquire real world and industry focused experience. I aim to build courses that can make your learning experience smooth and  focused on the practical aspects of things!

See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Who am I and what are we going to build in this course?: Hello and welcome to my course. And my name is not Islam mortality and I'll be your instructor for this course. So just a quick introduction about myself. So I have two master's degree wanting control and automation, and one in computer vision. And I also have around two, almost three years of experience in machine learning and computer vision. You can find me on LinkedIn and github just by typing in my name. And what we will be building in discourse as a simple website. And we're going to start from a template. And then we will use some very interesting tools like Python Flask and Google Cloud Platform also Docker in order to deploy that website. This is the website that we will be building or we will be deploying. So this template, I took it from a website called templated dot CEO. And what we have done here is basically saying the exact template and just deployed on the web. So this is a URL that you can access from anywhere on the internet. And it's going to take you to this website here. I know that the URL looks a little funny, and that's because we have deployed our website on Google Cloud run, which is a service on Google Cloud Platform. And here we can see that force the writing and the paragraphs are not really, they don't mean anything. But the point is to show you that you can use a templates like this, and you can modify them in order to build your own website for your own specific case. And as you can see here, our website basically works very well. And we can go to all of the all of the elements of our website and all of the pages. And it works. Very good. So what I'll be showing you in this course is how you can deploy this website and also how you can change things and deploy your website again easily. And with this, let's go to the next video. 2. What tools will we be using?: So for this specific course, we'll be using several tools to basically deploy our website. One of these tools is called flask. So Flask is a mini framework for, for basically creating web apps using Python. And it has so many features and so many things that you can do with it. Another tool that we'll be using called Docker. So Docker is a tool that basically helps us containerized our code. So by containerized, I mean, basically take all of your code and put it and all of its dependencies in one place. And in that manner, you can actually send or you can put that Docker image anywhere that you want. And no one will need to install those dependencies and no one would worry about running your code with on their own machine because you have containerized your code. Another tool that we will be using, google Cloud Platform. So Google Cloud Platform is a cloud computing service from Google. And basically it allows us to use so many services and so many things that they have built themselves. As you can see here, we have several services like Compute Engine, cloud storage, data flow, and all of these services here we will be specifically using Cloud run service for deploying a website. So this is another tool that we will be using, and of course we will be using Python. And so Python, the programming language. Although our website, we'll mostly be in HTML and CSS, but in fact, we will be using Python because it allows us to use Flask with it. And, and it allows us to do so many things. So these are the main tools that we will be using. And let's see what we can do in the next video. 3. Why Python and Flask for a simple landing page?: So a question that you might have is why use Flask and Python to deploy a simple website, which is what we will be doing throughout the course. And the answer is quite easy. The answer is that we're doing this because these tools allow us to easily extend our website. So let's say at some point you want to make your websites, for example, you want to add a login to it. Or maybe you want to add a database that's linked to your website. Flask allows you to do all these with e's. So if you start by just hosting your HTML CSS, using some other tools like Heroku. These tools make it simple to do that, but it's very hard to extend your code with only HTML and CSS. So for the backend, you need something. You need some tools for that part of your website. And in the beginning, it may not be a big parts. So it actually makes it easy for you to just deploy your website without much code in the backend. But the more, the more things you want to add to your website, the more complex your website becomes, the more necessary to have something that handles the backend, something as powerful as flask. And basically, Python allows us to use this framework. And that's why we're using Python with Flask. And apart from that class has been around for a long time. That's why there are many different ways to, for example, containerize our code using Docker. And also there are many examples and many, many ways true. Do that to deploy our web site or flask based website on Google Cloud Platform and also on other cloud computing services. So these are the main reasons why we are using Flask and Python for deploying a simple website. 4. Start from a template: So when you try to build your own website is always good to start from a template. If, for example, you don't have a very good skills in HTML and CSS is always good to start from a template, which is something that I always do. And for that there are so many websites out there that you can look at a for us, we're just gonna look at this website called templated that CEO. And as you can see here, you have so many websites. If you hover over them, you see that you can either get a demo here. So let me click on this and you can see how it looks here. You can click on buttons and you can see how it changes. And also you can download it as you can see here. And here, as you can see, there are so many different websites or templates here that you can choose from. And usually as I said, this is a good starting point. If you want to build your own website to showcase something, some product or some, or your skills or personal portfolio. And for us, we're just gonna go with this template here. It looks good. And the point would be to take this template with all its files, HTML files, CSS files. And we built a website and we put it online so that we can share it with others. So let me just download this for now. And when you click, you can just come here and click Download again. And the download should start. So let me just save it here. And now that we have our files, let me just go to where they have been saved. And then we extracted here. And now I have this folder which has all of these files. You can see HTML files. We also have images that are necessary. So this is, for example, for the background, same thing that you see here. You have other images. You also have the assets or some CSS files, some JavaScript, some fonts here. So what we're gonna do is take these files and we're going to construct a project so that we can create a website that takes all of these files into consideration. And then later we will be deploying this project on the internet. 5. Preparing our VSCode project: And now that we have our files downloaded, let's create a VS Code project. And so Visual Studio project, and let's put everything together into a Python app. So for that, I'm just opened my Visual Studio here. So here we have our Visual Studio Code opened. And for that now, and this creates an empty folder that we will use later for putting everything together and and also adding the necessary code for deploying. So here I'm just gonna create a new folder and let me just create it, call it, for example, Python app deployment. And as you can see here, I am mentioning Python because this is what we will be doing. We will be using, so she's going to call it Python app deployment. Now choose OK. And now here I have everything set up. So this is an empty projects. And what I'll be doing now is adding all the necessary code. Here. At least we will be starting by the code that we downloaded. And later we will see how we restructure our project. So let me just maybe go back to our templates. So here we have all of these files. For now. Maybe just, I can select all of this and drag and drop them here at folders to copy folders. So here I'm just going to copy them. And now we have everything inside our empty folder. And the point now is to basically create our python app that's going to take all of these into consideration and and also help us serve our application and later on the internet. And for that, let us start by creating a, an empty or a virtual environment. So for that I just, as you can see, I opened a new terminals here, so just view terminal. And then I'm going to be using one of the tools for creating virtual environments. So there are so many tools for that. There are, for example, virtual m, which is what we will be using here. There's also Anaconda and I'm sure there are many others. For me, usually I use these two and for this specific project, I'm using virtual em. So virtual, and if I type it here, we should see that it gives me some helping commands here, which means this already installed. If you don't have it installed, you can actually install it on your system just by using the install Virtual. So now that you have virtual EMF installed on your system, we can use it to create a virtual environment and put that on Ubunto, you just type virtual. And so here I'm just going to click on this. And as you can see, we now have a folder here called VM. Because when you, when you write virtual nvm, This means that you're telling visual to create a visual environment for you. So and you're giving it the name. So it's VN, I'm calling VM. You could call it whatever you like. And this is this virtual environment. And all its dependencies are inside this folder here. And now we can activate our virtual environments. Well, let me just clear this first. We can activate it by going to Vm. Then activate or, sorry, I forgot. It should be source Vm, then activate. And now you see that we have the name of our visual environment at the start of the line, which means that we are currently inside our virtual environment and anything we installed from now on. While having this name here means that we're going to be installing it inside our virtual environments. This is a good habit that's used by many programmers, where you basically define a virtual environment for your specific project. This way you basically make sure that you have all the dependencies in one place. And then later you can verify which things are installed, which things are necessary for your code to be run. Because if you use your system, for example, if you don't have, if you don't use a virtual environment and you use your own system and everything in it. Later, you might not know which packages are necessary for your project and which are not. Because a system there are so many things installed. So it will be hard to find out the dependencies of your code. So for that, I always use a virtual environment for my specific projects. Unless of course, I have some projects that are very similar. In that case, I would just create one virtual environment and use it for all of those projects. So now that we have this virtual environments created, we can install some packages that we will be needing later. So the main packages that we'll be using our flask. So I'm going to use pip install Flask, and we will also be using unicorn. These are two important Python packages that we'll be using to serve our model or our, our website as a Python app. So let me just clear this here. And with this, now that we have these packages installed, we will later create our Python file here. So Python, so I file with the extension dot pi, and we will fit it with the necessary code so that we can read these files and serve them from within our Python application. 6. Ordering our template files into the right Flask project structure: So this creates our Python file here, and I'm just going to call it my site by. So this Python file will contain all the necessary code that will read these HTML files and later show them as part of our website. So I'm gonna start by importing from Flask, being porting the flask class request. The redirect. In fact, I'm not sure if we're gonna be using redirect, but maybe render template that we will be using for sure. And also when I import OS because we will be using it later. So the first thing we will do is define our app as a Flask app. And for that, we give it the o began to use the flask class. So flask, and here we're gonna give it the name. But this means that our Flask application will have the same name as our file here, my site. And something else we're gonna give it to this class is the static URL path. So this is a bat to show where to tell Flask where our static files will be saved or are saved in fact. So by static files we mean the assets, images, and things like that. So for the asset we have CSS paths, yes, all of these are part of our static files. So here we define them as part of a folder called static. This is a convention used by most flask and Python developers where basically for defining the static files, you create a new folder. So let me just come here. So new folder and I'm going to call it static. So this is where we will be moving our static files. In fact, let's just do this now. So here I'm just gonna select these two, so assets and images because both of them are static files and I'm just gonna move them here. I'm going to choose yes, move them here. So as you can see now, inside my static folder, I have assets and images. Another thing that we will be doing is actually defining a folder. So another folder we're going to create it and we're gonna call it templates. So this is a folder that flask already knows about. So when you define a Flask app, in fact, what Flask will do is look at a folder called or look for a folder called templates in order to find all of your HTML files. So for that, I'm going to select all my HTML files here. I'm going to move them to my templates folder and choose OK. So now we have a folder that's, or a structure that's more or less the common way to use with Flask projects. So now we have defined just the start of our Python app. We have structured our code or our files in such manner that's well-known for flask applications. And in a future video, we will be basically finishing our Python file here in order to be able to read all of these HTML files and make sure that they can read these static files here because we have moved them. So we need to make the necessary changes in order for every template to know where its resources are. 7. Finishing the code inside our python file: So now let's finish our Python file here. So we started by defining our app using the flask class. And now we're going to be adding the routes or the bats in the URL to our HTML files here. So for that we're going to use a decorator cold. So you're going to use at AP and the decorator, we're going to use routes. And he worked, we'll be defining basically the route at the URL so that for example, let's say you have your website called So here, whatever you define here is basically going to be added to the website. So for example, if we do routes, lets say index. What this means is that when you serve your app using whatever website or whatever domain here, whatever you add here is basically going to be added like this. So here, let me just finish this part here and then you'll understand. So I'm going to add define index. So here I'm just defining a function. I'm calling it index just to keep things persistence or the same as the name of the HTML file. And here I'm gonna return render template. So this function is going to take our template and it's going to render it as a website. So here, or as a website page. So here I'm going to give it the path to my index.html file. But in fact, I don't need to say templates and then index dot HTML. I don't need this because flask, by definition, looks for our HTML files inside, inside our folder called templates. So we don't need to define this. If you add it. In fact, a firearm, if I keep this, what's going to happen is that Flask is going to look for another folder called templates. Inside our folder called templates. And then inside of that folder is going to look for Index.html file. So here we're just gonna keep index.html file. So let me just go back here and explain what's happening here. So here we are telling flask that whatever website or whatever domain we are going to use. Whenever I use that domain, for example, Whatever that domain is. What I give you here in that, in this, in this part here, you add it to the rest of the domain. And what do you need to show me in that web page? The template that I give you here. So basically we're turning it. Take that HTML file called index.html and render it to a URL called WW, W dot slash index. Of course, this is just an example. So whatever your website will be here. So for example, is going to add slash index if I go to this URL. So if I go to this URL here, I'm gonna see the same thing that's in my index.html file. So here we're going to be doing the same thing for our other webpages. So here as you can see, we have generic index and elements, and all of them are part of the website. So here if we go to menu, the home as represented by the index.html. But if we go to generic, this is another webpage. And all of the things that are contained in this webpage are inside our generic dot HTML file. And the same thing goes for elements. Show elements as the web page where everything does define here. Basically inside, inside our file called elements dot HTML. So let's finish this quickly here. So here I just finished adding the other two functions. They are exactly the same as the first function here. So here we define a URL path, so slash generic, and we give a function that renders the template generic HTML to this URL here. So if we, the same example he was going to happen is that we're going to have here. If you go to, if we go to the bath or the URL here, we're going to see the same elements that are in our generic dot HTML file. And again, the same thing here. So this is w, w, w dot slash elements. If we go to this URL of our website, we're gonna see the same elements that are defined in our elements dot HTML file. Just one thing I want to change here is the main website. So what happens if we go to this URL? If we go straight to our website,, we're going to have an error or basically have 404 error because the website is not going to find any HTML file to render to this main page. So 11 of the things that you should do is make sure that if someone visits your website, then that person needs to see something there. So one of the pages that you define need to basically be rendered to this URL here. And in order to do that, you basically remove any, any addition after the slash here or after the forward slash. And what this means, if you just keep a forward slash, This means that if someone goes to your website without adding anything, no slash, no nothing. He's gonna see the same things or the same elements that are defined in your index.html file. So always make sure that when someone visits your website is going to find something. You don't want someone to visit your main URL and not find anything. Or, for example, find a 404 error because there's nothing to be shown on that webpage. So just to reiterate, if you add a slash here, this means that when someone visits your website, in fact, that that person doesn't even need to add a slash. Just just visiting straight away your website is gonna see the elements that are defined in your index.html file. So I'm going to say this and let's see what we can do in the next video. 8. Running our Python app with Flask: So in order to test our app, our Python app, or our websites, we can run it locally. And because we have used Flask in here, we can actually run a, run the script using Python mysite dot phi. And the goal is to actually see these pages rendered and see a website. If, even if it's local, even if it's not deployed on the internet, at least see it locally on our browser if it's working or not. But if we run this, in fact, nothing's going to happen because we haven't defined the, the main thing that's going to happen here. We just defined the app, we defined the route, but we're not telling the, we're not telling flask that if we run this, this Python file here, then we want you to create a server and run our website on that or using that server. So in order to do that, in fact, we need to define the main function basically. So here we're just telling it that if someone runs this Python script, so this is basically translated into this code here. So this code telling Python that if someone uses a terminal and runs Python mysite dot pi, we want you to run everything that's inside this part here. So here we will be actually running our app. And for that, we're just gonna use apps that run. And for now, we're going to set debug to true so that if we face any problems, they can be shown to us and we can fix them. But later at deployment time, we need to set this to false because we don't want someone to, someone faces an error. We don't want them to see what's actually happening in our code. So here we need to add a, another argument called host. And here I'm just going to define it as 0.0.0 does 0 and is locally to our machine. So whatever machine is going to be running, this host will have this IP address. Then we need to define a, an argument called ports. And basically this is the ports that we want to allow our application to run from. So what's going to happen is that from within the host, we want Glass to open a certain port in order to allow visit our website. So here for that, I'm just going to use an integer by basically calling a a, an environment variable that will be defined from at any time. So an environment variable is something that you've defined during the running your code or, or even if you have so many different parts of your code, you can have some environment variables that you can capture from anywhere. And in order to capture them, basically you use the package OS environment. And here we are going to get that that environment variable are going to get the environment variable port. And we're going to choose the port 8080, which is just a convention. Many, many programmers use 8080, so we're just gonna use that. So now we have everything prepared to run our website. And if I run the command, the same command again. Now as you can see, we have a server running and we can access our website using this URL here. If I click control, then I click on this. It's gonna ask me if I wanted to open it and we're gonna say open. And here you can see we have our website here. But of course, you immediately notice that is different than our website that we saw here. So this is how our website is supposed to look. So all of these elements are missing from our website. And the reason for that is that so many parts of our assets, so the things that are in the static folder here, so we have the CSS files, we have the images, all of them. Or not a well-defined in our HTML files. Because when we downloaded our code, if we look here, for example, here for the style sheet, when we are looking at or when we are trying to find a CSS file, we're just looking at assets, CSS, main.css. But this was before we restructured our code. So we need to change all of these elements here in order for flask to recognize them and link everything together so that all of the webpages will know where their resources are. 9. Modifying our HTML files to account for new paths: So now let's start changing our HTML files in order for an order to allow it, to allow them to basically read their assets. Because as I have mentioned before, we change the structure of our code here. And the HTML files can no longer find their assets because we have now put them in a static folder here. So for that, let's start by the main web page, which is index.html. And we're gonna go through every asset and we're going to change it in such a way that allows our flask AP to basically put everything together and link everything so that every part knows what were the other part is. So with that, let's start by first thing here, which is the style sheets. So the main.css file here, our index.html cern to read it from a folder assets, CSS, main.css. But this needs to change. In fact, let me just maybe just move it here for a second. And here I'm going to show you how you can add or you can add a function here that basically links your CSS files on main.css file to your static static contents. And this means that you're allowing or you're telling Flask where those assets are. So the function dad who will be using is called URL for. And in fact, in Flask. In order for it to recognize this function, we basically need to put this inside double brackets here. So in this way, flask can recognize this URL for function. And what we need to give this function the first thing as static. So we're gonna tell it that our assets are in the static folder and then we want to give it the file name. So the filename is the variable that contains our, our file. So here it's main.css. And we need to put them between 22. So we need to put them between two quoting Marx. And here we're just gonna move our file here. So control x and I'm going to put it here. We're going to save this. So now the, the website or the Python app knows where to find these or this file called main.css. So we'll be doing this for all the other assets. So let me just do a quick search. Assets. So for this folder or for this file, we only have these 1's change apart from the first one. So let's do the same thing for all of these. Files here. So let me just come here. And again, I'm just going to maybe remove them or just moved them for now. And I'm going to open and close double brackets. And I'm going to use the function URL for. I'm gonna give it static as the first parameter than filename equals two quotation marks. And I'm gonna move this back control X, control V. And I'll be doing the same thing for all of these files. So now I have changed this on these lines here to be the same as the other lines that we change. So here we are using our L4 function. And with these changes, let's try to run again our or to check again L website. And for that, let me just refresh here. And as you can see, we now have at least parts of our assets being loaded correctly. So the fonts are being loaded correctly. We have this background loaded correctly, but of course there are still things missing. So if we go back to the original website, in fact, here you see we need to see this in the background, but we're not seeing it here. And that's because we have other parts to change as well. So any parts that has, for example, images needs to be changed as well. So for now we only change the part where we had assets. Let's look for the part where we have images. So I'm going to look for images. And as you can see, we have 11 elements that have images defined or pass through the image is defined like this. And we need to change this to be the same as the files that we defined here. So we need to continue using the same methodology. So we take this, copy it for now. Let me find it here. So here what I would like to do is put this here and then take my image and move it here. So it's the same thing that we did for the assets. We're gonna do it for the images. And just like we did for this example, I'm gonna do it for the rest of the examples here. So for that, let me just go quickly over them and do the same thing. So I have just finished modifying all of those paths in order to make them Flask compatible bats. So as you can see, if we go to any image here, we have changed it. We have put it inside or as part of the filename argument in our URL for function. So with this, let me. Save all of this. Let's go back to our website here. Let's refresh it. And as you can see now we have all of the assets loaded correctly here. So the website, or at least this page of the website, is identical to the website here. And we can see that it moves smoothly between the different, different parts here. So for this main page, and by this, I mean for the index.html. So if someone visits our website directly, is gonna see this page, which is basically rendered correctly, there is nothing wrong anywhere. But if we go, for example, to another page, so if I click on menu, then I go to generic. So here is going to tell me that I didn't find generic that HTML. And of course, this is because we haven't changed anything in our generic dot HTML file. So the same thing here, we have assets and we have images. And also we have bats. As you can see at the part where we have the menu. If someone clicks on the homepage is gonna take him to this bath here, o is going to add this back to the website. So let me just do a quick change here. So if you remember, we have changed all of these, all of these URLs and let me just change them again here. So what do I mean by this? In our website, you can see when we do a forward slash generic, we gonna see genetic dot HTML. So here I'm just changing the, changing this part of the menu so that whenever I click it, it's gonna take me too. Generic. Basically generic function here and render the generic dot HTML file. But just in fact, I have, I was trying to change it into generic dot HTML, but we need to change it here because this is the index.html. This is the main function. So we were here, this is the main focus, the main page, sorry. So inside our main page, we were looking at the menu there. So this means that we need to look inside our index.html file and change things here. So let me just go back here and change these parts. And I'm going to save everything here. So what's gonna happen now or what's supposed to happen now is that when I click on generic is going to go to the page generic. So let's try this. So let me click on menu. Generic. Still goes here. Let me check again. So in fact, everything was correct. I just needed to refresh the page. So I have done. And if I click on generic similar, Take me to the generic dot HTML file. And the same thing we notice here, the HTML file or the page is not rendered correctly because the HTML file is not reading the SS and images correctly. So we need to do the same thing for the generic dot HTML file and also for the elements dot HTML file. I will be going through every part where we have assets and images, and I'll be changing that. So I'm going to do this quickly and it's going to be identical to what we did in the index.html file. So now I have finished changing all of the paths inside elements dot HTML and also generic dot HTML. So let me go back here. Let's refresh this page. And as you can see, we now have the template correctly rendered. And if we go, for example, let's check. Let's go back to home. So home it takes us to this bad here. Now we are in the index.html file amigo two elements. And the elements are rendered correctly as well. So with this, we have most of the website correctly rendered. And in fact, all of it, if I'm not mistaken. But we might face some problems, may be for specific paths that we didn't change. And the goal of this course is basically just to show you how you can deploy a simple website. And if you change it, you can redeploy it again. But for now, we have our website correctly rendered. We have everything, all the paths correctly configured. We have our Python app correctly created here. And with this, let's see what we can do next. 10. Running our Python app with Gunicorn: So I want to mention something important here. So, so far we have used our or we have run our Python websites using flask. So let me just maybe come back here clear. We were running the website or we are looking at the website by running this command here. So if I click it, as you can see, it's running, but it does mention something here. It says warning, this is a development server, do not use it in a production deployment. This is because blast gives us a server that we can use for experimental cases, like when you are developing the website. But if you want to deploy it on the internet, it's not recommended to use this server here. In fact, the recommended way is to use guinea corn. So that's why we have installed a unicorn before. And basically unicorn gives us the ability to run our code using a production where the server. And in order to do that, so let me just do Control C here, clear this. In order to run our website with the unicorn server, we just need to run this command. So when the corn bind, again to choose or 8080, we can choose some other parameters that are used when deploying using guinea corn. So for example, the workers were going to choose one or the one worker threads. We're going to choose eight. So these are parameters that basically help us scale our website if needed. For now I'm just using these values here that I've seen many developers use. But later. In fact, you can change these parameters depending on the traffic that you have on your website. And of course, you also have the ability to change the configuration on whatever cloud servers you're using. So for us, we will later be using Google Cloud Platform. So for that, if in fact it configures the resources necessary to run your server depending on the traffic that's coming to your website. So you don't need to worry too much about this part here. We're just going to add timeouts. And I'm going to call my site apps. So this part here, I'm actually using the name of the file that, that has my app in it. So if you use a different name here, so if you call this, for example, my Python app, then this needs to be added here. Then you need to use column app. And app needs to be the same name that you define for your Flask apps or if you call this something else here, who's going to change all the way, all of these parts here, but also when you are trying to, trying to run it using guinea corn. So with this, let me run this command. And as you can see, we now have a server running. And we are at the exact same server that we were using with flask or the exact same URL. Sorry. So if I click control, then I click with the mouse here, I'm going to click open. As you can see, we have the same website, except that now it's using a unicorn server instead of Flask. And again, this is the recommended way to run your code and to deploy it. It's not really recommended to use Flask server. So with this being ready, let's look next to the deployment part and what we can do in order to put our website on the internet and be able to share it with other people. 11. Docker and how to install it: So now that we have our website running correctly on our local machine, let's look at how we can deploy it. And for the deployment, we will be using some tools, for example, Docker and Google Cloud run. And let's take a look at, for example, Docker and how to install it. So I'm going to just type install Docker. For me. I have a new bond to machine. If you have Windows, you can type windows and you can look at the different steps there. So let's look at Windows just for the sake of example. And here it gives us the first result is soul Docker desktop on Windows. And what you need to do is to basically choose one of the ways to install this tool installed on your machine. So here you can download an executable and install it just like you would install any Docker app. If you are on. You been to, for example, which is my case. If I go to you bump into here, I see that we have some different methods. And in fact, so you can install it using a repository. You can go through all of these steps here. You can install it from a package. And you can also install it using convenience script. For me, the approach that I used, which is I believe the recommended way to install it using a repository. So what I have done is basically run all of these commands in a new terminal window. So I went through these commands one by one. And I made sure I followed every step here when you come here and make sure that you choose the correct machine for you, most likely it will be dispersed options. So you either have 64-bit machine. If you have one of these two machines, then you, of course, you can go through these tabs here and use that specific command for me equals this command here. And of course, I continue diastolic everything by following these commands until I get to the part here where I can just verify my Docker installation. So all of these are just simple commands. I just Copy, then Paste every, basically every command on my terminal window and I just ran it. So if I go down, for example, to the last command to test my, my solution, I'm just gonna take this base here. If I run this, I'm gonna give it my password. So for this command, if you see Hello from Dockery, that means that Docker was installed correctly on your machine. And for me as you can see, it was very quick because I have installed it before and I have learned this command before. But if you haven't done that before, it might take some time because this cannot pulled this image from what's called Docker repository or docker hub. And it's going to download that image to your local machine and then it will run it. So it might take a little more time than what you have just seen. But if you get to this step, this means that you have installed Docker correctly and you're ready to deploy your app using Docker. 12. Creating an account on Google Cloud Platform and setting up a project: Another tool that we need in order to deploy our model is the Google Cloud Platform. So for Google Cloud Platform, we actually need just to create an account there. So I'm just gonna search for Google Cloud Platform. And here I can just click on that result. And of course, here, depending on whether you have a Gmail account or not, if you don't have a Gmail account, you need to create one. And once you create it, you can actually have a Google Cloud Platform account as well. And as you can see here, new customers get $300 and free credit to spend on Google Cloud. So this amount is more than enough to test, test things. And in fact, you can just saw many services on Google Cloud. And specifically for our case, we will be using Cloud run to deploy our app or our website. And with these, with this $300, you can do that for a long time. So if you don't have an account, you can once you click on go to counsel, you probably going to get to a page where you need to create your your account. And they might ask for your credit card, but don't worry, this is just for verification purposes and they won't charge it unless you actually allow them to. So for me, I already have a Google Cloud Platform account. So for that, I'm just going to be using my, uh, my account and I'll show you how it looks. So here, this is the dashboard that I get, one when I my Klout account. And here are the inside was called the project. So on your Google Cloud Platform account, you actually create projects depending on your specific applications. So you would create a project, you would enable some APIs and then everything that you do will be within that project. So here specifically I am inside the project called deploy Python app. This is the project ID. In many cases, the id will be the same as the name, but in some cases they give you a different ID. What you choose as the project name. But the project ID and the project number are generated by the Google Cloud Platform. So for us, this start from start basically. So here, instead of using this account or this project, I'm gonna create a new project. So for you, you probably wouldn't have, you will have, I think, one project that's generated automatically. And you can either use that project, oh, creates a new one. I recommend you create a new one so that you can follow exactly the same steps. So for me, I'm just going to click here where I have the projects. And maybe just before we come here, if you actually click on this burger button here, if you go to home and dashboard, so this is where I am. I am home dashboard. For you. It might be a little different if you have the other project that I told you about this generated automatically. But for us or for me, I have this project here and I'm just going to click here and create a new project. So for that, you just come here as you can see, new project and you can give it a name here. So for example, let's call it, let's call it deploy python website. And of course sometimes it won't allow you to use that name. For example, if I do this, you shouldn't. It will tell me that it's not valid because I can't use underscores. So this y, I'm just using dashes here. So diploid desk, Python dash website. And I'm just going to keep location to know Organization and I'm going to click on create. So here you see that the project is being created. And once it's created, okay, now it's been created. Once it's created, you need to make sure that you are inside that projects. So you in fact need to go back here and specifically mentioned that you want to use this project here. So deploys Python websites. So as you can see now my dashboard has changed and now which tells me, okay, this is the project name, this is the project ID. This was, this idea was generated by the platform, and also this is project number that was generated by the platform as well. So this project we will be using in our for our case to deploy our model on Google Cloud Platform. And now that we have everything set up, let's see what we can do next. 13. Creating our Dockerfile and adding the necessary lines of code: So now that we have our project correctly setup on Google Cloud Platform, let's go back to our code. And here we will set up a Docker file, which is basically the file that Docker will use in order to create what's called a Docker image. And that image, or that Docker image will be used to deploy our web sites on Google Cloud run. So here I'm just gonna create a new file. And I want to mention something quick here just so that things are clear. So if, for example, I am here and I have a folder selected, if I click on new file, in fact is going to create that file inside that folder. So always make sure that you are outside so you're not selecting editing. If you want to add your file out here. If you want to add a file inside a folder, then you click on that folder, then you create, you click on Create File or new file, sorry. So here I'm just going to click here so that I tell VS code that I want to create a file outside. And I'm gonna click on new file. And here I'm going to call it Docker file. So this is the convention used for calling Docker files basically. And you see that once I named it Docker file VS code, immediately recognized, sorry, recognized it as a Docker file, as a file of type that Docker recognizes. So here I'm going to click on enter. So now I have my Docker file created. And in fact inside my Docker file, basically I'm just going to set up the necessary resources to run my code anywhere. So that's the point of Docker and Docker file allows us to do that. So usually the start of your Docker file will always be B from command. So this strong command basically tells us or tells Docker dot we want to start from a certain Docker image, a base image. And that base image will have some specifications. So for our case, I'm just going to use Python 3.8 Docker image. So in fact, this Docker image already exists on Docker hub. So whenever we want to build our Docker image, using this Docker file was going to happen is that when one, this line is read by Docker is going to know that we want to use a base Docker image called Python 3.8. And it's going to look for it in Docker Hub. So if we go to Docker Hub, I'm gonna just do Python here. So let's take a look here. And as you can see, there is a Python distribution here. And as you can see, you have all of these types of Docker images for Python. And for us, we are just going to use. Python 3.8, because we know that our code can run inside this image. So this will be the first line of our docker file. And the second thing that we're going to define is what's called a work dear. So this is a working directory. This is basically when you create a Docker file or a Docker image, you can define pads inside of it. And you can tell your your, basically your Docker image that you want to put everything necessary to run your code inside this directory, including your code. So our code, we want it to be put inside this working directory. So usually I follow the same convention that many other programmers do. So I just choose user source app. So I want my code to live inside this folder here. And the next line will be about basically copying everything, everything that we have here. So all of the code here, we want to paste it or we want to copy and paste sit inside our working directory. And for that we're going to use the command copy. And I'm gonna use dots, spaced dots. So what does this mean is that we want to copy everything inside our current directory. So our current directory, we have our docker file here, so this is our current directory. We want to copy everything here to the working directory. So that's why we define work there up to before. So this line here basically tells the Docker that we want to copy everything here to the working directory here. And you might be wondering what where does this working directory exists. Again, this working directory is inside our Docker image. So our Docker image, when we create it, it's basically almost as a small virtual environments. And within that virtual environment, we define this path here. And when we say copy, we copying everything here to that folder inside the virtual environment. And now, apart from this, we need to run auto installed the necessary dependencies that our code needs. So for that, we're gonna use r_1. And here you can actually define commands that you would generally run in your terminal. So for example, pip install, maybe upgraded first, upgrade pip and also install Flask and unicorn because these are the two main dependencies that we have. Again, all of this will be happening inside the Docker image. Whenever we run what's called the Docker container, we will install these, these dependencies here. We will create a working directory, copy everything to it, then run this line here. So we're going to be installing all the necessary dependencies here. And finally, we want to run our, basically our website. And just like we were doing it here, if you remember. So. We were running unicorn bind and all of this line here. So here in order to run it, you actually need to use the command cmd command and then exec. And then here we can run the exact same command that we were using before. So I'm just gonna copy it from here. Copy and paste. And this should be everything that's necessary to basically run our code within a Docker image. And maybe just something else that you can do to optimize things. B, for example, to add Docker, Docker ignore file. So I'm writing dot docker ignore. And here I want to add things that I want darker to ignore. So for example, at this stage, I want Docker to copy everything here to my working directory, right? But I don't really need to copy this VM folder because in fact, inside our Docker image, we won't be running our code using this virtual environment. We will be running it using a Python that's installed inside this, this base image here. So for that, I don't want to copy this folder to my Docker container. So for that, I can add this here. We can just do VM. So this means that Docker will ignore this folder completely. Another folder that I want to ignore is pie cache. So pi cache is something is the cache files that were generated by Python when I was running my application locally. But I don't want to copy this on my Docker image. So for that, I'm gonna do the same thing. So by cache. So this means that docker will ignore this folder and everything inside of it as well. You can add other things. For example, you can add the credits, that TXT file. You can add it like this for me. I'm just gonna leave it doesn't bother me. It's just a small file. So I'm going to keep it here. And now I have my Docker file, I have my Docker ignore. And in fact, in fact you can even ignore your Docker ignore file. So I'm just going to add it here. I don't want to copy my Docker ignore file inside my docker image or Docker container. So here I have everything necessary to build a Docker image that can run my websites within it. And of course, once we're able to do this, then our website can run anywhere, including Google Cloud run. So let's see how we can what we can do next in the next video. 14. Enabling billing inside our project: So one thing that we need to do now in order to deploy our web site to Google Cloud Platform is to enable billing on our project. So for this, make sure that you are inside the correct project on your Google Cloud accounts. And then you can click on this burger button here or Berger menu. And you can go look for billing, or you can just look it up here. So we get this choice here, billing. And when you get to this page, first of all, it's going to show you some of the, some of the, for example, the prices that you have paid before, as you can see here, for example, for me, I only have round €80 left because I consume most of the other Cloud credits by using my account. And for you, it might ask for for enabling billing on that specific project of yours. So if it does, we can just click on enable billing. So for me it's already enabled here. Let me just check gay Overview Reports. Yeah, so it's already enabled for me. Let's go back to the dashboard. Make sure KM on the correct, the correct project here. So now that I am sure that my billing is enabled, so for you, it may not be enabled, but once you click on Billing is going to ask you in this page here to enable it. So now that we know that our billing is enabled, to go back here. And let's see now how we can basically use the other APIs. Because here, everything you use inside your Google Cloud accounts is being built. This why we enabled the billing. And every time you want to use some API, Google Cloud will ask you if you want to allow it, to enable it. So with that in mind, let's go to a terminal window and let's try to access our projects. So diploid python website from our terminal window. 15. Connecting to our project from a terminal window: So let me just open the terminal window that we use before. Enemies as clear what's ever in here. And now, what I would like to make sure of is that I have or I can use Google Cloud from my terminal. So for me, if I type G-Cloud here, it should give me some helping commands. So here as you can see, it tells me, OK, you can use it with all of these commands. And this means basically that I do have G Cloud SDK installed on my system. For you, you may not have that. So in order to install the SDK, so Google Cloud SDK on your platform, you can just Google Google Cloud SDK. And here we can go to the SDK web page. I'm going to click on get started. And this part here you can see that you can install it by using or by following these commands here. So there should be installation process for, for Windows and also for, for your b12. So just if you want to install it on Windows, you can just search windows here. So will the Cloud SDK install windows? Let's go to the documentation. And in fact, in this page we have all of the possibilities. So here you can see it's showing me a Debian and Ubunto because my system, as you've gone through, but you can follow the guide here if you have Windows. So you just need to download the SDK installer and you install it as it's shown here. And the same thing if you have a Mac and if you have these other operating systems, you can follow the steps mentioned here. And when you finish installing everything, you should be able to use the gcloud command. Gcloud command from within your terminal. So let me just clear. So the first thing you need to do when you when you have installed the G-Cloud or the Google Cloud SDK, is you use G-Cloud in it. So here, basically, for me, it's it's already tells me, okay, this is the account that I'm currently using and this is the project that that's being that's enabled and that's that I will be using if I continue with this configuration here. But for me, I want to change the project because I am not using the diploid Python app, but rather the deploy Python website. So I need to come here and I'm going to click or choose one here to reinitialize this configuration. So here, it's going to take some time then is going to tell me, okay, which should be count and when should the same account. So one. And then here is gonna show me all of the projects on my on my Google account or Google Cloud accounts. So here you can see that I have all of these projects shown here. So what I want as the project number three, so diploid python website. So for that, I'm going to click or I'm going to choose three. And now it's in fact has enabled the correct project for me. So the same project on my Google Cloud account as being enabled on my local, on my local terminal here. So now I am connected to that project and I can do all sorts of things just from my terminal window. And in fact, there are some different ways to do this. You can in fact manage a lot of things just by using a cloud shell terminal here. And there are also other ways to do what, whatever that we want to do just from just by using the Jew eyes here. But I like this matter here or this way here. Because I've seen so many guys for this and it's mature enough. And it also allows me to basically go back and forth between my my folders or my local machine and also on the cloud. So here, let me clear this. And now we basically are connected to our project and let's see what we can do next. 16. Building a docker image using Cloud Build: So what we want to do now is basically build a Docker image and deploy it on Google Cloud Platform. And specifically using Google Cloud run. And basically that Google or that Docker image. We'll run our website inside of it and it's on the cloud. That means that we can access it from anywhere on the internet. So, which is the goal of the discourse. So one thing I want to change here before we continue is to change the debug tool false. So one, I want to deploy my app on my website, on the internet. I don't want to enable debugging so that I don't compromise my website because the debug mode basically allows people to know if something wrong happens. They allows them to see what's what was wrong. So this is good for development purposes, but for deployment, it's it's definitely a no-no. So now that we have this, we're going to go to a guide here that close windows here. So there is a certain Guide for deploying, building and deploying our Python app on Google Cloud platform. So this is the website that you need to go to or the URL. Of course, I'm gonna be showing you the commands that are here. But of course, if you want to see the full example that's shown here, which is a different website or a different Python app. You can look into this URL here. So it's cloud dot slash one slash docs slash quickstart, sludge build and deploy. And then here some Python because clicking on these, if I click on go, you see that the URL is pointing to the Go documentation here. If I do C Plus Plus is gonna show me c plus, plus, so on and so forth. So for Python, I have the example here. But nevertheless, we don't actually need this God who just need the commands. Down here. Of course, I could have just shown you the commands without this documentation, but I prefer to show you the documentation as well so that you can refer to it. And if something changes in the future, you can also just look at the documentation and see what was different there. So what we will be using as the hour is this command here. So what this command will do is basically build a Docker image using our code here. So the docker file that we have here is gonna use it in order to build a Docker image. And that Docker image will be used later when we deploy it on Cloud run. So in order for us to do this, let's go back to our terminal here. And I just want to set a project ID. And the project ID will be the same as my project ID. So. My project ID is deploy Python website. And maybe there's just go and verify again. So yeah, yes, I deploy Python websites just by setting this. So this, if I do project id, now we can see that it's saved inside this variable here, this local variable here. So then I want to run the command here. So G-Cloud builds submit, and the tag will be GPCR dot IO. So GPCR stands for Google Container Registry. So what this means is that my Docker image will be pushed to this registry here. And this registry is in fact on Google Cloud platform. Which means that when we want to run our Docker image, we can just look it up inside our Google Container Registry. So here I'm gonna give it the project ID. So that's why I have said that up here as local variables. I'm just using it here in the same manner. So project id. And here we can call it whatever we want to call it. For example, just my my website. And when you run this command, it might ask you enable the Google build or Google Cloud build API. And if it does that, then you need to allow it to enable that API so that you can build your Docker image. So let's just wait a little bit here. Sometimes it takes some time. In fact, I forgot to do one important thing which is to actually cd to my directory here, so the directory that contains my code. So for that, I'm just gonna write c, d here. And I'm gonna look where this is. And you just copy it from here. And we're going to clear it. And I will run the same command again. So G-Cloud bills submit tag. And when I do this is basically going to look for the Docker file that's inside my local directory. And it's going to build my Docker image using docker file. So let me just run this again. So here, as you can see, is S can be or is telling me that API cloud built. So they say cloud dot, which means the API Cloud bill, not enable on projects with this name. So this is the project that we have set up on Google Cloud Platform. So they asked me, would you like to enable a new Try? This will take a few minutes. I'm going to choose Yes and click return. So it's enabling the service here. And once it's enabled, it's going to start the building again. So this process might take a few minutes. And let's see. Ok, in fact, we have a problem here that could not resolve stores. Just check it here. So here I just wanted to show you something that you might face yourself. So as you can see here, we got this error here says, okay, this does not have storage object dot get access to the cloud or to the Google Cloud Storage object. And in fact, this is a problem that arises when you just enabled an API, sometimes just waiting a little bit. So here I went. I waited for a few seconds. I ran the command again and I faced the same problem. Then I waited a little bit longer and I run it again. And as you can see now, it's working correctly and it's building. My Docker image, as you can see here, is going through the steps one by one. This is o, this is the step where it creates a working directory. The step weight copies all of the files from here to my Docker image. This is where we are installing the flask and Guinea colon packages. And as you can see, it has finished the process with success. So now we have our Docker image built and is also now respond Google Container Registry. So now that we have our image on Google Container Registry, this just do a quick check here. So if I do CR, So Container Registry. If I come here, as you can see here, we have this image that has the name my website because we gave it the name my website. If you remember here, this last tag here. So this is Google Container Registry dot IO, then the project ID, then our, or the name of our image. So my website is the name of the image. So now we see that our Docker image is inside the Google Container Registry. So that's good. And now we can continue with deployment parts. So in order to deploy our our website, we just need to run this command here. So. 17. Deploying our app using Cloud Run: Let's do it right here. So G Cloud, or maybe this clear dispersed. So she Cloud run, deploy. Now we need to give it the name of our image. And here, image refers to the Docker image that we just build, built and pushed to Google Container Registry. So for us is she CR. So we have projects ID and then my, my web sites. And here I'm choosing lab poem managed. And this last part here. So platform managed means that I want to Google Cloud run to manage my my web site so that I don't give some specific locations. And this is good for projects like the one that we're doing here. It makes things much simpler. We don't manage things. We let me Google cloud manages, manages it for us. And now let's run this command here. And here to gives you the possibility to choose a service name for us. If you don't choose anything is going to take my website as the service name. Of course, feel free to call it whatever you like him. He's going to keep it as my Website. I'm gonna run it. And here again, you see that in order to deploy it, we need to enable this API called r1, which is in fact the cloud run API. And it asks us to, to enable it. And here I'm going to choose y for yes. And I'm gonna run this. I'm going to click on the return. So for now as enabling the service. And after some time, ok, now it has successfully enabled it. Here, it's gonna ask me to choose the region where I want to deploy my website. So this is just if, for example, you know that most of your visitors will be in some specific area of the world, then it's better to choose that region to deploy your website. This doesn't mean that if you choose a region in Asia than someone in Europe can't access, it doesn't mean that, just means that if you know that most people who visit your website will be in Europe than choosing Europe will basically optimized the way. Optimized the way those people access your website because you're going to deploy them, or you're going to deploy your website to some servers that exist in that area. So for me, I am in Europe, so why not choose one of the regions in Europe? I'm gonna choose 13, for example. For, for you, if you are in the US, you can just choose one of these. Doesn't matter really. And here, asked me if I wanted to allow unauthenticated invocations to my website, I'm going to choose, Yes. And now the process starts, the deployment process starts, and it might take some time as well. So hopefully, if everything goes well, then our website is finally deployed. So let's wait a little bit and see what we get. So after a minute or two D deployment part has been finished. And now it tells us that our website has in fact been deployed to this URL here. So service URL. So if I click Control and I run this. Now you can see that our website has been deployed on the internet. And this is the current URL for your web site so you can share it with whomever you want in order for them to see your website. Of course, this is not a good name, but you can change this as well. There's, there's a way to link your own domain name to your cloud run app or cloud ground website. But for now, let's just stick with this because we have now a website that's deployed on the internet and anyone with this URL can check your work. So now that we have this, you can see that the process easy and you can do a lot of things. You can, you can change things and deploy your app again. And in the next video, I'll talk about this. 18. Updating our app and deploying it again: So now let's say that you want to change something on your website and redeploy it again. So for example, let's look for something that's not working correctly. Okay, maybe, maybe you want to remove this part here we have buttons. For example, you forgot that you don't need it and you've added it by mistake and let's say you want to change it or to remove it and then deploy your website again. So for that you don't need to stop the servers and or stop your website and then do the process of changing the code and deploy again. In fact, you can just keep the website as it is, it's running, but you can go to due to the code and you can change that. So let's say, for example, let's say we go to D, wasn't elements or generic, I think its elements. So let's go to elements that HTML and must look for buttons. So this is the section where we had the buttons. So let's say you forgot that you actually don't need this. And you want to remove them. So you just go through all of them buttons. And I'm just going to delete this and we're gonna save again. So the only thing you need to do is run those commands again for building. So first, we're going to build the same image and remember to keep the same name of the image. So it's my website. We're using the same project ID. And of course we want to push it to GPCR, Google Container Registry. So here we can run the same command again. And again. It might take some, sometime, maybe just few minutes or less. So it's basically doing the same process again. So the building process is finished and now our new image has been updated on the Google Container Registry. So let's just go back here. So if I refresh the page. So we still have these buttons here. And if I deploy my app or my service again. So it's clear this if d deployment part again. Let me click this and the same service and the same region of 13. So it's gonna do the deployment part again. So now it has deployed the same app, again just with the, with the different configurations. So now the buttons parts should be removed. So if I click this now you can see that it no longer exists on our website. So it was that simple to change anything on our website and deploy our app again, it was that easy. So with this, you can see how powerful this tool can be and how easy it is. And I hope that you see the benefits that come from using Python and flask on your using these tools in order to deploy your web site. 19. Final project and where to go from here: With this, you can see now that we have our final website deployed. And it has all the elements that we had in our template in it. And of course, you can change things. You can choose the right things for your specific scenario. Whether that be a website for your own profile, a website to do some service, so on and so forth. You have all of these options. And now that we have this website deployed, you can improve on your skills and depending on what you want to do next, whether you take in this just for learning purposes, you can, of course, maybe dig deeper into how flask works and how Docker works. For example, if you are not very familiar with HTML, then you can go through these templates here and change things and see how they effect your website. And if you're just here because you wanted to deploy your website quickly and easily using Google Cloud Platform. Then maybe another thing that you can check is how you connect your own domain to the website so that you no longer use this URL here, but rather a more easily readable URL. So with this, this will be the end of this course and see you in a future course.