I have an app where the admin side is built in angular, but the front consumer facing side is not.. and lives on a different server.
I'd like if visitors coming to:
domain.com/#/admin => angular app
But if they got to:
domain.com
This goes to the other server
Is this possible?
Thanks.
For a little more clarity, I think what I need is this:
I have a rails app as an api that angular consumes. Rails lives on server A and Angular lives on server B.
Both servers use nginx as the web server.
Also, the rails app serves up its own content, so I want any path other than admin to go to rails.
What I want is if users go to:
mydomain.com --> they hit the rails app and content on server A
when they go to:
mydomain.com/admin or mydomain.com/#/admin --> they hit the angular app on server B
I think I almost figured it out with the following nginx configs on the rails server, server A:
upstream serverA {
server rails;
server unix:///var/www/rails/shared/tmp/sockets/puma.sock;
}
upstream serverB {
server angular;
}
server {
listen 80;
server_name serverA;
root /var/www/rails/current/public;
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://serverA;
}
location ~* ^/assets/ {
expires 1y;
add_header Cache-Control public;
add_header Last-Modified "";
add_header ETag "";
break;
}
location /admin/ {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://serverB/#/;
}
}
While this gets me close, my angular scripts and styles that are references by my angular index.html file are not being found.
Related
I've been working on a Full stack project with React, Mysql, Express and Nginx. The project is working fine locally. I'm trying to deploy this project on a GCP instance.
I'm struggling with how to handle authorization and cookies like accessToken and refreshToken with reverse proxy.
Made some changes in the Nginx configs and server at port 80.
Here is the overview :
I'm using reverse proxy method to interact with the server running at the instance with the help of PM2 module.
Nginx config :
server {
listen 80;
server_name GCP IP;
location / {
# proxy_bind 127.0.0.1;
client_max_body_size 100m;
proxy_buffers 8 16k;
proxy_buffer_size 16k;
add_header 'Access-Control-Allow-Origin' http://localhost:3000; #frontend port
add_header 'Access-Control-Allow-Credentials' 'true';
proxy_pass http://localhost:8800;
# replace port with your backend port
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $http_host;
proxy_set_header Cookie $http_cookie;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $remote_addr;
port_in_redirect off;
}
}
So, I'm able to access the frontend with http:// GCP IP , registering a user is working with "http:// gcp_ip /api/users/addUsers" . But when it comes to check the cookies it doesn't work http:// gcp_ip /api/users/token.
Login provides accessToken and refreshToken , a route which authenticate user's token at http:// gcp_ip /api/users/token just after someone logged in . This route interacts with the cookies.
const refreshToken = req.cookies.refreshToken;
Nginx is not able to access the cookie through the frontend for authentication.
I have a Loopback App, which provides the API, and serves the static files. And 2 React apps which use the same Loopback App.
I serve the static files (from React Build folders) using serve-static and vhost.
var serveSubdomainAbc = serveStatic('abc/build', {
index: ['index.html']
});
var serveSubdomainXyz = serveStatic('./../../xyz-abc/build', {
index: ['index.html']
});
app.use(vhost('abc.example.com', serveSubdomainAbc));
app.use(vhost('xyz-abc.example.com', serveSubdomainXyz));
I also setup an nginx server with very basic settings.
server {
listen 80;
server_name localhost;
location / {
proxy_pass http://127.0.0.1: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;
}
}
When I directly visit the root of the apps, everything works fine, like
abc.example.com
xyz-abc.example.com
index.html is served, and then the react app starts fine. When I use a router link like,
xyz-abc.example.com/ssoRedirect, then it cannot find the ssoRedirect and it falls back to abc.example.com's index.html and serves that file, so ssoRedirect does not work. How can I make it to fallback to the correct index.html when it cannot find the required static file.
I have an express server on an ec2 instance that has an api (/api) and a client (everything that's not /api handled in react.)
Goging to http://ip.address:3000 works fine. It shows the app and everything works.
However going to https://ip.address (forwarded by nginx) doesn't work fine. It loads my index.html correctly but 404s on all the /static/bundle.js and /static/bundle.css files.
nginx
# redirect to node for the dynamic stuff
location / {
proxy_pass https://localhost:8003/index.html;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_hide_header X-Powered-By;
}
express
let router: express.Router = express.Router();
router.use(express.static(path.join(__dirname, "/build")));
const api: ApiRouter.Api = new ApiRouter.Api();
router.use("/api", api.router.bind(api.router));
//Catch all for react - client side routing
router.get("*", function(req, res) {
res.sendFile(path.resolve(__dirname, "/build/index.html"));
});
If you tell Nginx to
proxy_pass https://localhost:8003/index.html;
Then every request which matches that location block will have the matching part of its URL path replaced with whatever path you have added to your proxy_pass URL.
Your location block is simply / So if I request www.yoursite.com/static/bundle.js then Nginx will match the first /, replace it with your path and add the rest. So it will try and serve www.yoursite.com/index.htmlstatic/bundle.js
You should proxy /api through Nginx too, and if the static files are coming from an upstream proxy you should enable proxy caching within Nginx too
I am developing a React application which consumes a REST API running on another server. Now, in development, I am using the proxy by adding the proxy field in package.json.
I am wondering how I can configure a proxy for the production application so that my REST request can be routed to the other server. Any ideas?
The proxy variable in your package.js file is only being used in development. I assume you are using create-react-app, here is the doc.
The way I routed all the API requests in my react app is by proxying all the requests through Nginx. Of course, it really depends on wich web server you are using.
Considering you are making all the requests to an /API endpoint you can proxy all the requests like this:
location / {
try_files $uri $uri/ /index.html;
add_header Cache-Control public;
expires 1d;
}
location /api {
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://yourapiserver:port/;
}
I'm running SailsJS on a digitalocean droplet (MEAN Stack with nginx). All my requests are mapped to my Angular frontend except those on /api which are mapped to a proxy_pass on port 1337 (on which Sails runs). This procedure works fine.
Now I'd like to restrict the access to my API to only allow requests from my frontend. I already tried to deny / allow from within my nginx config but this blocks the the user request itself. I tried several answers like this as well but they didn't work out.
What would be the recommended way to limit access to my Sails API to localhost? I'd like to run multiple apps on my droplet and use Sails as my API that should only be accessible by the apps in my droplet.
My nginx config:
upstream sails_server {
server 127.0.0.1:1337;
keepalive 64;
}
server {
server_name domain.com;
index index.html;
location / {
root /opt/domain/build;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_http_version 1.1;
proxy_set_header Connection "";
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
client_max_body_size 500M;
}
}
– Thanks in advance!
I think you can't do this because angular runs in your client, so you need to get IP from all you users. You can use something simple that works with trustes proxys
var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress
or use some more complex and trusted like link