In this post, we will see how to deploy a <a title="flask homepage" href="https://flask.palletsprojects.com/en/2.3.x/" target="_blank" rel="noopener">Flask</a> application using the Gunicorn WSGI server and&nbsp;<a title="nginx homepage" href="https://www.nginx.com/" target="_blank" rel="noopener">nginx</a> as a reverse proxy and static files server.
We will&nbsp;configure&nbsp;<a href="https://www.nginx.com/">Nginx</a> to act as a front-end reverse proxy in an Ubuntu VPS. Although this guide uses Ubuntu 22.04, it was last tested on Ubuntu 23.04, Ubuntu 22.04 LTS, Ubuntu 20.04 LTS, Ubuntu 18.04 LTS, and Ubuntu 16.04 LTS in 2023 and should work on future versions of Ubuntu as well.
<h2>Prerequisites</h2>
Before starting this guide, you should have:
<ul style="margin-top: 0cm;" type="disc">
<li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt;">A <a title="google cloud page on what is a vps" href="https://cloud.google.com/learn/what-is-a-virtual-private-server" target="_blank" rel="noopener">Virtual Private Server (VPS)</a> with Ubuntu installed</li>
<li class="MsoNormal" style="mso-list: l0 level1 lfo1; tab-stops: list 36.0pt;">A domain name configured to point to your server (optional)</li>
</ul>
Follow the steps below:
<h2>Step 0 - Create a sudo non-root user</h2>
If you are logging in to your server as root, you need to create a non-root sudo user. Let's create a sudo non-root user named harry using the command below:
<pre class="language-markup"><code>adduser harry</code></pre>
Choose a password and fill in all the details.&nbsp;Now let's give sudo access to user harry
<pre class="language-bash"><code>usermod -aG sudo harry</code></pre>
Now exit the machine and log back in with the newly created user harry
<pre class="language-bash"><code>exit</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/flask-app-deploy-using-gunicorn-nginx/add-user-harry.png" width="696" height="468">
<h2>Step 1 - Install the required packages</h2>
Login to your Ubuntu machine using SSH with your sudo non-root user. I will log in as harry using "ssh harry@&lt;my server ip&gt;". Provide the password you chose at step 0
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/flask-app-deploy-using-gunicorn-nginx/login-with-harry.png" width="691" height="597">
Before we install the packages, let's update the package index
<pre class="language-bash"><code>sudo apt update</code></pre>
Next, you need to install the packages that will allow you to create your Python environment. These packages include python3-pip, which is a Python package manager, as well as a few other development tools that are essential for a robust programming environment. Let's install python3, python3-pip, and Nginx using the commands below:
<pre class="language-bash"><code>sudo apt install python3-pip python3-dev nginx -y</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/flask-app-deploy-using-gunicorn-nginx/installing-packages.png" width="657" height="524">
You might get a prompt asking "Which services should be restarted?". Simply press the &lt;spacebar&gt; key to select the first option and press enter to continue the installation as shown below:
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/flask-app-deploy-using-gunicorn-nginx/which-service-restarted.png" width="711" height="545">
<h2>Step 2 - Create a directory (for our Flask app) and setup a virtual environment</h2>
Let's install virtualenv
<pre class="language-bash"><code>sudo pip3 install virtualenv</code></pre>
I am deploying my app inside <code>/home/harry</code> directory. If you want to deploy your app to a different directory, switch to that directory. If you want to check which directory you are in, fire the command below:
<pre class="language-bash"><code>pwd</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/flask-app-deploy-using-gunicorn-nginx/deploy-directory-check.png" width="703" height="375">
Let's now create a directory to host our Flask application
<pre class="language-bash"><code>mkdir myFlaskApp &amp;&amp; cd myFlaskApp</code></pre>
run the following command to create a virtual environment named env
<pre class="language-bash"><code>virtualenv env</code></pre>
Finally, activate the virtual environment
<pre class="language-bash"><code>source env/bin/activate</code></pre>
Let's now install Flask and Gunicorn using pip
<pre class="language-bash"><code>pip3 install flask gunicorn</code></pre>
<h2>Step 3 - Creating a sample project and WSGI entry point</h2>
Let us now create a sample project by entering the command below:
<pre class="language-bash"><code>vim app.py</code></pre>
Paste the contents below to the app.py file
<pre class="language-python"><code>from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
 return "Hello World!"
if __name__ == '__main__':
 app.run(debug=True,host='0.0.0.0')</code></pre>
