I have following nginx configuration:
server {
listen 80;
listen 8080;
server_name localhost;
location / {
root /telly_platform/frontend/public/pwa;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:3030$request_uri;
}
}
When I perform a request to http://localhost/api/path/resource the request goes OK - where it needs to go - http://localhost:3030/api/path/resource.
But when I perform a request to http://localhost:8080/api/path/resource (with port 8080) the request is not passed to the URL in proxy_pass directive, but is processed by first location block which returns index.html content.
What am I doing wrong and how to configure nginx to return API response even if it goes through 8080 port?
Thx!
Related
I am trying to run a react app with Node.js backend on the Nginx server.
Here's my server block in the nginx.conf file:
include /etc/nginx/conf.d/*.conf;
server {
listen 80;
listen [::]:80;
server_name _;
root /usr/share/nginx/folder-name/frontend/build;
index index.html index.htm;
location / {
proxy_pass http://localhost:5000;
}
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
The build folder contains the compiled react js code(using npm run build)
Node.js backend is running on port 5000 using pm2/forever.
After restarting the Nginx Server, the react UI appears on the server IP but the UI is distorted.
Also, I am not able to access my backend APIs on MyIP/api/endpoint.
What am i doing wrong.? This nginx configuration was built from SO and other online resources so there's a huge probabilty that it could be wrong. Please help!
Thanks in advance!
The issue is you are setting the API proxy for the root (/). The correct one should look like this:
server {
listen 80;
listen [::]:80;
server_name _;
root /usr/share/nginx/folder-name/frontend/build;
index index.html index.htm;
location /api {
proxy_pass http://localhost:5000;
}
location / {
try_files $uri $uri/ =404;
}
}
If you don't have /api path in your Node.js, you will need a rewrite rule for it like this:
location /api {
rewrite ^/api/?(.*) /$1 break;
proxy_pass http://localhost:5000;
proxy_redirect off;
proxy_set_header Host $host;
}
I had experience that.Please check my image file
This configuration is running successfully on aws.
Your mistakes is proxy area. Please change like that.
location /api/ {
proxy_pass http://127.0.0.1:5000/api/
}
If you want, I can HELP you.
Yes, you can host both API and static files (build files of your front-end) on the same domain or host. Below, you can find a server block for a sample API hosted on port 3000 and static HTML files at a root location being served on port 80.
server {
listen 80;
server_name localhost;
location / {
root /var/www/html;
index index.html;
error_page 404 index.html;
}
location /api/ {
proxy_pass http://localhost:3000/;
}
}
You can access the front-end at http://localhost/<blah...> and the API at http://localhost/api/<blah...> (please note how /api is handled in the URL here and the server block above). Replace localhost with your domain name.
What am i doing wrong.?
One issue is with your proxy_pass directive. You are missing trailing slash /
...
location / {
proxy_pass http://localhost:5000/;
}
...
First, try this and share your result.
I've got an NGINX reverse proxy on my server handling requests for http://apcompdoc.com. It listens on port 80, and can successfully return the Vue Dist, however, I have a backend node API running on port 8081 and another node process running on port 8082. The user never directly requests anything on 8082, but rather the process on 8081 sometimes requests the process on 8082, so I'm assuming I never have to even expose that to Nginx at all, but I'm not too sure. However, the main problem is that the API is never reached I believe. I have it so that when you hit the endpoint http://apcompdoc.com/api/* it should proxy over to the node process. I am using PM2 to keep the process alive and monitor it, and am assured it's running. This is my NGINX apcompdoc.com config file:
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
server_name: apcompdoc.com www.apcompdoc.com;
charset utf-8;
root /var/www/apcompdoc/dist;
index index.html index.htm;
# Always serve index.html for any request;
location / {
root /var/www/apcompdoc/dist;
try_files $uri /index.html;
}
location /api/ {
proxy_pass http://localhost:8081;
}
error_log /var/log/nginx/vue-app-error.log;
access_log /var/log/nginx/vue-app-access.log;
}
I am trying to get all requests to my API at /api/* to get redirected to the API at localhost:8081 and then returned to the user. I saw something about redirecting the proxy back, do I have to do that? I also don't know if I have to do /api/* in the NGINX config file.
I'm really new to NGINX but I just want the requests to http://apcompdoc.com/api/* to be redirected to the node process on port 8081.
Bad or good practice, I'm not sure, but I always defining my backend as upstream.
For example, your file will look like this:
upstream nodeprocess {
server localhost:8081;
}
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
server_name: apcompdoc.com www.apcompdoc.com;
charset utf-8;
root /var/www/apcompdoc/dist;
index index.html index.htm;
# Always serve index.html for any request;
location / {
root /var/www/apcompdoc/dist;
try_files $uri /index.html;
}
location ^~ /api {
proxy_pass http://nodeprocess;
}
error_log /var/log/nginx/vue-app-error.log;
access_log /var/log/nginx/vue-app-access.log;
}
Please note I added ^~ in the location of the api and removed the trailing /
I have a server where I have an Angular app and a nodejs backend.
The backend runs on port 4000
I use nginx as reverse proxy and here is my config
server{
server_name _;
location / {
root /var/www/haymrFront;
index index.html;
try_files $uri $uri/ /index.html;
}
location /tgup-api/ {
proxy_pass "http://localhost:4000/";
}
}
Unfortunately when I send a request to my server/tgup_api/, the angular app gets it. Any idea how to fix it?
you don't need quotes for proxy_pass
just use
location /tgup-api/ {
proxy_pass http://localhost:4000/;
}
I have a VPS which runs under CentOS 7.
The idea is: to have under maindomain.com node.js front-end app deployed while under api.maindomain.com to have php back-end deployed. Is it possible? Say, add server blocks to Nginx: reverse proxy localhost:4000 for node.js app and the other block for localhost:80 for php back-end.
Maybe there exists the other solution, I don't know, I would appreciate any ideas! The main goal: to have both app at the same server.
Solution 1 with www.maindomain.com + api.maindomain.com
Frontend
server {
listen 80;
server_name www.maindomain.com;
location / {
root /path/to/your/files;
try_files /index.html;
}
}
Backend php API
server {
listen 80;
server_name api.maindomain.com;
location / {
proxy_pass http://localhost:4000;
}
}
Solution 2 everything on same domain, www.maindomain.com
server {
listen 80;
server_name www.maindomain.com;
location /api {
proxy_pass http://localhost:4000/api;
}
location / { # always at the end, like wildcard
root /path/to/your/files;
try_files /index.html;
}
}
I have an Nginx server running and redirecting proxy to a node server:
server {
listen 80 default_server;
root /usr/share/nginx/html;
index index.html index.htm;
location / {
try_files $uri /index.html;
}
location /api {
proxy_pass http://node_server:9000;
}
Site URL is example.com, but when you go to example.com/api, it should go to the root of the node server.
When I do app.use('/', indexRouter);, though, it doesn't work.
I have to do app.use('/api', indexRouter);.
server {
listen 80 default_server;
root /usr/share/nginx/html;
index index.html index.htm;
location / {
try_files $uri /index.html;
}
location /api {
proxy_pass http://node_server:9000/;
# ^
}
}
Had to add a forward slash.