Can't reverse proxy Node backend using Nginx - node.js

I'm working with Angular11 + NodeJS on AWS EC2.
I'm trying to set up a reverse proxy using nginx.
nginx:
server {
listen 80;
listen [::]:80;
server_name http://MY-AWS-IP.com;
root /home/ubuntu/dashboard/frontend/dist/frontangular;
server_tokens off;
index index.html index.htm;
location /auth/ {
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;
}
location /groceries/ {
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;
}
}
node: (running on pm2)
... Some stuff
const ports = process.env.PORT || 3000;
app.use("/groceries", groceryRoutes);
app.use("/auth", loginRoutes);
app.listen(ports, () => console.log(`listening on port ${ports}`));
When trying to login # homepage:
error:
POST http://localhost:3000/auth/login net::ERR_CONNECTION_REFUSED
ERROR
kd {headers: dd, status: 0, statusText: "Unknown Error", url: "http://localhost:3000/auth/login", ok: false, …}
error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}
headers: dd {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message: "Http failure response for http://localhost:3000/auth/login: 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: "http://localhost:3000/auth/login"
__proto__: wd
I didn't undertand this reverse proxy at all, I thought I should point my app routes.
Thanks!

You just need this much:
server {
listen 80;
listen [::]:80;
server_name http://MY-AWS-IP.com;
root /home/ubuntu/dashboard/frontend/dist/frontangular;
server_tokens off;
index index.html index.htm;
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;
}
}
You would need to set up different location blocks only if they are going to be handled by a different server, probably running on a different port.

Related

Websocket (Socket.io) works on my local machine but not on NGINX

