Please forgive me if this is a bit of a punt in the dark, my DevOps/architecture skills are v v minimal so I'm not really sure on the right terminology.
I have a react app hosted on AWS which I want to sit on the root mysite.com as well as certain 'subdirectories' e.gmysite.com/items and mysite.com/category.
In addition, I want to have a blog hosted elsewhere but accessible at mysite.com/blog and some miscellaneous static pages such as mysite.com/about , mysite.com/contact. I would like those static pages to be hosted in the same place (I'm thinking webflow).
This seems like a bit of a complex setup but I'm wondering what would be the best solution. would a reverse proxy with Nginx work, if so how would you configure it? Are there other 'serverless' solutions that might work?
Perhaps there is a way to send all traffic to the static pages server unless it is the rooot or the speciic /items or /category or /blog ?
Hi a basic configuration could look like this:
server {
listen 8080;
return 200 "Blog \n";
}
server {
listen 8081;
return 200 "About and Contact \n";
}
server {
listen 80;
location = /about {
proxy_pass http://localhost:8081;
}
location /blog {
proxy_pass http://localhost:8080;
}
}
Let me add some text to it :)
if you just want to have a location /about without anything more in the location you can use = /about
trying to add something behind /about like /about/foo will result in a 404.
If you want to proxy the blog to some other location use /blog. With this configuration you are free to add somethin to your location like /blog/test/ and it will still response with a 200.
[root@localhost conf.d]# curl -v localhost/blog/test
* About to connect() to localhost port 80 (#0)
* Trying ::1...
* Connection refused
* Trying 127.0.0.1...
* Connected to localhost (127.0.0.1) port 80 (#0)
> GET /blog/test HTTP/1.1
> User-Agent: curl/7.29.0
> Host: localhost
> Accept: */*
>
< HTTP/1.1 200 OK
< Server: nginx/1.17.6
< Date: Tue, 17 Mar 2020 06:09:31 GMT
< Content-Type: application/octet-stream
< Content-Length: 12
< Connection: keep-alive
<
/blog/test
* Connection #0 to host localhost left intact
is using something in your react app to route the traffic to the right target.
I did this for one of my projects and its workig great!
I will share my file without adapting it to your question just as a general reference and idea.
const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use('/api', proxy({
target: 'http://localhost:8080',
changeOrigin: true,
}));
app.use('/img', proxy({
target: 'http://localhost:8080',
changeOrigin: true,
}));
app.use('/oauth', proxy({
target: 'http://localhost:8080',
changeOrigin: true,
}));
};
This file (setupProxy.js) lives inside of thr src directory on the root level.
I just know about some integration with express ontop of node.js. As proxying is deeply releated to the http-protocoll you devenetly need a some server component understanding the http protocol.
I have noticed a couple of disadvantages during the last months using an express webserver as proxy. Caching is more effective on the NGINX level. If the routing-complexty increases the NGINX can deal a lot better with it.