mitchray / ample

A simple web browser client for Ampache
https://ample-player.vercel.app/
GNU Affero General Public License v3.0
63 stars 13 forks source link

Blank page when loading in nginx with non-standard port #33

Closed SimonHova closed 2 years ago

SimonHova commented 2 years ago

I host my ampache server on a non-standard port (5006), so I would access it at http://xxx.xxx.net:5006/ample . When I get there, I just get a blank page, and the line in page source looks for a link that isn't there:

<link rel='stylesheet' href='//xxx.xxx.net:5006/ample/public/build/bundle.css'>`

Interestingly, when trying to load the stable demo override line by uncommenting the line: detectedURL = "https://demo.ampache.dev"; from ample/src/stores/server.js I now get an entry in my nginx error log: 2022/09/01 08:15:37 [error] 19063#19063: *209 open() "/opt/ampache/public/ample/public/build/bundle.css" failed (2: No such file or directory), client: xx.xx.xx.xx, server: xxx.xxx.net, request: "GET /ample/public/build/bundle.css HTTP/1.1", host: "xxx.xxx.net:5006"

Could the port number in the url be throwing the script off? Or is there more rewriting that needs to be done in the nginx config file? Config file included below for completeness:

`server {

# listen to
# listen  [::]:used_port; #ssl; ipv6 optional with ssl enabled
listen       5006; #ssl; ipv4 optional with ssl enabled

server_name xxx.xxx.net;
charset utf-8;

# Logging, error_log mode [notice] is necessary for rewrite_log on,
# (very usefull if rewrite rules do not work as expected)

     error_log       /var/log/xbmc/ampache/error.log; # notice;
     access_log      /var/log/xbmc/ampache/access.log;
     rewrite_log     on;

# Use secure SSL/TLS settings, see https://mozilla.github.io/server-side-tls/ssl-config-generator/
# ssl_protocols TLSv1.2;
# ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-E    CDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256';
# ssl_prefer_server_ciphers on;
# add_header Strict-Transport-Security max-age=15768000;
# etc.

# Use secure headers to avoid XSS and many other things
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header X-Robots-Tag none;
add_header X-Download-Options noopen;
add_header X-Permitted-Cross-Domain-Policies none;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header Referrer-Policy "no-referrer";
add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval'; frame-src 'self'; object-src 'self'";

# Avoid information leak
server_tokens off;
fastcgi_hide_header X-Powered-By;

root /opt/ampache/public;
index index.php;

# Somebody said this helps, in my setup it doesn't prevent temporary saving in files
proxy_max_temp_file_size 0;

# Rewrite rule for Subsonic backend
if ( !-d $request_filename ) {
    rewrite ^/rest/(.*).view$ /rest/index.php?action=$1 last;
    rewrite ^/rest/fake/(.+)$ /play/$1 last;
}

# Rewrite rule for Channels
if (!-d $request_filename){
  rewrite ^/channel/([0-9]+)/(.*)$ /channel/index.php?channel=$1&target=$2 last;
}

# Beautiful URL Rewriting
    rewrite ^/play/ssid/(\w+)/type/(\w+)/oid/([0-9]+)/uid/([0-9]+)/name/(.*)$ /play/index.php?ssid=$1&type=$2&oid=$3&uid=$4&name=$5 last;
    rewrite ^/play/ssid/(\w+)/type/(\w+)/oid/([0-9]+)/uid/([0-9]+)/client/(.*)/noscrobble/([0-1])/name/(.*)$ /play/index.php?ssid=$1&type=$2&oid=$3&uid=$4&client=$5&noscrobble=$6&name=$7 last;
    rewrite ^/play/ssid/(.*)/type/(.*)/oid/([0-9]+)/uid/([0-9]+)/client/(.*)/noscrobble/([0-1])/player/(.*)/name/(.*)$ /play/index.php?ssid=$1&type=$2&oid=$3&uid=$4&client=$5&noscrobble=$6&player=$7&name=$8 last;
    rewrite ^/play/ssid/(.*)/type/(.*)/oid/([0-9]+)/uid/([0-9]+)/client/(.*)/noscrobble/([0-1])/bitrate/([0-9]+)/player/(.*)/name/(.*)$ /play/index.php?ssid=$1&type=$2&oid=$3&uid=$4&client=$5&noscrobble=$6&bitrate=$7player=$8&name=$9 last;
    rewrite ^/play/ssid/(.*)/type/(.*)/oid/([0-9]+)/uid/([0-9]+)/client/(.*)/noscrobble/([0-1])/transcode_to/(w+)/bitrate/([0-9]+)/player/(.*)/name/(.*)$ /play/index.php?ssid=$1&type=$2&oid=$3&uid=$4&client=$5&noscrobble=$6&transcode_to=$7&bitrate=$8&player=$9&name=$10 last;

    # The following line necessary for me to be able to download single songs
    rewrite ^/play/ssid/(.*)/type/(.*)/oid/([0-9]+)/uid/([0-9]+)/action/(.*)/name/(.*)$ /play/index.php?ssid=$1&type=$2&oid=$3&uid=$4action=$5&name=$6 last;

    # used for transfering art work to some clients, seems not to work for clementine because of an clementine-internal issue
    location /play {
                     if (!-e $request_filename) {
                             rewrite ^/play/art/([^/]+)/([^/]+)/([0-9]+)/thumb([0-9]*)\.([a-z]+)$ /image.php?object_type=$2&object_id=$3&auth=$1;
                             break;
                     }
                     rewrite ^/([^/]+)/([^/]+)(/.*)?$ /play/$3?$1=$2;
                     rewrite ^/(/[^/]+|[^/]+/|/?)$ /play/index.php last;
                     break;
    }

location /rest { limit_except GET POST { deny all; } }

location ^~ /bin/ { deny all; return 403; }

location ^~ /config/ { deny all; return 403; }

location / { limit_except GET POST HEAD{ deny all; } }

location ~ ^/.*.php { fastcgi_index index.php;

# sets the timeout for requests in [s] , 60s are normally enough
    fastcgi_read_timeout 600s;

    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

# Mitigate HTTPOXY https://httpoxy.org/
    fastcgi_param HTTP_PROXY "";

# has to be set to on if encryption (https) is used:
    # fastcgi_param HTTPS on;

    fastcgi_split_path_info ^(.+?\.php)(/.*)$;

# chose as your php-fpm is configured to listen on
    fastcgi_pass unix:/run/php/php8.0-fpm.sock;
    # fastcgi_pass 127.0.0.1:8000/;

}

Rewrite rule for WebSocket

location /ws { rewrite ^/ws/(.*) /$1 break; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_pass http://127.0.0.1:8100/; } } `

SimonHova commented 2 years ago

Good news, now it registers an error in the error.log file, that /ample/public/build/bundle.js is not found. It looks (to my very untrained eye) that it's being dynamically built? Not sure where it gets called from.

mitchray commented 2 years ago

Sorry I deleted my comment just before yours as I didn't think it was right, are you saying you tried what I suggested?

SimonHova commented 2 years ago

I did what you said, unfortunately there was no change to the page or the page source, but now it's reporting an error to the error log that the bundle.js file is not found; before it wasn't even reporting an error.

mitchray commented 2 years ago

Ah ok, I'm leaning towards it being an nginx issue as it works on a test machine with localhost:8888/ampache/ample

Otherwise, are you using one of the pre-built Ample releases? Its built with Svelte which requires compiling, so if you're just using the raw git repo that could be why

SimonHova commented 2 years ago

Yes! The problem was indeed that I was cloning directly from git, the pre-built release works brilliantly. Sorry, I should have read the installation directions closer. Looking forward to digging into this now!