Using Nginx reverse proxy returns 404 for the POST to socket.io, but the GET works. about angular2-sails

[joeherold]

I dont know, why you add an additional proxy for the socket.io path.

I use NginX config like that, for the whole sails application

server {
    listen 8080;
    
    server_name example.com;

    location / {
        proxy_pass http://10.0.1.127:1337;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP       $remote_addr;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

in your app, you define the host and port (in this case host ist example.com and port 8080) where the socket should connect to. and I do not add an proxy redirect....

you should be fine by passing the host and port in the connection options...

...
ngOnInit() {
    this._sailsService.connect("http://yourDomain.com:9080");
    // or
    letl opts = {
        url: "http://yourDomain.com:9080",
        transports: ['polling', 'websocket'],
        headers: {...},
        ...
    }
    this._sailsService.connect(opts);
}
...

[joeherold]

If you are not passing a host and port, socket.io will connect to the location, where it was requested from.

so opening the app with http://yourdomain.com:9080 will connect to yourdomain:9080

[ChrisWorks]

Thanks for the reply, but your config will pass all request to Nginx to the backend, right? My Angular app is not served from Sails. I only use the Sails as a REST api.

My Angular app is being served from Nginx.

    server {
        listen       8090;
        server_name  localhost;
        root /Users/xyz/Sites/dist;
        index index.html index.htm;

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

        location /socket.io/ {
            proxy_pass      http://127.0.0.1:1338/;
            proxy_redirect  http://127.0.0.1:1338/ /;
            proxy_read_timeout 60s;

            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            # May not need or want to set Host. Should default to the above hostname.
            proxy_set_header          Host            $host;
            proxy_set_header          X-Real-IP       $remote_addr;
            proxy_set_header          X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }

Basically I want my backend to respond to localhost:9080/api (seperate config) and localhost:9080/socket.io/ through the proxy config and all other urls including localhost:9080/index.html should be served from Nginx only.

[joeherold]

so your angular app is behind a proxy and your sails is behind a proxy.

so, than host sour sails under api.mydomain.com on port 80 and your app under whatever, www.mydomain.com or app.mydomain.com also on port 80.
in your nginx you set up 2 listeners on 2 domains/ports, one for sails, one for the app.
in your app you connect to api.mydomain.com:80 and you are fine to go

i will close this issue, because it is related to your NginX configuration and not to this ng2-module.

[ChrisWorks]

Hi Joe

Thanks for your reply. I am sorry for the misunderstanding, but my angular2 app is not behind a proxy. The Nginx is serving the Angular2 app using the static HTML built using "ng build" from the root /Users/xyz/Sites/dist folder.

I then want the Angular2 app to connect to the Sails backend using the same hostname:port/api, but the "/socket.io/" has to exist as well apparently.

If I follow your config the Nginx will only work as a reverse_proxy and cannot server the angular2 app from its static HTML files, correct?

How do you serve your angular2 app?

[joeherold]

do not connect to the same host/port as your angular2 app is running on. connect to the host/port of your sails application

[joeherold]

i host them together in one application, so the built comes into the sails application. and then i connect to the public host

[ChrisWorks]

OK, we did that as well originally, but having the sails application serve the static html/javascript, that makes up the angular part of the app, seems like a bad idea. Why not use a web server for serving the static HTML/Javascript/CSS/images? That is what it is good at, right?

[joeherold]

sure, you are free to do it in any way. I dont say whats good an whats bad habit. you asked me how I serve an angular/sails app. thats what I do, because sails offers me the webserver right up anyway. in fact, sails is nothing else, than a web server process, just with less features. and behind a NginX, I can enable caching for the static stuff, what reduces payload on the sails application.

but feel totally free on how to achieve your solution. I heavily depends on your needs of your project.

so, splitting it apart, is a way to do so. when the sails service crashes (if not clustered) your frontend is useless anyway. the other way round depends on what you use of sails.

and when I cluster the sails app, including my frontend, my frontend is clustered also. so for me that way is less work to do.