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

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

Related

Nodejs App running on nginx webserver is returning images from the uploads folder as text/html

so I've just deployed my nodeJS app on a nginx webserver on linode via Laravel Forge.
I was able to config it in a way that it'd render when viewed on a browser. however,
all of the images from the uploads folder are being returned as text/html. I'm wondering if this has got something to do with my nginx configuration.
A little information about my app setup.
client app (react application) lives inside the /client directory and the server application lives in the root directory.
server app routing configuration
This is what I've tried so far.
# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/{server_name}/before/*;
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
listen 80;
server_name {server_name};
root /home/forge/{server_name}/client/build;
index index.html index.htm index.php;
# FORGE SSL (DO NOT REMOVE!)
charset utf-8;
# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/{server_name}server/*;
location / {
try_files $uri $uri/ /index.html;
autoindex on;
}
location /static/ {
alias /home/forge/{server_name}/client/build/static/;
expires max;
add_header Cache-Control public;
}
access_log on;
error_log /var/log/nginx/{server_name}-error.log error;
location /api {
proxy_pass http://localhost:7689;
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;
}
}
# FORGE CONFIG (DO NOT REMOVE!)
include forge-conf/{server_name}/after/*;
This is what the requests in the network tab look like.

How do I serve static assets (html) to a node server running with nginx?

I have a server running with pm2 that is being served up by nginx. I would like to point my react app to the domain, and have the server only respond to requests that the client sends.
currently if you go to jwcuisine.io it gives you a "CANNOT GET /" message, I tried something like this:
location / {
# This would be the directory where your React app's static files are stored at
root /var/www/html/;
try_files $uri /index.html;
}
location /graphql {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://localhost:5000/;
proxy_ssl_session_reuse off;
proxy_set_header Host $http_host;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
}
However, the above ^^^ led to a 500 error from nginx.
Below is the code I currently have, that is giving the /GET response. Any direction would be appreciated, I can't find a ton of relevant information pertaining to this.
server {
server_name jwcuisine.io www.jwcuisine.io;
location / {
proxy_pass http://localhost:4000; #whatever port your app runs on
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;
}
listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/jwcuisine.io/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/jwcuisine.io/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
if ($host = www.jwcuisine.io) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = jwcuisine.io) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80 default_server;
listen [::]:80 default_server;
server_name jwcuisine.io www.jwcuisine.io;
return 404; # managed by Certbot
}
I am also using similar architecture to host my website front-end and back-end via nginx reverse proxy server. There is an update in your nginx conf after which it will work as expected. That is you need to add first all subroutes(Ex. /api, graphql) and then you need to add the location for index route /. In your current conf website will never be able to go to server as /server route gets matched to index route / first and it will try to find it in the static folder and never reach the proxy_pass you have provided in below location.
Update nginx.conf:
server{
listen 80 default_server;
listen [::]:80 default_server;
server_name jwcuisine.io www.jwcuisine.io;
location /graphql {
proxy_pass "http://127.0.0.1:5000";
proxy_read_timeout 5400s;
proxy_send_timeout 5400s;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_cache_bypass $http_upgrade;
}
location / {
root /var/www/html;
try_files $uri $uri/ /index.html;
}
}

Vue and Node configuration nginx

I've hosted my first Vue and Node app but I have a problem. I want to load Vue files on diferent port so there is less stress on node. The problem is that with this current configuration I get this in browser: Cannot GET / even though when in Node router I add route with url / I get something. But I need to load this url from vue router not from express router. Why it loads from express ? This is my configuration file nginx:
server {
listen 80;
listen [::]:80 default_server;
return 301 https://$host$request_uri;
}
server {
# Enable HTTP/2
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name domain.com;
# Use the Letā€™s Encrypt certificates
ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem;
# Include the SSL configuration from cipherli.st
include snippets/ssl-params.conf;
location /api {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://localhost:5000;
proxy_ssl_session_reuse off;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
}
location / {
root /var/www/html/Web/dist; // Vue dist folder
}
}
In your nginx config you need to add try_files $uri $uri/ /index.html; to you / location like so. This sends everything to your index.html file.
location / {
root /var/www/html/Web/dist; // Vue dist folder
try_files $uri $uri/ /index.html;
}

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');

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;

Resources