Nginx Websocket Configuration for Dual Proxies - nginx

I am trying to make websocket requests to go through two nginx proxies. It is to do SSR(server side rendering)
My stack is like:
External World <-> nginx <-> rendora(SSR) <-> nginx <-> daphne <-> django
When I was doing
External World <-> nginx <-> daphne <-> django
Websocket connections were established very well. But when I implemented rendora(SSR) and added another proxy to nginx, it does not work. Websocket connection fails while handshakes. I guess "Upgrade" requests fail somewhere in my nginx servers. My nginx conf is like below:
server {
listen 8000;
location / {
include proxy_params;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://unix:/home/ubuntu/myproject/myproject.sock;
}
}
server {
server_name mydomain;
charset utf-8;
location /static {
alias /home/ubuntu/myproject/apps/web-build/static;
}
location / {
include proxy_params;
proxy_pass http://127.0.0.1:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
listen 443 ssl; # managed by Certbot
...
}
So the location / port 443 sends all requests from external world to 127.0.0.1:3001 where rendora(SSR server) is listening to. And the SSR server (rendora) forwards them to 127.0.0.1:8000 where nginx proxy to connect to daphne unix socket.
SSR itself works well except the websocket requests.
But I have no idea why websocket upgrade is not done when requests have to go through two nginx proxies.

I solved it by making /graphql websocket requests going directly to Daphne server. I still have no idea why websocket connection does not work when I route them to another nginx proxy server.
location /graphql {
include proxy_params;
proxy_pass http://unix:/home/ubuntu/myproject/myproject.sock;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
location / {
include proxy_params;
proxy_pass http://127.0.0.1:3001;
}

Related

Using reverse proxy to expose code-server to the internet

I have installed code-server on my Plesk VPS, and i was wondering how to expose it to the outside world using a reverse proxy.
Currently code-server is bound to 127.0.0.1:8080, and if i use wget via SSH i get the expected page.
How do i go about exposing code-server to the internet (using reverse proxy) on Plesk/CentOS
I’ve tried using vhost_nginx.config file but to no luck
location ~ / {
proxy_pass http://localhost:8080;
proxy_read_timeout 90;
}
You can try using my nginx config, change app URL and app port if needed, put it in /etc/nginx/sites-available than use symlink to /etc/nginx/sites-enabled, and don't forget to restart nginx.
server {
listen 80;
server_name example.com; #change app url
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://127.0.0.1:8080; #change app port
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# location /overview {
# proxy_pass http://127.0.0.1:8080$request_uri; #change app port
# proxy_redirect off;
# }
}
}

How to use nginx for nuxt js as proxy and http server?

I have a NUXT js application on Ubuntu 20.04 Server. I used Nginx to serve my nuxt application as follow:
server {
client_max_body_size 300M;
root /var/www/app/dist;
server_name example.com;
location / {
proxy_pass http://localhost:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
My NUXT application works with npm on port 8080 and Nginx reverse proxy, passes user requests to localhost:8080 and everything is working fine.
Now I want to access the js service worker file (named: p-sw.js). but when I try to access it via my website address, (https://example.com/p-sw.js) due to Nginx reverse proxy it returns 404. This file is in the dist folder (see Nginx configuration).
Anybody can explain to me how to set Nginx reverse proxy to works fine as before alongside load service worker file when I enter service worker address (https://example.com/p-sw.js) in browser?
Finally, I solved it!
the Nginx config must look like this:
upstream backend {
server localhost:3000;
}
server {
server_name example.com;
client_max_body_size 300M;
root /var/www/app/dist;
location /p-sw.js {
try_files $uri #backend;
add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
expires off;
proxy_no_cache 1;
}
location #backend {
proxy_pass http://backend;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
In this configuration, I solved the issue by defining the location /p-sw.js for my service worker file, and for Nuxt routes, I used the same proxy pass!

Nginx redirect from one domain to dynamic domain?

I have two instances of nginx server running one with corporate ip and second with internal ip.I want a link from external nginx get redirected to internal nginx server and use external nginx as gateway. Also need to make sure that internal nginx running on dynamic IP
Tried to use variable for dynamic IP as shown in code snippet
location /route/(?<section>.+){
proxy_bind 172.31.*.*;
proxy_pass http://$section/single-table-view;
proxy_set_header Host $http_host;
}
You need to configure nginx as mentioned below:
If you want to redirect your External nginx to Internal nginx you should configure your External server like:
server {
listen 80;
listen [::]:80;
server_name domain_name;
location / {
proxy_pass http://InternalNginxIpAddress:PortYouWant;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Now each request from External nginx will be forwarded to Internal nginx, where your Internal nginx server is set as
proxy_pass http://localhost:PortYouWant;

nginx routing wss and https trafffic, listen on same port

I have nginx listening on port <public_ip>:443.
It gets both wss and https requests.
I am already redirecting https traffic to localhost:3000.
Is is possible to redirect wss to localhost:10443?
https://balbla.com:443 -> NGINX -> http://localhost:3000
wss://blabla.com:443 -> NGINX -> wss://localhost:10443
I think it's possible if you put websocket connect behind a URL. With below config, you can connect WSS at wss://hostname/websocket/:
location /websocket/ {
proxy_pass ​http://localhost:10443;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_read_timeout 86400;
}

does nginx have to listen on port 80?

I have a node app that uses websockets which is working on local host but not in production. In production, the messages being posted aren't appearing in the client. Since it's using socket.io, I'm assuming this is a problem with the ports. In production, I'm using nginx with this as the following config. Nginx is listening on port 80 but I have the port for the application at localhost:3000. Every nginx config I've ever seen has it listening on port 80, and I've heard problems will result if I set localhost below 1000, yet I believe the socket.io is not working because these ports are not the same. Can you suggest how to fix this problem?
/etc/nginx/conf.d/example.com.conf
server {
listen 80;
server_name mydomain.com;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

Resources