Serve SIMOC Web from an RPi Zero with Nginx

This page explains how to set up Nginx to serve the SIMOC live frontend from a Raspberry Pi Zero.

Build and copy the frontend

Since running Docker and Node on a Raspberry Pi Zero is problematic, it's better to build the frontend on a PC and copy the dist dir on the RPi Zero.

From a PC, run:

git clone git@github.com:overthesun/simoc-web.git
cd simoc-web
python3 simoc-web.py build  # build the frontend
scp -r dist pi@samrpi:/home/pi/  # copy the dist dir on the RPi Zero

Setup Nginx

ssh into the RPi Zero, and run:

sudo apt install nginx  # install nginx

Create the simoc_live file:

sudo vim /etc/nginx/sites-available/simoc_live  # create site config

Enter the following configuration:

server {
    listen 80 default_server;
    server_name samrpi;

    root /home/pi/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /socket.io/ {
        proxy_pass http://localhost:8081;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

The server_name must match the RPi hostname, the root dir the location of the dist dir. Make sure that the proxy_pass for the /socket.io/ location uses the correct port, and that the sioserver lists samrpi (or whatever the hostname is) in the CORS allowed origins.

Enable the simoc_live site:

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

Remove the default site:

sudo rm /etc/nginx/sites-enabled/default

Test the configuration:

sudo nginx -t

Restart nginx:

sudo systemctl restart nginx

Test from a PC

Open the browser on http://samrpi7/. If everything is ok it will load SIMOC web.