Nginx configuration for NodeJS API - node.js

I have some static files, that I can already access, and I have an api, already at digital ocean.
But I am having some troble configuring NGINX to access both at the same time. If my api works, the static files don't. And vice-versa;
My api is running on port 5000, and I want to access the site and the api by IP adress.
Pls, help!
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
server_name _;
location / {
try_files $uri $uri/ =404;
}
}
server {
location / {
proxy_pass http://localhost:5000;
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;
}
}

If both services are being accessed from the same IP address and port, then you need to use one server block. Ideally, you would move the API into a unique URI, for example:
location / {
try_files $uri $uri/ =404;
}
location /api/ {
proxy_pass ...;
...
}
If you must use an overlapping URI space for both static files and the API, you can use try_files to check for the existence of a static file first:
location / {
try_files $uri $uri/ #proxy;
}
location #proxy {
proxy_pass ...;
...
}
See this document for more.

Related

Using Nginx with Create-React-App dev server and npm start

Frustrating question here. I have a react project created with created-react-app on a server that has to use Nginx for external connection/HTML server. What essentially I need to do is use nginx as a proxy server and when the URL is typed into browser, the request is routed to localhost:3000 and the react app generates the result which is served to the client by nginx.
So, here is the nginx file so far, but I can't get it to work. A number of questions:
does the root designation need to be directed to the /public directory in the react project to pick up index.html?
Assuming that you run npm start and after the compile, you enter the FQDN in the browser and it routes to localhost:3000
My Nginx config so far
server_name server-name.com;
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/site-name/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/site-name/privkey.pem;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!aNULL:!MD5;
proxy_read_timeout 60s;
client_max_body_size 64M;
# should this be routed to /public in the react project to pick up index.html?
# root /var/www/html;
index index.html index.htm;
location / {
#try_files $uri $uri/ =404;
# Make sure React Application return is index.html so client routing remains in sync/reachable
#try_files $uri /index.html;
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 /_api {
rewrite ^/_api/(.+) /$1 break;
include uwsgi_params;
uwsgi_pass 127.0.0.1:3030;
}
}
server {
server_name server-name.com
listen 80;
allow 10.0.0.0/16;
deny all;
proxy_read_timeout 60s;
client_max_body_size 64M;
# Should this be routed to /public in the react project to pick up index.html?
# root /var/www/html;
index index.html index.htm;
location / {
#try_files $uri $uri/ =404;
# Make sure React Application return is index.html so client routing remains in sync/reachable
try_files $uri /index.html;
}
location /_api {
include uwsgi_params;
uwsgi_pass 127.0.0.1:3030;
}
}
open your nginx file vi sites-enabled/default if you don't know how to do that let me know.
then remove everything from that file and simply paste :
server {
listen 80;
client_max_body_size 10M;
server_name YourWebsiteNameWithDomain yourIPV4;
location / {
proxy_pass http://127.0.0.1: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;
}
}
don't forget to restart your nginx

Ember and Node.js Nginx Configuration amazon EC2 Ubuntu Server

I am getting this error when I try and load my site:
Reading into it, I think there is an issue with my frontend not being able to contact my backend. I've done a CURL to my backend inside the server and outside and everything works. Also deploying with Ember-Cli-mirage works fine as well, Leading me to believe there is an issue with my NGINX config files. I have two config files one for the front end and one for the backend:
Frontend Ember config:
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /usr/local/t;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
My backend Node.js Express config:
server {
listen 80;
server_name default_server;
root /usr/local/cloudBackend;
index index.html index.htm;
access_log /var/log/nginx/cpe.access.log;
error_log /var/log/nginx/cpe.error.log notice;
# auth_basic "Restricted";
# auth_basic_user_file /etc/nginx/.htpasswd;
location / {
proxy_pass http://localhost:3001;
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;
}
}
Any help would be much appreciated.
Added this to my Node.js headers and then it worked!
res.setHeader('Content-Type', 'application/json');

NgInx forbidden error for static content nodejs app reverse proxy

