I'm trying to setup new location rule for the "admin" folder for my reactjs SPA application. It uses Kestrel as a web server and Nginx as a proxy.
I have already one configuration, which is working fine with redirection all requests to the index.html file, which contains necessary javascript logic:
location /favicon.ico {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
}
location ~ ^/(fonts|img|js|lib|script|style)/ {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
}
location / {
try_files $uri /index.html;
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
}
Now I need to add rule for /admin/ folder which will route all requests to the /admin/index.html, once /admin/ is a part of the path, but the following is not work:
location /admin/ {
try_files /index.html $uri;
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
}
What I'm doing wrong?
Thanks,
Anton
Related
Trying to Deploy two React apps
server {
listen 80;
# server_name IPAddress;
access_log /var/log/nginx/Static.com.access.log;
error_log /var/log/nginx/Static.com.error.log;
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;
}
location /elderly/ {
# rewrite ^/codify(.*) $1 break;
proxy_pass http://127.0.0.1:3001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-for $remote_addr;
#proxy_set_header X-Forwarded-Proto $scheme;
}
}
www.IPadress.com is working fine but when I open the www.IPadress.com/elderly it is not working.
You need to add PUBLIC_URL field in you .env file:
PUBLIC_URL=/elderly
So my website has two parts:
1- /api, /oauth and /assets locations are redirected to a laravel app and using a simple proxy_pass to their docker port
2- the web app, which is a react app. We make an image of the web app(so no files are transferred to the server) and run it on a port, say 3000.
This is a summary of my Nginx configuration:
server {
server_name mywebsite.com;
location /api {
proxy_pass http://localhost:8080/api;
proxy_set_header Host $host;
} //the same with other Laravel paths
location / {
proxy_pass http://localhost:3000/;
proxy_set_header Host $host;
proxy_redirect off;
}
}
The problem is if the user goes to a page, say site.com/profile and refreshes it, they get a 404 error. Googling a lot resulted to use try_files .. index.html which works with local files, but not when using proxy_pass and docker images.
More googling had me find a solution that actually worked:
server {
server_name mywebsite.com;
location /api {
proxy_pass http://localhost:8080/api;
proxy_set_header Host $host;
} //the same with other Laravel paths
location / {
proxy_pass http://localhost:3000/;
proxy_set_header Host $host;
proxy_redirect off;
proxy_intercept_errors on;
recursive_error_pages on;
error_page 404 = #rewrite_proxy;
}
location #rewrite_proxy {
rewrite ^/(.*)$ /index.html?$1 break;
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
}
}
It's brilliant and works like a charm. Now the problem is, I'm looking for a solution to give control of ACTUAL 404 errors to the web app, so it can react in different ways depending on the URL. Any suggestions?
Check out this, hope this will help you out
server {
listen 80;
location /api {
proxy_pass http://backend/api;
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-Host $server_name;
}
location / {
proxy_pass http://frontend;
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-Host $server_name;
try_files $uri $uri/ /index.html #backend;
error_page 405 #backend;
}
location #backend {
proxy_pass http://frontend;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
}
}
I have a reactJS app running at port 3000 on a VPS. I am having difficult understanding why http://example.com is not working while http://example.com:3000 is working correctly. Below I have my nginx server configuration
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://localhost:3000;
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;
# Enables WS support
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_redirect off;
}
}
Is there anything i missed? Thank you!
I want to run my application under myurl.com/app1/ using reserve proxy(nginx) with angularjs. But when I call myurl.com/app1/ I only get index.html, static files still point to myurl.com/assets/ rather than myurl.com/app1/assets/
upstream smileyface {
server localhost:8081;
}
server {
access_log /var/log/nginx/myurl_access.log;
error_log /var/log/nginx/myurl_error.log warn;
# SSL configuration
listen 443 ssl;
listen [::]:443 ssl;
include snippets/ssl-myurl.com.conf;
include snippets/ssl-params.conf;
index index.html index.htm index.nginx-debian.html;
server_name myurl.com www.myurl.com;
location /app1/ {
index index.html;
alias /angular-app-folder/;
proxy_pass http://smileyface/;
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_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
location ~ /.well-known {
allow all;
}
}
I have 3 AngularJS application each having their own ExpressJS backend. How do you deploy all 3 applications in this manner:
http://myapp.com/<app1>
http://myapp.com/<app2>
http://myapp.com/<app3>
Additional Information:
- I'm deploying the application in AWS EC2 Instance
- I tried merging the application in a single ExpressJS app. While this works, I still want to know if the case above is possible
Sure it's possible. You'll just need NGINX or Apche running as a reverse proxy for you.
Assuming your node apps are running on local ports 3000, 3001, and 3002, you'd setup a .conf file with those as upstream servers for the location tags like so:
. . .
location /app1 {
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 /app2 {
proxy_pass http://localhost: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;
}
}
Read up on more details here: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04
server {
listen 80;
server_name es.domain.com;
location /app1 {
rewrite ^/(.*) /$1 break;
proxy_ignore_client_abort on;
proxy_pass http://localhost:3001;
proxy_redirect http://localhost:3001 https://es.domain.com/appw;
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;
auth_basic "Elasticsearch Authentication";
auth_basic_user_file /etc/elasticsearch/user.pwd;
}
location /app2 {
rewrite ^/(.*) /$1 break;
proxy_ignore_client_abort on;
proxy_pass http://localhost:3002;
proxy_redirect http://localhost:3002 https://es.domain.com/app2;
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;
auth_basic "Elasticsearch Authentication";
auth_basic_user_file /etc/elasticsearch/user.pwd;
}
}
Please refer this link
http://www.minvolai.com/blog/2014/08/Setting-up-a-Secure-Single-Node-Elasticsearch-server-behind-Nginx/Setting-up-a-Secure-Single-Node-Elasticsearch-server-behind-Nginx/
You can setup AWS CloudFront and setup each application as Origins. It provides flexibility to route from single domain(Setup for CloudFront) to different Express Apps and also allows to cache Static content paths at Edge locations.