Butterfly with nginx reverse proxy and https

This wiki shows how to setup Butterfly with nginx reverse proxy on ubuntu 16.04 and ArchLinux. The url will be https://example.com/butterfly, and it's protected by basic access authentication.

1. Install nginx

Ubuntu 16.04

apt-get install nginx

ArchLinux

pacman -S nginx-mainline

2. Install virtualenv

Ubuntu 16.04

apt-get install virtualenv

ArchLinux

pacman -S python-virtualenv

3. Install butterfly

mkdir -p /var/www/butterfly
cd /var/www/butterfly
virtualenv -p python3 venv

source venv/bin/activate
pip install butterfly
pip install libsass
deactivate

4. Run test

/var/www/butterfly/venv/bin/butterfly.server.py --unsecure --login=true --host=127.0.0.1

Make sure there is no error.

[W 170220 21:15:31 butterfly.server:317] Butterfly is ready, open your browser to: http://127.0.0.1:57575/

5. Add systemd service

vi /etc/systemd/system/butterfly.service

[Unit]
Description=Butterfly service
After=network.target

[Service]
ExecStart=/var/www/butterfly/venv/bin/butterfly.server.py --unsecure --login=true --host=127.0.0.1
Restart=always
StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=buttefly

[Install]
WantedBy=multi-user.target

Start and enable butterfly service.

systemctl enable butterfly
systemctl start butterfly
systemctl status butterfly

6. Add nginx config

Replace example.com with your domain name.

server {
    listen       80;
    listen       443 ssl;

    listen       [::]:80;
    listen       [::]:443 ssl;

    server_name  example.com;
    ssl_certificate certs/example.com.chained.crt;
    ssl_certificate_key certs/example.com.key;

    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         HIGH:!aNULL:!MD5;

    charset utf-8;

    access_log  /var/log/nginx/$host.access.log;

    client_max_body_size 20M;

    root   /var/www/;
    index  index.html index.htm;

    if ($ssl_protocol = "") {
        return 301 https://$http_host$request_uri;
    }

    location / {
        try_files $uri $uri/ =404;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location /butterfly {
        auth_basic "Authentication required";
        auth_basic_user_file /etc/nginx/.htpasswd;

        rewrite ^/butterfly/?(.*) /$1 break;
        proxy_pass http://127.0.0.1:57575;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header Origin "$scheme://$host";

        proxy_connect_timeout 7d;                                                                                                              
        proxy_send_timeout 7d;                                                                                                                 
        proxy_read_timeout 7d;

        sub_filter_once off;

        sub_filter_types text/css text/xml application/javascript;
        sub_filter /style.css '/butterfly/style.css';
        sub_filter /static '/butterfly/static';
        sub_filter /ws '/butterfly/ws';
        sub_filter /themes '/butterfly/themes';
        sub_filter location.pathname '"/"';
    }

    rewrite ^/theme/?(.*)/butterfly/?(.*) /butterfly/theme/$1/$2 permanent;
}

sub_filter will replace the response from butterfly to the correct ones. proxy_*_timeout is set to a long time otherwise the web terminal will get closed after about 1 minute. /etc/nginx/.htpasswd is generate by htpasswd:

htpasswd -c /etc/nginx/.htpasswd YOUR_HTTP_AUTH_USER_NAME

certs/example.com.chained.crt and certs/example.com.key is your ssl key.

Don't forget to test and restart the service

nginx -t
systemctl restart nginx

7. Using the web terminal

Just visit https://example.com/butterfly and check if everything is OK.