将Nginx用作反向代理时，我是否需要为expressjs中的纯websocket应用程序进行路由？

Question

Hard to write a proper title.

I have a pure websocket application which is based on an express server. In development mode the express server does some simple routing to access the html, js and png files. Basically it is a one page app that only handle websocket protocol. But in production mode, I delegate all that to Nginx so I don't do any routing in express production. I was expecting Nginx will find all these files on its "root" directory. I get a "Cannot Get /" error however.

TL;DR version:

When I use Nginx to serve static contents for a one page app, do I need to do anything in express routing? If so, how?

UPD (my Nginx settings, can find another more detail question here ):

upstream upstream_project {
    server 127.0.0.1:8888;
    keepalive 64;
}

server {
        listen 0.0.0.0:80 default_server;
        listen [::]:80 default_server ipv6only=on;

        root /usr/local/share/html;
        index index.html index.htm;

        # Make site accessible from http://localhost/
        server_name ws_server;

        location / {
                try_files $uri $uri/ index.html;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                proxy_set_header X-NginX-Proxy true;

                proxy_redirect off;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_pass http://upstream_project;
                proxy_read_timeout 240s;
        }
}

UPDATED :

I have found in Nginx log that the client is trying to access the server via ipv6. See this:

    kevent() reported that connect() failed (61: Connection refused) while
 connecting to upstream, client: ::1, server: ws_server, request: "GET / 
HTTP/1.1", upstream: "http://127.0.0.1:8888/", host: "localhost"

I remove the ipv6 server listen line ( listen [::]:80 default_server ipv6only=on; ) and have to change the try_files line to use file name explicitly.

try_files $uri $uri/app.js ;

Then I can get my app working. But I don't understand. Why do I have to do this?

I still can't access the static png file from the subdirectory of "root" folder. Any help would be appreciated.

Answer 1

NGINX supports WebSocket by allowing a tunnel to be set up between a client and a backend server. For NGINX to send the Upgrade request from the client to the backend server, the Upgrade and Connection headers must be set explicitly, as in this example:

location /wsapp/ {
    proxy_pass http://wsbackend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

Take a look on this NGINX guide for more details and examples.