Building and Deploying a Web Application with Flask: A Guide to Google Cloud Deployment
Websites are the basis of many enterprises and a better way to market any product or project. Running a website on a local host is never going to help you and one needs to host the website on a cloud service such as Google Cloud, Amazon Web Services, Heroku, etc.
In this article, I will walk you through creating a basic web application using Flask and deploying it to Google Cloud in 3 easy steps.
Step-1: Setting up dependencies
We would start by creating a virtual environment (optional) and installing Flask in it.
$ python -m venv env
$ . env/bin/activate
$ pip install FlaskStep-2: Creating a Flask web application
Next, we would create a Flask application. I have used Visual Studio code for this purpose because of its flexibility and interface. However, you are free to use any IDLE of your choice. We would create an `index.html` file and an `app.py` file. As per the requirement of Flask, we would have to keep the HTML file inside a template's directory. This is how the structure of the project would look once we have created the aforementioned files and guide.
Project
|--app.py
|--templates
|----index.htmlNow we would add code to the Flask web application.
# app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__=='__main__':
app.run(debug=True)<!-- index.html -->
<html>
<head>
<title>My first web app</title>
<body>
<h1> Hello Wold! </h1>
</body>
</head>
</html>In app.py, we first imported the required methods and initialized our application. We then added a decorator to let our Flask application know where to route on getting a specific URI. Specifying ‘/’ only means that we are indicating this function to be called on the landing (home) page. The function render_template would simply run the HTML file in the browser.
For this, we created a basic HTML file for demonstration purposes which would output a Hello World in the heading.
Next, create a `requirements.txt` file and add all of your dependencies to it. It would be something like this. Note that adding a unicorn package is mandatory as we would be requiring it in the next step.
# requirements.txt
flask
gunicornHaving our basic website ready, we would now move on to deploying that website on google cloud. I have pushed my application on GitHub in order to perform better version control.
Step-3: Deploying the Web App on Google Cloud
Navigate to google cloud console and log in/sign up. Google Cloud provides you with a trial subscription of around $300 to try out the platform. Though there are other options as well such as PythonAnywhere where you can deploy one web application for free and with certain limits. There another platform called Heroku where we can deploy our application. That also comes with certain pricing but we can reduce that as part of the GitHub Student Developer Pack.
Reach out to me on LinkedIn if you are struggling to get a GitHub Student Developer Pack.
However, for demonstration purposes, we would continue with Google Cloud. We need to create a project on Google Cloud. Click the dropdown next to the Google Cloud Icon on the top left. Create a new project or use the existing one.
After creating a new project, open up the Cloud Shell located in the top right corner. Since I have pushed my code to GitHub, I would simply perform `git clone` and get the project in my current environment. However, if you decide not to push the code on GitHub, you could simply go to the Cloud Shell Editor and upload your files there.
Another option could be to upload your code in Google Cloud Bucket and use from there but that is not the scope of this article.
In order to deploy your code, you would require to create an `app.yaml` file and populate it with the following code.
# app.yaml
runtime: python
env: flex
entrypoint: gunicorn -b :$PORT app:app
# Here we want app.py to be run and thus we mentioned app as
# the argument above. Keep in mind to replace it with your filename.
# Example. entrypoint: gunicorn -b :$PORT file_name:app
runtime_config:
operating_system: ubuntu22
# This sample incurs costs to run on the App Engine flexible environment.
# The settings below are to reduce costs during testing and are not appropriate
# for production use. For more information, see:
# https://cloud.google.com/appengine/docs/flexible/python/configuring-your-app-with-app-yaml
manual_scaling:
instances: 1
resources:
cpu: 1
memory_gb: 0.5
disk_size_gb: 10The choice of configuration is up to you and your application requirements.
The structure of the update Project directory would look like the following now —
Project
|--app.py
|--app.yaml
|--requirements.txt
|--templates
|----index.html# Finally run the following command in the cloud shell.
$ gcloud app deployThis would start deploying the website on the cloud and would take care of managing the commands in between.
You may have to constantly engage with it in case there is some error in your dependencies or directory structure.
It would also provide you with the link where the website is deployed. Go to the link and make sure everything is working.
I hope you found it useful and were able to perform your task. In case of any issues, reach out to me on LinkedIn — https://www.linkedin.com/in/sarthak-k/
Thanks 😉.
