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;
}
}
Related
I am developing a website with React.js for the frontend and have 2 separate apps for the users and the admins. The users will be under example.com and the admins under example.com/admin.
I am developing both apps behind an nginx server as a reverse proxy. I have had no issue developing a single app behind nginx, but I cannot use hot reload for the 2nd app. The app is served properly, with the only exception that the hot reload does not work.
I have HTTPS=true on both my .env files of the React.js apps. The main app's hot reload works fine, but the /admin app's hot reload fails with the error Firefox can’t establish a connection to the server at wss://192.168.1.2/adminws (developing through local network, so I can test the apps on my phone as well, but the hot reload won't work on the localhost either).
The main app is hosted under port 3000, the admin app is hosted under port 4000.
This is what my main app's .env looks like:
HTTPS=true
WDS_SOCKET_PORT=443
FAST_REFRESH=true
This is what my admin app's .env looks like:
HTTPS=true
WDS_SOCKET_PORT=443
WDS_SOCKET_PATH=/adminws
FAST_REFRESH=true
This is what my nginx configuration file looks like:
server {
# listen 80 default_server;
# listen [::]:80 default_server;
# SSL configuration
#
listen 443 ssl http2 default_server;
listen [::]:443 ssl default_server;
ssl on;
ssl_certificate /etc/nginx/ssl/localhost.crt;
ssl_certificate_key /etc/nginx/ssl/localhost.key;
gzip on;
gzip_types text/plain application/xml application/json;
gzip_proxied any;
gzip_min_length 1000;
gunzip on;
gzip_static on;
root /var/www/html;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name _;
location /ws {
proxy_pass https://127.0.0.1:3000;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
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 /adminws {
proxy_pass https://127.0.0.1:4000;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
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 /api {
proxy_pass http://127.0.0.1:3200;
}
location /admin {
proxy_pass https://127.0.0.1:4000;
}
location / {
proxy_pass https://127.0.0.1:3000;
}
}
I should note that the admin app's hot reload works properly when I remove both WDS_SOCKET_PORT and WDS_SOCKET_PATH from the .env file and run it on https://localhost:4000/admin, but this way I would not be able to test it behind nginx.
I removed both WDS_SOCKET_PORT and WDS_SOCKET_PATH from the admin app's .env file and it now seems to be working properly. Everything else seems to be ok.
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'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