I am using NgInx reverse proxy for my expressjs website with HTTPS. website is getting accessed with https without any issue and requests are getting at Nodejs server but problem is with Static content.
All static contents(JS, CSS, Images, fonts etc.) are throwing 403 forbidden error.
Below is my ngInx configuration file content:
server {
listen 80;
listen 443 ssl;
ssl on;
ssl_certificate /home/ec2-user/certs/myapp.bundle.crt;
ssl_certificate_key /home/ec2-user/certs/myapp.key;
root /home/ec2-user/myapp;
server_name example.com;
access_log /var/log/nginx/nginx.vhost.access.log;
error_log /var/log/nginx/nginx.vhost.error.log;
location / {
#try_files $uri $uri/ /index.php?$args ;
#try_files $uri $uri/ =404;
proxy_pass https://example.com: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;
}
}
I am using amazon EC2 and CentOS.
Please help. Thanks in advance.
location / {
proxy_pass https://example.com: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;
}
You are redirecting all traffic to to nodejs. Thats means expressjs will serve static content.
To serve static files, use the express.static built-in middleware function in Express.
Pass the name of the directory that contains the static assets to the express.static middleware function to start serving the files directly. For example, use the following code to serve static files in a directory named public:
app.use(express.static('public'))
More info here: https://expressjs.com/en/starter/static-files.html
You are trying to server static files from your NodeJS app which is not right approach since you are using Nginx. Add a below kind of block to you config
location ~ \.(css|gif|png|jpe?g|ico|js|swf|ttf|woff) {
expires 30d;
root /home/ec2-user/myapp;
try_files $uri =404;
}
You might need to adjust the root folder based on how you are using your assets. But if you are using it same as /home/ec2-user/myapp then you can skip adding this line

Subdirectory set as subdomain

I have server with Nginx at front and nodejs which run reactjs application and my application is divided to few parts and I want to each part got own subdomain.
Example:
http://192.168.1.1:9000/part1/ --- > http://sub1.example.com/
http://192.168.1.1:9000/part2/ --- > http://sub2.example.com/
I did something like this:
server {
listen 80;
server_name sub1.example.com;
root html;
index index.html index.htm;
location / {
proxy_pass http://127.0.0.1:9000/part1/;
}}
Server works when i used this config but when I open browser I've got error which telling me about problem with static content.
Server trying take static content from http://127.0.0.1:9000/part1/
Should take from http://127.0.0.1:9000/
Thanks for the help in advance.
Based on your information something like so might work (repeat for both subdomains obviously)
server {
listen 80;
server_name sub1.example.com;
root /home/usr/react/app/build/static;
index index.html index.htm;
location / {
try_files $uri $uri/ #nodejs;
}
location #nodejs {
proxy_redirect off;
proxy_http_version 1.1;
proxy_pass http://127.0.0.1:9000/part1;
proxy_set_header Host $host ;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
Explained
In this case we are first trying to locate the static files if they exist
try_files $uri $uri/ #nodejs;
If no matching files exist then the request is proxied to the Node.js server on the path /part1
proxy_pass http://nodejs/part1;

nginx + nodejs configuration

I have a problem with my current nginx configuration. What I am trying to do is:
For requests without any path, get the index.html (works)
Get existing files directly (works)
If the requested file or path does not physically exist, proxy request to nodejs (404)
I have tried several configurations found here on stackoverflow, but none of them fit my needs.
Here is my current configuration:
# IP which nodejs is running on
upstream app_x {
server 127.0.0.1:3000;
}
# nginx server instance
server {
listen 80;
server_name x.x.x.x;
#access_log /var/log/nginx/x.log;
root /var/www/x/public;
location / {
root /var/www/x/public;
index index.html index.htm index.php;
}
location ^/(.*)$ {
if (-f $request_filename) {
break;
}
proxy_set_header Host $http_host;
proxy_pass http://127.0.0.1:3000;
}
}
I think I figured out what you were trying to do. The proper way is to use try_files together with a named location.
Try with the following configuration:
# IP which nodejs is running on
upstream app_x {
server 127.0.0.1:3000;
}
# nginx server instance
server {
listen 80;
server_name x.x.x.x;
#access_log /var/log/nginx/x.log;
location / {
root /var/www/x/public;
index index.html index.htm index.php;
try_files $uri $uri/ #node;
}
location #node {
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_pass http://app_x;
}
}
Note: When you have an upstream defined you should use that in your proxy_ pass. Also, when proxying, always add the X-Forwarded-For header.
I was wondering that problem is in application path. Please find the following code excerpt from toontuts blog for full configuration of nginx with nodejs, you may find this link
upstream subdomain.your_domain.com {
  server 127.0.0.1:3000;
}
 
server {
  listen 0.0.0.0:80;
  server_name subdomain.your_domain.com;
  access_log /var/log/nginx/subdomain.your_domain.access.log;
  error_log /var/log/nginx/subdomain.your_domain.error.log debug;
 
  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarder-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
 
    proxy_pass http://subdomain.your_domain.com;
    proxy_redirect off;
  }
}

Resources