I have an NGINX server, a Nodejs backend, 2 react apps one is my frontend app and the other is a dashboard service. Nginx conf is set to serve my frontend react app as a static file upon build while other react app is a third party dashboard service running on port 8080 which I want to proxy pass. but the react app [dashboard service ]is not loading.
Below is my server block in Nginx conf
server {
listen 80;
listen [::]:80;
server_name task-manager.eastus.cloudapp.azure.com;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name task-manager.eastus.cloudapp.azure.com;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# certs sent to the client in SERVER HELLO are concatenated in ssl_certificate
ssl_certificate /etc/letsencrypt/live/task-manager.eastus.cloudapp.azure.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/task-manager.eastus.cloudapp.azure.com/privkey.pem;
## node js server running on port 4000
location /api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass "http://localhost:4000/";
}
##second react app running on port 8080
location /explorer/{
proxy_pass "http://localhost:8080/";
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
The following is the error that I get on the console when I load the URL.
Uncaught SyntaxError: Unexpected token '<'
Thanks in advance
These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.
Hello,
Actually your reverse proxy setup looks good. Does the application load when you try to access your IP address directly on port
8080
?Regards, Bobby