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/;
}
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.
Here is my Nginx configuration and it's not working.
server {
listen 80;
server_name mydomain.com;
location /path {
proxy_pass http://localhost:3000;
}
}
However, reverse proxy in location / is working. I think this is related to Nuxtjs but can't find a solution.
If you are using nuxt, you shouldn't serve as a proxy pass.
You should use the following command to generate a build and serve the path with nginx. For more information you can check the nuxt docs
$ npm run build
$ npm run generate
After that command run with success you should see a new folder dist with your project.
You should serve dist folder in your nginx.
My nginx file example for serving nuxt project:
server {
listen 80 default_server;
root /var/www/site/dist;
index index.html;
server_name mydomain.com.br www.mydomain.com.br;
location / {
try_files $uri $uri/ =404;
}
location /path {
alias /var/www/nuxtproj/dist; #<-- made this edit
try_files $uri $uri/ =404;
}
}
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 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!
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.