I have worked on an application using node.js and express for the backend and reactjs for the frontend.
On the nodejs backend, set up socket.io as such
const port = process.env.PORT || 8000
const server = app.listen(port, () =>
console.log(`Server running on port ${port}`)
)
const io = require('socket.io')(server, {
cors: {
origin: '*',
},
})
Then on the react frontend, I sent up the socket.io for client as:
if (!socket.current) {
socket.current = io(process.env.REACT_APP_API2)
}
Where my REACT_APP_API2='http://localhost:8000' while my api is connected on REACT_APP_API='http://localhost:8000/api'
Locally, this works very well and my websocket connects and works well.
But in production, i get the error wss://+ myDomain + .com:3000/ws connection failed:
This is how I set up my NGINX Server
I first set up this '/' to point to the root (React APP)
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;
}
NEXT, I Set up /api to point to the backend api
location /api {
proxy_pass http://localhost:8000;
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;
}
Finally, I set this /socket.io for my sockets.
location /socket.io {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy false;
proxy_pass http://localhost:8000;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
This is how i set up my enviromment variables in my frontend
REACT_APP_API = '/api'
REACT_APP_API2 = '/'
What I have tried:
I have changed the REACT_APP_API2 to '/api'
I have changed the proxy_pass http://localhost:8000; to 3000
NB: my application on nginx is secure ie 'https'

NodeJs App + AWS EC2 + Nginx + Websocket configuration

im running a Nodejs app on a Ec2 instance. The app runs node-rtsp-stream that outputs a websocket witch then uses with jsmpeg to display on the web browser.
NGINX config port 80 (this works fine)
server {
listen 80 default_server;
listen [::]:80 default_server;
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;
NGINX websocket config (this doesnt)
http {
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
upstream websocket {
server ws://localhost:9999;
}
server {
listen 80;
location / {
proxy_pass http://websocket;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
proxy_set_header Host $host;
app.js
Stream = require('node-rtsp-stream')
stream = new Stream({
name: 'stream',
streamUrl: 'rtsp://demo:demo#ipvmdemo.dyndns.org:554/onvif-media/media.amp',
wsPort: 9999,
ffmpegOptions: { // options ffmpeg flags
'-stats': '', // an option with no neccessary value uses a blank string
'-r': 30 // options with required values specify the value after the key
}
})
Script tag on HTML
player = new JSMpeg.Player('ws://localhost:9999', {
canvas: document.getElementById('canvas')
Should this be calling for 'ws://localhost:9999' or something else?. On Browser says that can not find 'ws://localhost:9999'
Each nginx config file is stored in sites-available
Thanks for your time!!!

Nginx + nodejs, socket.io for https dosnt work

I have a problem with customizing my nodejs app on the server (https, socket.io).
I using: pm2, nginx(works on port :3000), nodejs
Prev I customized nginx for :80 port(http) - works fine!.
But when I inserted ssl certificate and customized him I get errors in the console:
"Access to XMLHttpRequest at 'https://example:2053/socket.io/?EIO=3&transport=polling&t=NAPoEIt' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
My nginx settings:
server {
listen 80 default_server;
server_name example.com www.example.com;
return 301 http://skinsgaben.com$request_uri;
}
server {
listen 443 ssl;
server_name site.com www.example.com;
ssl_certificate /var/www/site/ssl/example.crt;
ssl_certificate_key /var/www/site/ssl/example.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
location / {
proxy_set_header X-Real-IP $remote_addr;
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_pass http://localhost:3000/;
proxy_redirect off;
# Socket.IO Support
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
location /socket.io/ {
proxy_pass http://localhost:3000/;
proxy_redirect off;
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;
}
error_log /var/www/site-log/error.log;
access_log /var/www/site-log/access.log;
}
I'm mostly using this pattern for local and remote nodejs apps.
let host = process.env.host || 'your host';
let PORT = process.env.port || 'your port';
let protocol = 'http';
let options = {};
if (APP_ENV === 'production') {
protocol = 'https';
options = {
key: fs.readFileSync(SSL.KEY),
cert: fs.readFileSync(SSL.CERT)
};
}
const server = require(protocol).createServer(options, app);
server.listen({ host, port: PORT }, () => {
console.log(`Server listening on `);
});

asp.net core on linux with nginx routing doesn't work

I've created an ASP.NET Core MVC application and deployed it into Linux server. When I go to sitename.com browser shows up the Home/Index page without any problem.
But when I try to go sitename.com/Home/Index or another controller like sitename.com/Admin/Login nginx throws a 404 Not Found error. What should be the problem?
Here is my Startup.cs/Configure method.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
loggerFactory.AddDebug();
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseBrowserLink();
}
else
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseSession();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}
Here is my website config from sites-available folder
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /var/www/sitename.com;
index index.html index.htm;
server_name sitename.com www.sitename.com;
location / {
try_files $uri $uri/ =404;
proxy_pass http://127.0.0.1:5000;
}
and nginx.conf
user www-data;
worker_processes 4;
pid /run/nginx.pid;
events {
worker_connections 768;
}
http {
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
gzip on;
gzip_disable "msie6";
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
mail {
}
Remove try_files $uri $uri/ =404; as it's testing if a certain url exists on the file system and if not return 404.
But /Home/Index is a route, which do not map to an existing file but to controller action, hence you get the 404 error.
To help someone searching on Google
I was getting 404, but I realized that ASP Net only accepts 1 server by name
Example NOT POSSIBLE:
server{
listen 80;
listen [::]:80;
server_name example.com;
location /asp_app_ONE {
proxy_pass http://0.0.0.0:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /asp_app_TWO{
proxy_pass http://0.0.0.0:3002;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
Example OK:
server{
listen 80;
listen [::]:80;
server_name appONE.example.com;
location / {
proxy_pass http://0.0.0.0:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
server{
listen 80;
listen [::]:80;
server_name appTWO.example.com;
location / {
proxy_pass http://0.0.0.0:3002;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}

Routed traffic with cookies Nginx

first time i'm trying to setup nginx.
I have following problem i would like to solve.
I have two versions of backend v1 and v2.
User is routed to "/v2" (proxy_pass '127.0.0.1:3000;')
Traffic tru "/" (javascript + sockets) has be routed to the same server '127.0.0.1:3000;' by looking at the cookie.
Heres my problem the cookie doesn't exists and therefore 404 will be returned
Any suggestion?
map $cookie_version $site_version {
default "";
"v1" "version=v1;Domain=localhost;Path=/";
"v2" "version=v2;Domain=localhost;Path=/";
}
server {
listen 8081;
server_name localhost;
location / {
if ($cookie_version ~* "v1") {
proxy_pass http://127.0.0.1:8080;
}
if ($cookie_version ~* "v2") {
proxy_pass http://127.0.0.1:3000;
}
}
location /v1 {
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_http_version 1.1;
set $cookie_version "v1";
add_header Set-Cookie $site_version;
rewrite ^/v1(.*) /$1 break;
proxy_pass http://127.0.0.1:8080;
}
location /v2 {
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_http_version 1.1;
set $cookie_version "v2";
add_header Set-Cookie $site_version;
rewrite ^/v2(.*) /$1 break;
proxy_pass http://127.0.0.1:3000;
}
}
First of all, read why if is evil http://wiki.nginx.org/IfIsEvil. Use map instead.
My suggestion:
map $cookie_version $mybackend {
default "127.0.0.1:3000";
"v1" "127.0.0.1:8080";
"v2" "127.0.0.1:3000";
}
...
location / {
proxy_pass http://$mybackend;
}
...
location ~ ^/(?<cver>v[12])/ {
...
add_header Set-Cookie "version=$cver;Domain=localhost;Path=/";
rewrite ^/v[12]/(.*)$ /$1 redirect;
}

Resources