I'm trying to do a simple reverse proxy to my local react app with nginx. I can't wrap my head around how this works. Do i need a root variable in location /test or maybe a alias? because nginx is looking in the wrong address. (im running my react app locally at localhost:3001)
Already tried using rewrite /test(.*) /$1 break in the "location /test"-block
this is my nginx.conf:
server {
listen 81 ;
server_name app1.localhost;
location / {
root html;
index index.html index.htm;
}
location /test {
proxy_pass http://localhost:3001;
}
}
heres the console log when i try to enter app1.localhost:81/test:
Just go with two server blocks:
server {
listen 81 default_server;
location / {
root html;
index index.html index.htm;
}
}
server {
listen 81;
server_name app1.localhost;
location / {
proxy_pass http://localhost:3001;
}
}
Related
I am trying to implement something like that in the nginx conf:
subdomain
sub.domain.com -> Serve html
sub.domain.com/api -> proxy to port 3001
sub.domain.com/viewer -> serve another html
subdomain2
sub2.domain.com -> proxy to port 3000
The only route that doesn't work is the viewer, I get the html from the "location /". All other configurations work well.
I tried to move the viewer to the bottom then to the top and to the middle no matter what it doesn't work.
I use CentOS7. This is the configurations currently in the server:
events {
}
http {
server {
listen 80;
listen [::]:80;
server_name www.sub.domain.com subdomain.com;
location /viewer {
root /opt/viewer/;
try_files $uri /index.html;
index index.html;
}
location / {
root /opt/client-bo/;
try_files $uri /index.html;
index index.html;
}
location /api {
proxy_pass "http://localhost:3001";
}
}
server {
listen 80;
server_name www.sub2.domain.com sub2.domain.com;
listen [::]:80;
location / {
proxy_pass "http://localhost:3000";
}
}
}
Thanks!
If your viewer app located in the /opt/viewer directory and you want it to be available under the /viewer URI prefix, you should use root /opt; for the location /viewer { ... }. Check the difference between root and alias directives.
Next, the very last argument of the try_files directive is treated as the new URI to re-evaluate, so you /index.html being treated as the new URI going to be served with the location / { ... }. You should change that directive to
try_files $uri /viewer/index.html;
I am trying to implement something like that in the nginx conf:
subdomain
sub.domain.com -> Serve html
sub.domain.com/api -> proxy to port 3001
sub.domain.com/viewer -> serve another html
subdomain2
sub2.domain.com -> proxy to port 3000
The only route that doesn't work is the viewer, I get the html from the "location /". All other configurations work well.
I tried to move the viewer to the bottom then to the top and to the middle no matter what it doesn't work.
I use CentOS7. This is the configurations currently in the server:
events {
}
http {
server {
listen 80;
listen [::]:80;
server_name www.sub.domain.com subdomain.com;
location /viewer {
root /opt/viewer/;
try_files $uri /index.html;
index index.html;
}
location / {
root /opt/client-bo/;
try_files $uri /index.html;
index index.html;
}
location /api {
proxy_pass "http://localhost:3001";
}
}
server {
listen 80;
server_name www.sub2.domain.com sub2.domain.com;
listen [::]:80;
location / {
proxy_pass "http://localhost:3000";
}
}
}
Thanks!
If your viewer app located in the /opt/viewer directory and you want it to be available under the /viewer URI prefix, you should use root /opt; for the location /viewer { ... }. Check the difference between root and alias directives.
Next, the very last argument of the try_files directive is treated as the new URI to re-evaluate, so you /index.html being treated as the new URI going to be served with the location / { ... }. You should change that directive to
try_files $uri /viewer/index.html;
I am trying to run 2 applications behind an NGINX server.
one is listening on 3000 (grafana) and one is listening on 9090 (prometheus)
My current server block nginx.conf looks like this:
server {
listen 80;
root /usr/share/nginx/html;
index index.html index.htm;
location / {
proxy_pass http://localhost:3000/;
}
location /prometheus{
proxy_pass http://localhost:9090/;
}
}
Now for Grafana, this works perfectly and everything works in the dashboard.
But when typing Domain/prometheus it still redirects me to grafana instead of Prometheus.
Do I need todo something specific to have it working in this setup that everything besides /prometheus is redirected to grafana?
By default, http://localhost:9090 will be redirected to http://localhost:9090/graph, so the request is being redirected as below:
# the origin request
http://Domain/prometheus
# the request redirect by nginx
http://localhost:9090/
# the request redirect by prometheus
http://Domain/graph
# the request redirect by nginx again
http://localhost:3000/graph
You can check this by using F12 in Chrome.
To fix this, I recommend you separate the domain into two domains:
server {
listen 80;
server_name Domain-Grafana; # Domain for Grafana
root /usr/share/nginx/html;
index index.html index.htm;
location / {
proxy_pass http://localhost:3000/;
}
}
server {
listen 80;
server_name Domain-Prometheus; # Domain for Prometheus
root /usr/share/nginx/html;
index index.html index.htm;
location / {
proxy_pass http://localhost:9090/;
}
}
So I solved it now by doing this:
server {
listen 80;
root /usr/share/nginx/html;
index index.html index.htm;
location /prometheus {
proxy_pass http://localhost:9090/prometheus;
}
location / {
proxy_pass http://localhost:3000/;
}
}
I have Nginx setup Flask based backend running on port 8080 with the below configuration
server {
listen 8080 default_server;
listen [::]:8080;
root /var/www/html;
server_name _;
location /static {
alias /var/www/html/static/;
}
location / {
try_files $uri #wsgi;
}
location #wsgi {
proxy_pass http://unix:/tmp/gunicorn.sock;
include proxy_params;
}
location ~* .(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
access_log off;
log_not_found off;
expires max;
}
}
I have also setup a systemd service that uses gunicorn to run the flask app using: gunicorn --bind=unix:/tmp/gunicorn.sock --workers=4 start_backend:web_app
Now the above is working for Python Flask backend on port 8080, I also want to add Vue app on default port 80 as well.
Update
server {
listen 80 default_server;
listen [::]:80;
root /var/www/html/dist;
server_name _;
location /static {
alias /var/www/html/dist/static/;
}
location / {
root /var/www/html/dist;
try_files $uri $uri/ /index.html;
}
location /api {
root /var/www/html;
try_files $uri #wsgi;
}
location #wsgi {
proxy_pass http://unix:/tmp/gunicorn.sock;
include proxy_params;
}
Sounds like you need to add another server block to serve the frontend.
server {
listen 80 default_server;
listen [::]:80;
location / {
root /path/to/dist;
try_files $uri $uri/ /index.html;
}
}
I've based this code on this tutorial where /path/to/dist in the above example should be changed to the dist directory of the Vue.js front-end from your vue app.
If you have a read of the section Setting Up Nginx in this tutorial, you'll notice that they are serving the Flask application and the Vue.js fronted at different URLs in the same server block:
server {
listen 80;
server_name 123.45.67.89;
location /api {
include uwsgi_params;
uwsgi_pass unix:/home/survey/flask-vuejs-survey/backend/surveyapi.sock;
}
location / {
root /home/survey/flask-vuejs-survey/frontend/survey-spa/dist;
try_files $uri $uri/ /index.html;
}
If this app will be facing the internet then this is probably a better way to do things, as port 8080 outgoing may be blocked by your users' internet provider. With the second configuration everything is served through port 80.
You may have to adjust your vue.js app slightly to make it look for the API at /api (or something) leaving / free to serve the frontend.
I have my app deployed to a file server here at:
http://example.com/my-team/my-app
We want our app to be facing at:
http://amazingapp.com
So far this is what I have on nginx
server {
listen 80;
server_name http://amazingapp.com;
location / {
proxy_pass http://example.com/my-team/my-app/;
}
}
This works for initial http://amazingapp.com but any subsequent requests http://amazingapp.com/post/1/comment/2 result in 404
Most of the ember deploy examples have the file being served from the same location as the web server, using try_files $uri $uri/ index.html So i don't believe i'm able to go down that path?
I've tried using regex on the location but that requires the proxy_pass to have parameters.
If you could point me in the right direction would be so grateful.
Thanks in advance!
Consider your config below
server {
listen 80;
server_name http://amazingapp.com;
location / {
proxy_pass http://example.com/my-team/my-app;
}
}
When you access http://amazingapp.com/abc your location / will cut abc out of it and append to proxy_pass. Making your url as http://example.com/my-team/my-appabc. Fix is quite simple, just add a trailing/` to your proxy_pass
server {
listen 80;
server_name http://amazingapp.com;
location / {
proxy_pass http://example.com/my-team/my-app/;
}
}