Hosting Flask Apps on Nginx

Hi there, in this article, we would be looking at how to host a Flask app on Nginx (a webserver) on an Ubuntu Virtual Machine.

A webserver is a computer that has web server software installed (Apache, Nginx, Microsoft IIS) and serves resources, which could be webpages or multimedia files, over the web, to fulfill client's requests over the internet.

Nginx is a webserver that can be used as reverse proxy, load balancer, mail proxy and HTTP Cache. It is widely used due to it's ability to scale websites better.

The first thing, we do is to provision an Ubuntu Virtual Machine (I use Microsoft Azure) and then login to it via SSH.

To follow along with this article, you are expected to have a flask application already built and in a git repository. If you don't, you could use this

We then run the following command to update our repositories:

sudo apt update

Dependig on the version of your Ubuntu VM, you might want to upgrade your Python version.
After this, we continue with the steps below:

• Step 1: We clone our app's GitHub repository into our VM:

sudo apt update
git clone <repo-url>

• Step 2: We change our directory's name to app

ls
mv <repo-name>/ app

(The ls command is to list all the files and directories in our current work environment)

• Step 3: We cd into our directory, create a virtual environment and activate it

sudo apt-get install python3-venv
python3 -m venv <virtual-environment-name>
source <virtual-environment-name>/bin/activate

• Step 4: We install the requirements in our requirements.txt file

    pip3 install -r requirements.txt

run

pip3 list

to see a list of all installed dependencies

If uWSGI does not install, run the following;

sudo apt-get install build-essential python3-dev
pip3 install uwsgi

So far, so good!

• Step 5: Now, we check if our app runs on uwsgi, but first we have to set our Uncomplicated Fire Wall (ufw) to allow both incoming and outgoing connections on port 9090, the port we would be making use of.

sudo ufw enable
sudo ufw allow 9090

Expected result:

Running

sudo ufw status

shows us the current state of our firewall; whether it is active or not and the ports our firewall gives us access to.

• Step 6: run the following

uwsgi dev.ini

• You might see the following in the output:

run this,

sudo apt-get install libpcre3 libpcre3-dev
pip3 install uwsgi -I --no-cache-dir

then re-run the command

uwsgi dev.ini

In your browser visit

<vmipaddress>:9090/

We expect to see our Flask app displayed via this port.

• Step 7: we delete the firewall rule and deactivate our virtual environment

sudo ufw delete allow 9090
deactivate

• Step 8: install nginx

sudo apt install Nginx

Now, we check the apps recognized by ufw and instruct it to allow for connection to Nginx:

sudo ufw app list
sudo ufw allow 'Nginx HTTP'

To confirm if Nginx was properly installed, we type our VM's IP address in our browser.

Expected result:

Omoshiroi...

• Step 9: we create systemd unit file to reboot the server running our app

sudo nano /etc/systemd/system/<custom-name-of-service-app>.service

Example:

sudo nano /etc/systemd/system/app.service

And type in the following contents in our file:

[Unit]
Description=A simple Flask uWSGI application
After=network.target

[Service]
User=<yourusername>
Group=www-data
WorkingDirectory=/home/<yourusername>/app
Environment="PATH=/home/<yourusername>/app/venv/bin"
ExecStart=/home/<yourusername>/app/venv/bin/uwsgi --ini <name-of-app-ini file>

[Install]
WantedBy=multi-user.target

• Step 10: we enable the service file we just created

sudo systemctl start <name-of-app>
sudo systemctl enable app <name-of-app>

Expected output:

To check if the file is running, type:

sudo systemctl status app

Also if a mistake is made in our service file and we correct it, we have to reload the daemon and restart systemctl

• Step 11: we configure nginx by creating a config file

sudo nano /etc/nginx/sites-available/<name-of-file>

And type in the following contents:

server {
    listen 80;
    server_name <your_ip_address> <your_domain_name>;

    location / {
        include uwsgi_params;
        uwsgi_pass unix:/home/<username>/app/app.sock;
    }
}

*To check if there are any errors in our nginx configuration file, we run

sudo nginx -t

• Step 12: we link our config file to sites-enabled directory (Nginx server blocks configuration files are stored in /etc/nginx/sites-available directory, which are enabled through symbolic links to the /etc/nginx/sites-enabled/ directory):

sudo ln -s /<path-to-config-file>/<config-file-name> /etc/nginx/sites-enabled

Example:

sudo ln -s /etc/nginx/sites-available/app /etc/nginx/sites-enabled/

Running a syntax check at this point, comes in handy

• Step 13: we restart nginx for our changes to take effect

sudo systemctl restart nginx

In our browser, we type in our VM's IP address without adding a port becase in our nginx config file, we have defined a port for nginx to listen on

tada!!

IP address

Azure custom domain name

Feel free to share your IP address with friends to check out your app

Thank you for your time!!!

Find below the GitHub repo for this task:
Github repo

Feel free to connect with me via Linkedin

Gokigen'yō