Nginx `proxy_pass` not working with PST

[thakyZ]

Hi, I am not sure if this is an issue with PST, as I cannot seem to find anything that might help. But when I try using a nginx's proxy_pass with this tool in a docker container, it shows a completely blank page and nothing gets rendered. I have verified it does load the CSS and JavaScript correctly, however according to PST's logs the client only ever accesses the path /. However, if I were to connect directly to the web interface without nginx, PST's logs say that I access more than / in one connection attempt.

Here are the logs that I gathered showing this issue: https://gist.github.com/thakyZ/3ac86a0e6beef1afe4cf7b60a51484b5

As I said in the attached Notes.md file: The connection attempt at the timestamp 2024/02/14 - 12:03:12 was through Nginx's proxy_pass. While the connection attempts after the previously mentioned timestamp are directly.

And as I said, the JavaScript file named ./assets/index-CUhrvbMz.js and CSS file named ./assets/index-Fc-t_ZbM.css are loading properly, but I don't think they are executing what-so-ever.

Here are two screenshots of the browser console and network tab when I load it:

As you can see it loads those two script files just fine, I don't know why it's not working.

And lastly, here is the code for my NGINX config:

upstream palworld-server-tool {
  server 172.18.0.3:12002;
}

server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;
  server_name example.com;
  server_tokens off;

  ssl on;
  ssl_stapling on;

  root /var/www/html;
  index index.php index.html;
  access_log  /var/log/nginx/access.log;
  error_log   /var/log/nginx/error.log error;

  add_header X-Content-Type-Options "nosniff" always;
  add_header X-Frame-Options "SAMEORIGIN" always;
  add_header X-XSS-Protection "1; mode=block" always;
  add_header Referrer-Policy strict-origin-when-cross-origin always;

  keepalive_timeout 70;
  autoindex_localtime off;
  autoindex off;

  location /pal-server-tool/ {
    client_max_body_size 0;

    gzip off;
    gzip_http_version 1.1;

    proxy_read_timeout      300;
    proxy_connect_timeout   300;
    proxy_redirect          off;
    proxy_http_version 1.1;
    proxy_set_header HOST $http_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;
    proxy_pass_request_headers on;
    proxy_pass http://palworld-server-tool/;

    location ~ /favicon.ico {
      root /var/www/html;
      try_files /favicon.ico =404;
      log_not_found off;
      access_log off;
    }
  }
}

If you, your team, or anyone know what is wrong, and knows how to fix it, I would really love to know.

[zaigie]

I used docker containers and tried to configure nginx and ssl/tls, but there was no error... PST has now been updated to v0.6.0 with a lot of refactoring in between, maybe that solves your problem?

[hhzxxx]

me too

[zaigie]

I noticed the problem. You put the pst in the second-level uri (/pal-server-tool), which may cause the loading interface part of the JavaScript code to fail to connect to the correct file path.

Because I'm not a professional operation and maintenance engineer, I don't know why. It may be the front-end code, or there is a problem when Golang loads the front-end resources. I will take time to investigate. If you want to use it, you can try to put PST in location /

[thakyZ]

@zaigie I eventually had figured that out, what would I change in any of the configs to get it to work on a subdirectory (building the app locally?)

EDIT: I figured out how I would need to do it, but I am unsure if it's a thing in the Vite config as well as GoLang's code or either one of the two.

[Diluka]

https://vitejs.dev/guide/build#public-base-path

https://github.com/zaigie/palworld-server-tool/blob/0f1540bc93678f66263a957f08fad8d245553a90/web/vite.config.js#L15

@zaigie