I have an existing app written in nextjs because I need SSR. Since I don't need SSR on the admin side I would like to use react-admin. I don't intent to integrate the two but instead have them run as separate processes/services on separate ports and have nginx do the proxy routing. I am having difficulty in configuring react-admin.
nextjs running on 127.0.0.1:3000
react-admin running on 127.0.0.1:3001
Configuration for nginx reverse proxy location:
server {
server_name www.mydomainname.com;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
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;
proxy_redirect off;
}
location /admin {
proxy_pass http://127.0.0.1:3001;
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;
proxy_redirect off;
}
# 301 Redirect URLs with trailing /'s
#as per https://webmasters.googleblog.com/2010/04/to-slash-or-not-to-slash.html
rewrite ^/(.*)/$ /$1 permanent;
# 301 redirect from custom redirect file
if ( $redirect_uri ) {
return 301 $redirect_uri;
}
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/mydomiainname.com/fullchain.pem # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/mydomainname.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
I believe the nginx config to be correct. When navigating to /admin react-admin is responding with a blank "React App" page instead of the default page seen from it's root, '/', path.
I have tried setting the 'homepage': "/admin" in the react-app package.json file with no joy.
How do i configure react-app to serve pages by default to /admin instead of /?
The problem is likely that the path proxied to react-admin is /admin instead of just /. To avoid this, you want to add a trailing slash / to the end of your proxy_pass URL:
location /admin {
proxy_pass http://127.0.0.1:3001/;
...
}
This is explained in the proxy_pass section of the Nginx docs, though admittedly the language is a bit esoteric:
If the proxy_pass directive is specified with a URI, then when a request is passed to the server, the part of a normalized request URI matching the location is replaced by a URI specified in the directive:
location /name/ {
proxy_pass http://127.0.0.1/remote/;
}
If proxy_pass is specified without a URI, the request URI is passed to the server in the same form as sent by a client when the original request is processed, or the full normalized request URI is passed when processing the changed URI:
location /some/path/ {
proxy_pass http://127.0.0.1;
}
Related
I have a jellyfin server I want to proxy_pass to but when i go to 192.168.1.34/jellyfin/, I'm redirected to 192.168.1.34/web/index.html instead of 192.168.1.34/jellyfin/web/index.html. All I found online is that the trailing slash should take care of this problem but it does not work for me. I can see in the network tab that the redirect is triggered by a Location /web/index.html Header.
server {
listen 80;
server_name 192.168.1.34;
location /jellyfin/ {
proxy_pass http://192.168.1.65:8096/;
}
location /jellyfin/socket/ {
proxy_pass http://192.168.1.65:8096/socket/;
include proxy_params;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
Is there a way to make this work? (I'm only using ipv4) Thanks.
I have nginx configuration like this:
server {
listen 80 default_server;
listen[::]:80 default_server;
server_name _;
root /var/www/html/ericwu-trademarket/frontend/build;
location /backend/ {
proxy_pass http://localhost:8000; #backend in node js
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 / {
try_files $uri /index.html; #front end in react js
}
}
the front end is running properly. But by running backend like this http://server-ip-address/backend it is showing cannot get /backend/.
Where might I be mistaken?
Check UFW port Allow in server
Check status of UFW:
sudo ufw status verbose
If not show 8000/tcp as a Allow then allow it:
sudo ufw allow 8000
Obviously you are trying to use Websokets.
When it comes to best practices, is better to have the backend services defined inside an upstream definition. You are trying to proxy requests to "localhost:8000" but localhost translates to ip 127.0.0.1. If that is not the ip address of the nodejs app, then is pretty normal that your config won't work.
Nginx expects a fully qualified domain name (FQDN), or ip addresses list of backend servers to work properly.
That being said, your config should be:
http {
upstream backend_server {
#least_conn; #Loadbalancing method in case you want to use multiple backends
#ip_hash;
server backend1.example.com:8000; #or IP address
}
server {
server_name _;
listen 80 default_server;
listen[::]:80 default_server;
root /var/www/html/ericwu-trademarket/frontend/build;
location / {
try_files $uri /index.html;
}
location /backend {
proxy_pass http://backend_server;
proxy_redirect off;
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;
# WebSocket specific
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# For long running HTTP requests, don't buffer up the
# response from origin servers but send them directly to the client.
proxy_buffering off;
}
}
}
I have a nginx reverse proxy setup for apache wordpress which works fine. However based on location need to redirect to an external url which fails. Please check the below config. Is this a valid setup ?
https://platform.com/ - this works - also any subsequent wp pages also works
https://platform.com/pen - this needs to redirect to https://abcdef.com - this doesn't work - 404 page load error Any help ?
server {
listen 443 ssl default_server;
listen [::]:443 default_server;
server_name platform.com;
server_tokens off;
root /var/www/html/def/public/;
index index.php;
ssl on;
ssl_certificate /tmp/fgh.crt;
ssl_certificate_key /tmp/fgh.pem;
access_log /var/log/nginx/access2.log;
error_log /var/log/nginx/error2.log;
location / {
proxy_set_header X-Forwarded-Proto $scheme;
try_files $uri #apache;
}
location #apache {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $host;
proxy_pass http://127.0.0.1:8080;
}
location ~[^?]*/$ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host;
proxy_pass http://127.0.0.1:8080;
}
location /pen {
proxy_pass https://abcdef.com;
}
}
After changing the server name (wordpress site) from http prefix to www prefix, proxy pass re directions worked. Had to redirect all http https server blocks to www server block in nginx config
What you are doing is a proxy_pass to https://abcdef.com , not a redirect. if you meant a redirect the code is :
location /pen {
return 301 https://abcdef.com;
}
If it's not a definitive redirect, use 302 instead of 301, so is not cached (for tests is much better).
The reason the 404 is given is because you are accessing the https://abcdef.com with a request with the host/url https://platform.com/pen
If the destiny server is not prepared to recive this whole url, it returns 404, as /pen is not found.
I am a front end developer and tried my hands in nginx configuration last time which is working fine. The below is the configuration:
server {
listen 80;
server_name localhost;
access_log /var/log/nginx/localhost.access.log;
location / {
#By default route to node.js running on localhost:9000 port
proxy_pass http://localhost:9000;
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;
}
#currently only one server but will have to redirect to n hosts based on a parameter
location /hosts.json {
proxy_pass http://app-host.net:3000;
}
#currently only one server but will have to redirect to n hosts based on a parameter
location /hosts/ {
proxy_pass http://app-host.net:3000;
}
}
Now, I need to redirect to 4 different servers based on a parameter. ie if the city is Bangalore, I need to redirect to bangalore.corp.net:3000 and if the city is NewYork, then I need to redirect to newyork.corp.net:3000 and so on.
Here is somewhat I am expecting:
location /app1/hosts/ {
proxy_pass http://app1-host.net:3000;
}
#But the proxy pass should point to http://app1-host.net:3000/hosts and not http://app1-host.net:3000/app1/hosts
How can we handle such proxy pass in the nginx configuration file. Please let me know.
You have a URL of the form /app1/hosts/foo which should map to http://app1-host.net:3000/hosts/foo. The can be achieved by appending a URI in the proxy_pass directive, which will act like an alias.
location /app1/hosts/ {
proxy_pass http://app1-host.net:3000/hosts/;
}
See this document for details.
I have a Flask application served using gunicorn, and with NGINX on top of it. I want to use Basic Authentication (user/password) to protect all URL's starting with /admin, which is the back office, but still continue serving all other URLs with gunicorn without password.
Here is my current NGINX config:
server {
listen 80;
server_name example.com;
charset utf-8;
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;
}
location /admin {
auth_basic "Administrator Login";
auth_basic_user_file /home/app/.htpasswd;
# the following four directives are duplicated :(
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;
}
}
If I don't duplicate the proxy_* directives in the second location block, then the URLs starting with /admin doesn't get forwarded to gunicorn and I get a 404.
Is there any way to avoid the configuration duplication? I tried location nesting but apparently in the end NGINX only "executes" a single location block.
The proxy_pass must be within the location block. However, there's no need to duplicate the proxy_set_header directives, they can be moved into the server block. So your mistake was simply the assumption that proxy_pass could live in the server block :-)