Using NGINX to proxy flask and camera

In my previous posts, I have managed to get webcam feeds and Flask serving a webpage. Now I want to use NGINX (pronounced “engine x”) to bring everything together and run it all on port 80 (HTTP)¹.

I have moved the ports around for Flask and the cameras to rationalise them a bit. I have not moved Mosquitto as that service is not being proxied by the web server.

Installing NGINX

To get this all to work, we need to install the NGINX web server. We are going to configure it to serve the static assets directly, so that Flask is not doing that as well

sudo apt install nginx
sudo usermod -a -G pi www-data
cd /home
chmod a+x pi -R

The above command installs the NGINX web server, adds the user pi to the www-data group, and sets the correct modes on the/home/pi folder so that the web server can serve files in the folder.

NGINX config

With the above ports, we now edit the file /etc/nginx/sites-available/default with the following:

server {
  # Listen on port 80
  listen 80 default_server;
  listen [::]:80 default_server;

  # Enable gzip compression
  gzip on;
  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

  # Proxy requests to the Flask application
  location ^~ {
    proxy_pass http://127.0.0.1:8000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }

  # Serve static files
	location /static {
		alias /home/pi/ROV/Flask/static;
	}

  # Proxy camera streams to their respective ports
  location /cam1 {
    proxy_pass http://127.0.0.1:8001;
  }

  location /cam2 {
    proxy_pass http://127.0.0.1:8002;
  }
}

The above means that everything in the folder /static is served directly via NGINX from the folder /home/pi/ROV/Flask/static, which is why we needed to do the permissions change in the setup.

To get the changes in the NGINX config loaded, we need to restart nginx

systemctl restart nginx

/cam1 and /cam2 are proxied to Motion; this means going to rov.local/cam1 will serve the camera 1 feed.

The ^~ is the line that forwards everything else to Flask running on port 8000; in this instance, the only thing in this path is the single Flask app itself and paths within the Flask app are passed to Flask to serve.

1. I am not using HTTPS (port 443) because I am running it inside a private Tailscale network at the moment.