Build and deploy Flask app with Gunicorn and Nginx
This tutorial describes how to build Flask based bitcoin price web application by using Gunicorn, Nginx and CoinGecko API to access the data from open online service.
Introduction
Flask is a web application framework and in order to serve the content to the client (web browser), web server is needed. There are multiple web server options like Apache via WSGI module or fully stand-alone WSGI server like uWSGI or Gunicorn.
Gunicorn 'Green Unicorn' is a Python WSGI HTTP Server for UNIX. It is strongly recommend using Gunicorn behind a proxy server. Although there are many HTTP proxies available, it is strongly advised that you use Nginx. If you choose another proxy server you need to make sure that it buffers slow clients when you use default Gunicorn workers. Without this buffering Gunicorn will be easily susceptible to denial-of-service attacks.
Nginx is an open source software for web serving, reverse proxying, caching, load balancing, media streaming, and more. It started out as a web server designed for maximum performance and stability. In addition to its HTTP server capabilities, Nginx can also function as a proxy server for email (IMAP, POP3, and SMTP) and a reverse proxy and load balancer for HTTP, TCP, and UDP servers.
Build Bitcoin price web app with Flask
In this tutorial PyCharm Python development IDE is used. Before creating the app verify you have installed python 3. If not depends on your distribution available version
$ sudo apt-get update
$ sudo apt-get install python3.9To create the app by using PyCharm go to New Project
and select project type Flask
Result application structure looks like
Install the required modules
$ pip3 install flask gunicorn pycoingeckoUpdate app.py file to handle the requests like
from flask import Flask, render_template
from pycoingecko import CoinGeckoAPI
from datetime import datetime
app = Flask(__name__)
cg = CoinGeckoAPI()
@app.route('/')
def bitcoinhistory():
# historical_data = cg.get_coin_history_by_id(id='bitcoin', date='10-11-2020', localization='false')
current_price = cg.get_price(ids='bitcoin', vs_currencies='usd')
historical_data = cg.get_coin_market_chart_by_id(id='bitcoin', vs_currency='usd', days='1')
xValues = []
yValues = []
for p in historical_data['prices']:
# dt_object = datetime.utcfromtimestamp(p[0] / 1000).strftime('%Y-%m-%d %H:%M:%S')
dt_object = datetime.utcfromtimestamp(p[0] / 1000).strftime('%H:%M:%S')
xValues.append(dt_object)
yValues.append(p[1])
return render_template('index.html', price="${:.2f}".format(current_price['bitcoin']['usd']), xValues=xValues,
yValues=yValues)
# Press the green button in the gutter to run the script.
if __name__ == '__main__':
app.run(debug=False, host='0.0.0.0')
Create template in the templates directory index.html
<!DOCTYPE html>
<html lang="en">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
background: black;
color: white;
max-width: 80%;
margin-top: 100px !important;
margin-left: 100px !important;
margin-right: 100px !important;
float: none !important;
}
</style>
<title>Title</title>
</head>
<body>
<p style="font-size: 60px; font-weight: bold">{{price}}</p>
<p id="current_date"></p>
<canvas id="myChart" style="width:100%; max-width: 900px"></canvas>
<script>
new Chart("myChart", {
type: 'line',
data: {
labels: {{ xValues | tojson }},
datasets: [{
label: 'BTC/USD',
fill: false,
backgroundColor: "rgba(255,80,80,1.0)",
borderColor: "rgba(255,80,80,1.0)",
data: {{ yValues | tojson }}
}]
},
options: {
scales: {
// xAxes: [{gridLines: { color: "#cccccc" }}],
yAxes: [{gridLines: {color: "#cccccc"}}],
}
}
});
// print date
document.getElementById("current_date").innerHTML = new Date().toLocaleDateString();
</script>
</body>
</html>Test your application by predefined run configuration by PyCharm
and your result should look like
Add WSGI configuration
In order to create wsgi entry point we will add wsgi.py python file in the project directory (same directory as app.py) with the following content
from app import app
if __name__ == '__main__':
app.run()To test serving app via Gunicorn WSGI server we are going to create the following run configuration in PyCharm
Create WSGI socket
Communication between Gunicorn and Nginx will be socket based communication. In order to create the socket we will update the run configuration like
Socket file in our case is created in the project directory. Gunicorn is started with 2 workers and socket is binded by providing the socket file path. An other argument umask is provided to the parameter list to set the bit mask for the file mode on files written by Gunicorn.
Nginx coinfiguration
Create Nginx configuration file in the nginx configuration sub-directory sites-available
with the following content
server {
listen 80;
location / {
include proxy_params;
proxy_pass http://unix:/data/DEVELOPMENT/TEST/Python/bitcoinprice/wsgi.sock:/;
}
}and than create symbolic link in the sites-enabled directory
$ ln -s /etc/nginx/sites-available/wsgi /etc/nginx/sites-enabled
With this nginx configuration all the requests received on port :80 are proxy passed to the socket.
Test nginx configuration
Test your app by accessing http://localhost
All done!
References
Flask
Gunicorn - WSGI server
NGINX
How to build a Flask app with WSGI and Nginx
CoinGecko