Next, we&rsquo;ll create a file that will serve as the entry point for our application. This will tell our Gunicorn server how to interact with the application.
<pre class="language-bash"><code>vim wsgi.py</code></pre>
Next, copy the contents below to file wsgi.py
<pre class="language-bash"><code>from app import app

if __name__ == "__main__":
 app.run()</code></pre>
We can test Gunicorn's ability to serve our project by running the command below:
<pre class="language-bash"><code>gunicorn --bind 0.0.0.0:5000 wsgi:app</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/flask-app-deploy-using-gunicorn-nginx/gunicorn-working.png" width="727" height="337">
Folder structure so far:
<pre class="language-markup"><code>myFlaskApp
 |____ app.py
 |____ wsgi.py
 |____ env</code></pre>
Let's deactivate our virtual environment now:
<pre class="language-bash"><code>deactivate</code></pre>
<h2>Step 4 - Creating a systemd service</h2>
Let's now create a systemd service using the following commands:
<pre class="language-bash"><code>sudo vim /etc/systemd/system/app.service</code></pre>
Now paste the contents below to this file:
<pre class="language-markup"><code>[Unit]
# specifies metadata and dependencies
Description=Gunicorn instance to serve myproject
After=network.target
# tells the init system to only start this after the networking target has been reached
# We will give our regular user account ownership of the process since it owns all of the relevant files
[Service]
# Service specify the user and group under which our process will run.
User=harry
# give group ownership to the www-data group so that Nginx can communicate easily with the Gunicorn processes.
Group=www-data
# We'll then map out the working directory and set the PATH environmental variable so that the init system knows where our the executables for the process are located (within our virtual environment).
WorkingDirectory=/home/harry/myFlaskApp/
Environment="PATH=/home/harry/myFlaskApp/env/bin"
# We'll then specify the commanded to start the service
ExecStart=/home/harry/myFlaskApp/env/bin/gunicorn --workers 3 --bind unix:app.sock -m 007 wsgi:app
# This will tell systemd what to link this service to if we enable it to start at boot. We want this service to start when the regular multi-user system is up and running:
[Install]
WantedBy=multi-user.target</code></pre>
Activate this service by typing:
<pre class="language-bash"><code>sudo systemctl start app</code></pre>
<pre class="language-bash"><code>sudo systemctl enable app</code></pre>
A file named app.sock will be automatically created. Folder structure so far:
<pre class="language-markup"><code>myFlaskApp
 |____ app.py
 |____ wsgi.py
 |____ env
 |____ app.sock</code></pre>
&nbsp;
<h2>Step 5 - Configuring Nginx</h2>
Create a file named app inside /etc/nginx/sites-available
<pre class="language-bash"><code>sudo vim /etc/nginx/sites-available/app</code></pre>
Now copy the below contents to this file:
<pre class="language-bash"><code>server {
listen 80;
server_name 194.195.112.179;

location / {
 include proxy_params;
 proxy_pass http://unix:/home/harry/myFlaskApp/app.sock;
 }


location /static {
 include /etc/nginx/mime.types;
 root /home/harry/myFlaskApp/;
 }
}</code></pre>
The <code>location /static</code> part of this file takes care of serving the static files through nginx.
Important: I have used my server IP, you should use yours. If you are using a domain name pointing to the server IP address, use that domain instead of the server IP address!
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/blogpost/flask-app-deploy-using-gunicorn-nginx/replace-your-ip-here.png" width="587" height="137">
Activate this configuration by executing this:
<pre class="language-bash"><code>sudo ln -s /etc/nginx/sites-available/app /etc/nginx/sites-enabled</code></pre>
<h2>Step 6 - Providing necessary Permissions</h2>
Lets run the following commands to setup required permissions
<pre class="language-markup"><code>sudo chmod 775 -R /home/harry/myFlaskApp</code></pre>
<pre class="language-markup"><code>sudo chmod 775 -R /home/harry</code></pre>
Restart nginx and your website should work fine!
<pre class="language-bash"><code>sudo systemctl restart nginx</code></pre>
Visit your server IP address or domain on your browser. I am visiting http://165.232.177.116/ on my browser. This is how my browser looks like:
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/blogpost/flask-app-deploy-using-gunicorn-nginx/site.webp" width="657" height="411">
If you are using a firewall (for eg. ufw), don't forget to allow nginx to receive incoming traffic on port 80
<pre class="language-bash"><code>sudo ufw allow 'Nginx Full'</code></pre>
Happy coding!

How to deploy flask app on Ubuntu 22.04 VPS using Nginx and gunicorn

Add a new comment