Nginx proxy_pass cannot load asset VueJS - docker

I have 3 website and running on docker port 8000, 8001, and 8002.
I'm configuring nginx with this config:
server {
server_name my.domain.net;
location / {
proxy_pass http://localhost:8000;
proxy_set_header Host $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;
}
location /old {
proxy_pass http://127.0.0.1:8001;
proxy_set_header Host $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;
}
location /new {
proxy_pass http://127.0.0.1:8002;
proxy_set_header Host $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;
}
}
It works for location /, but for location /old and /new without all assets. I inspect element, for location /old the assets redirect to http://my.domain.net (absolutely 404 not found), where it should be http://my.domain.net/old/asset.css.
Need advice
Please help.

In your new and old applications hosted at 8081 and 8082 respectively, add assetsDir in your configuration.
vue.config.js:
module.exports = {
assetsDir: 'new'
}

Related

Nginx Multilevel reverse Proxy

Nginx Setup
AKAMAI
| +---> Nginx port 82
| |
-> AWS ELB/ALB -> Nginx Server(Port 80) -> Docker (Nginx Port 81) --|
|
+----> Nginx port 83
Browser sents request on HTTPS but Nginx server running on port 82/83 receiving x-forwarded-proto/scheme as http instead of https
Nginx Port 80 config
http {
...
server {
...
listen 80;
location / {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass "http://127.0.0.1:81";
}
proxy_set_header HOST $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Scheme $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_redirect off;
}
}
Nginx Port 81 config
server {
listen 81;
location ~ ^/v1/test {
proxy_pass http://127.0.0.1:82;
proxy_set_header HOST $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Scheme $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_redirect off;
break;
}
location / {
proxy_set_header HOST $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Scheme $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_redirect off;
proxy_pass http://127.0.0.1:83;
}
}
Nginx Port 82 Config
server {
...
listen 82;
proxy_set_header HOST $host;
proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_redirect off;
}
Nginx Port 83 Config
server {
...
listen 83;
proxy_set_header HOST $host;
proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_redirect off;
}
Applications running on port 82/83 are rails applications and use Passenger to serve the traffic.
Even we tried setting as below in 82/83 Nginx server configs
proxy_set_header X-Forwarded-Proto https;
proxy_set_header X-Forwarded-Scheme https;

Heroku - Seperate frontend and backend with Nginx on same domain

I have an application with two github repos one for react and one for rails app. Requirement is all the routes should go to Rails server except routes starting with /catalog should go to to React app. Rails app server will communicate with React Server internally. SSL is configured on Nginx level.
I have created 3 different apps in heroku :
Rails server app
React server app
Web Server(Nginx)
My nginx server config looks like :
upstream rails {
server $HEROKU_APP_rails_URL;
}
upstream react {
server $HEROKU_APP_react_URL;
}
server {
listen $PORT;
server_name *.xyz.com;
# large_client_header_buffers 4 32k;
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://rails;
}
location /catalog {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://react;
}
}
with above config I am getting HTTP 400 error on Nginx and it is not able to redirect the request. Please let me know what am i doing wrong.
Finally managed to solve this issue.. My nginx config looks like
upstream upstream_app_a {
server app_a.herokuapp.com:443;
}
upstream upstream_app_b {
server app_b.herokuapp.com:443;
}
server {
listen $PORT;
location / {
set $upstream upstream_app_a;
proxy_pass https://$upstream;
proxy_ssl_name app_a.herokuapp.com;
proxy_set_header x-forwarded-host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host app_a.herokuapp.com;
}
location /static {
set $upstream upstream_app_b;
proxy_pass https://$upstream/static;
proxy_set_header Host app_b.herokuapp.com;
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;
}
location /product_catalog {
set $upstream upstream_app_b;
proxy_pass https://$upstream;
proxy_ssl_name app_b.herokuapp.com;
proxy_set_header x-forwarded-host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host app_b.herokuapp.com;
}
}
Please make sure you set correct value for header
proxy_set_header Host app_a.herokuapp.com
We managed to solve this issue by referring to article

Location path nginx cannot serve static file vueJS

I have 2 docker containers that contain 2 websites, a new website and an old website.
New website run on port 8000 (Laravel) and the old website run on port 8001 (VueJS).
I want the location / proxy pass to the new website and the location /old proxy pass to the old website.
For new website, it can be accessed properly.
location / {
proxy_set_header Host $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 http://localhost:8000;
}
but for the old website, assets, images, fonts are still 404.
location /old {
proxy_set_header Host $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 http://localhost:8001;
}
404 because when access https://my.domain.net/old/, the asset that should be called is https://my.domain.net/old/asset/images/logo.png
But this is still https://my.domain.net/asset/images/logo.png so that 404 is not found.
Please help.
location ~* '^/(assets|images|fonts)/' {
proxy_set_header Host $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 http://localhost:8001;
}
I inspect element, for location /old the assets redirect to my.domain.net/asset.css. (absolutely 404 not found)
It looks like your localhost:8001 redirects.

Can't get NGINX to serve static files (js, css etc) from docker container service

I have a container running, and the exposed port is 8080.
I'm using nginx to proxy pass to the docker container. However I can't get the js/css etc files to be served up. Below is some of the nginx config, and the request is coming in (according to the debug log on nginx) as /auth/resources/7.0.0/admin/keycloak/js/authz/authz-services.js?
They are coming up with a 404. The config is:
listen 80 default_server;
listen [::]:80 default_server;
location /keycloak/ {
# proxy header
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Scheme $scheme;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host example.com/keycloak ;
rewrite /keycloak/(.*) /$1 break;
proxy_pass http://127.0.0.1:8080/;
}
location /auth/ {
# proxy header
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Scheme $scheme;
proxy_set_header X-Forwarded-Proto $scheme;
rewrite ^\/(.*) /$1 break;
proxy_pass http://127.0.0.1:8080/;
}

Rails 5 ActionController::InvalidAuthenticityToken on Production Enviroment Nginx

On Rails 5.2, SSL enviroment, running as reverse_proxy with Nginx, whenever I submit a form I get the error:
HTTP Origin header (https://agro2business.com.br) didn't match
request.base_url (https://agro2business.com.br, agro2business.com.br)
Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)
ActionController::InvalidAuthenticityToken
(ActionController::InvalidAuthenticityToken)
I'd read about configuring params and Nginx for passing on headers in another StackOverflow questions but no luck so far. My nginx config file:
proxy_pass http://localhost:4000;
}
location / {
proxy_pass http://localhost:4000;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
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-Real-Port $server_port;
proxy_set_header X-Real-Scheme $scheme;
proxy_set_header X-NginX-Proxy true;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Ssl on;
}
Why is Rails trying to compare the header with two values?
request.base_url (https://agro2business.com.br, agro2business.com.br)
My problem was that in my nginx config I was setting header Host two times and this was causing url generation misleadings, which in turn was invalidating form submissions.
proxy_pass http://localhost:4000;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
**proxy_set_header Host $http_host;**
proxy_redirect off;
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-Real-Port $server_port;
proxy_set_header X-Real-Scheme $scheme;
proxy_set_header X-NginX-Proxy true;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Ssl on;
Just removing one the two proxy_set_header Host $http_host; did the trick

Resources