Search code examples
cssnginxreverse-proxyoctoprint

CSS/JS files not showing from server to reverse-proxy OctoPrint server via Nginx


I've got a Nginx server running on website https://example.com. I'm trying to serve a page (from an OctoPi) via reverse proxy, on another remote server that I own/admin, served at http://1.2.3.4:1988.

I can serve up the main page at https://example.com/foo/, but the css and js files are not loading. The console shows that files such as https://example.com/foo/static/webassets/packed_libs.css are giving a 404 error. If I access https://1.2.3.4:1988/foo/static/webassets/packed_libs.css I can read the css file.

I'm sure my nginx config file in /etc/nginx/sites-available/default is probably fubar-ed, but I can't seem to figure out where, since the error nor access logs expose anything wrong, nor do the haproxy logs on the OctoPi.

Nginx config file:

server {
    listen 80;
    server_name www.example.com;
    listen [::]:80 default_server;
    return  301 https://example.com$request_uri;
}

server {
    listen 443 ssl;
    server_name www.example.com;
    return 301 https://example.com$request_uri;
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; 

    # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
    server_name www.example.com;
    return 301 https://example.com$request_uri;
}

server{
    listen 80;
    server_name example.com;
    root /var/www/example.com/public;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
        include /etc/nginx/mime.types;
        default_type application/octet-stream;
    }

    location ^~ /foo {
        # Redirecting via reverse proxy to OctoPi server
        proxy_pass http://1.2.3.4:1988/;
        proxy_redirect default;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        include mime.types;
        sub_filter '/i18n/' '/foo/i18n/';
        sub_filter '/static/'  '/foo/static/';
        sub_filter_once off;
    }

    location /foo/sockjs {
        proxy_pass http://1.2.3.4:1988/;
        proxy_http_version 1.1;
        proxy_redirect off;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;

    location = /50x.html {
        root /var/www/example.com/public;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;

        # With php7.0-cgi alone:
        # fastcgi_pass 127.0.0.1:9000;
        # With php7.0-fpm:
        fastcgi_pass unix:/run/php/php7.0-fpm.sock;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
    if ($scheme != "https") {
        return 301 https://$host$request_uri;
    } # managed by Certbot

}

Solution

  • I found the documentation to my question here: https://github.com/foosel/OctoPrint/wiki/Reverse-proxy-configuration-examples

    I will include the relevant portion for posterity:

    server {
                listen       80;
                server_name  localhost;
    
                location /foo {
                    proxy_pass http://1.2.3.4:1988; # NO trailing slash here!
                    proxy_set_header Host $http_host;
                    proxy_set_header Upgrade $http_upgrade;
                    proxy_set_header Connection "upgrade";
                    proxy_set_header X-Real-IP $remote_addr;
                    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_set_header X-Scheme $scheme;
    
                    client_max_body_size 0;    
                }
                ...
    

    However, I've since moved to back to Apache, since I'm more familiar with its setup and usage.