I have my ReactJS NodeJS deployed on Linux NGINX and I can login on my development machine, on my phone, and on Linux OS running on my computer Oracle VM; i can accessed the application on these devices and it worked fine on these three devices even when I changed IP address but immediately another device e.g somebody else computer or phone tries to login, it would always return invalid login credentials but my three devices(laptop, phone, and Linux OS running on my computer Oracle VM) can login successfully on this application.
Below is my nginx.conf that manages my ReactJS NodeJS application
user www www; ## Default: nobody
server { # simple reverse-proxy
listen 80;
server_name mydomain;
root /etc/nginx/sites-available/mydomain;
index index.html;
# serve static files
#location ~ ^/(images|javascript|js|css|flash|media|static)/ {
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri /index.html $uri/ =404;
}
location /api {
proxy_pass https://localhost:port;
}
}
server {
listen 443 ssl;
server_name mydomainname
root /etc/nginx/sites-available/mydomain;
index index.html;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri /index.html $uri/ =404;
}
location /api {
proxy_pass https://localhost:port;
}
ssl_certificate /etc/letsencrypt/live/mydomain/fullchain.pem; # managed by Certbot;
ssl_certificate_key /etc/letsencrypt/live/mydomain/privkey.pem; # managed by Certbot
ssl_verify_client on;
}
I will appreciate your help.
Related
Please help. I have my ReactJS NodeJS deployed on Linux NGINX and I can login on my development machine, on my phone, and on Linux OS running on my computer Oracle VM; i can accessed the application on these devices and it worked fine even when I changed IP address but immediately another device e.g somebody else computer or phone tries to login, it would always not redirect to dashboard but my three devices(laptop, phone, and Linux OS running on my computer Oracle VM) can redirect successfully to dashboard after logging in.
I have tried everything on this page below that people provided as solution but to no success :
https://stackoverflow.com/questions/43951720/react-router-and-nginx
Infact, i don't even see their login attempt in the NodeJS API running. My ReactJS build file contents are in /etc/nginx/sites-available/mydomain/ and this is my nginx.config below:
user www www; ## Default: nobody
server { # simple reverse-proxy
listen 80;
server_name mydomain;
# serve static files
#location ~ ^/(images|javascript|js|css|flash|media|static)/ {
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
root /etc/nginx/sites-available/mydomain;
index index.html;
try_files $uri /index.html;
}
location /api {
proxy_pass https://localhost:8084;
root /etc/nginx/sites-available/mydomain;
index index.html;
}
}
server {
listen 443 ssl;
server_name mydomain;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
root /etc/nginx/sites-available/mydomain;
index index.html;
try_files $uri /index.html;
}
location /api {
proxy_pass https://localhost:8084;
root /etc/nginx/sites-available/mydomain;
index index.html;
}
ssl_certificate /etc/letsencrypt/live/mydomain/fullchain.pem; # managed by Certbot;
ssl_certificate_key /etc/letsencrypt/live/mydomain/privkey.pem; # managed by Certbot
#...
}
Please fams, what difference does it make as I have my NGINX configuration in nginx.conf and not default?
As I configured my nginx.conf do I still need to go do the same in /etc/nginx/sites-available/default and what extension is this default config file?
Trying to deploy two angular application (First one is for front end user interface, second one is for admin panel) for my ecommerce web platform on aws ec2 istance NGINX server.
server {
charset utf-8;
listen 80 default_server;
server_name _;
# angular app & front-end files
location / {
root /opt/app-web;
try_files $uri /index.html;
}
#admin app
location /app-admin/ {
root /opt/app-admin;
try_files $uri /index.html
}
# node api reverse proxy
location /api/ {
proxy_pass http://localhost:4000/;
}
}
Here I am unable to open the admin panel as it redirects to app-one. If there, Please suggest me a better way.
I have a server (VPS Amazon) with Ubuntu. In this server is running my backend node and my frontend React.
My ReactApp is running over nginx and my backend over pm2.
In my react app I defined REACT_APP_BASE_URL: http://[my_ip_server]:4000.
So everything was working OK but after I configured SSL in nginx, I can access my frontend login page but when I send the request, I catch the following errors:
a) If I set https in my REACT_APP_BASE_URL (https://[my_ip_server]:4000), I get this error: ERR_SSL_PROTOCOL_ERROR.
b) If I let with http, I get Mixed Content error
Someone know How I do this work?
Thanks a lot!
My nginx.conf. At moment I'm using just port 80 until I solve my problem.
server {
#listen [::]:443 ssl ipv6only=on; # managed by Certbot
#listen 443 ssl; # managed by Certbot
#ssl_certificate /etc/letsencrypt/live/mysite.com.br/fullchain.pem; # managed by Certbot
#ssl_certificate_key /etc/letsencrypt/live/mysite.com.br/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
#if ($host = surveys.alcancenet.com.br) {
# return 301 https://$host$request_uri;
#} # managed by Certbot
listen 80 default_server;
listen [::]:80 default_server;
server_name mysite.com.br;
#return 404; # managed by Certbot
root /var/www/html;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri /index.html;
}
}
With help from #Markido. I managed to solve that.
I added in my backend the default route "/api" and after that I put in my nginx config the following
location /api {
proxy_pass http://localhost:4000;
}
Tks!!!
First off, there is a difference between running the applications (which is what i assume you are using PS2 for), and exposing them through an nginx proxy.
It would be most helpful to show us your nginx config file, and also tell us which port your backend runs on (assuming the frontend runs on port 4000).
Edit;
Thanks for the config and backend port.
I don't think you need to set the create react app base url to https, just set the port and run it on the VPS using PS2.
I can't see how you have any proxy at all pointing to 4000 in your config - do you not expose the backend?
The only exposed part is static html files. The relevant code is;
root /var/www/html;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri /index.html;
}
If you want to call the backend using https, or generate your site using some tool with a process which entails HTTPS calls, you need to do so correctly in the frontend. IE something doesn't add up here.
The usual approach is;
Expose the backend and the frontend on port 443 SSL only, using different sub-domains (eg. api.mydomain.com), and then use the proxy in nginx to redirect 443 traffic for each domain to the corresponding local ports (4000, and the frontend port or static files directory more likely).
Instead of:
location / {
try_files $uri $uri /index.html;
}
Use something like:
location / {
proxy_pass http://localhost:4000;
}
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 just realized that navigating to my application using just https://example.com is not working but other URLs are resolving correctly like so:
http://example.com -> https://www.example.com
http://www.example.com -> https://www.example.com
https://example.com -> ETIMEDOUT
http://www.example.com -> https://www.example.com
So a little bit about the application, it is a react web application running in a Linux App Service in Azure, where I am running a nginx container to serve the react application.
I am using Namecheap for my domain provider and these are the two related redirect DNS records I have for my domain:
And this is the TLS/SSL Settings for my azure app service I am redirecting to:
Now I believe this is the culprit, but I am not exactly sure what needs to happen here. This is my nginx.conf in the nginx container:
http{
server {
server_name example.com;
return 302 $scheme://www.example.com$request_uri;
}
server {
server_name www.example.com;
root /usr/share/nginx/html;
location ~* \.(?:manifest|appcache|html?|xml|json)$ {
expires -1;
# access_log logs/static.log; # I don't usually include a static log
}
location ~* \.(?:css|js)$ {
try_files $uri =404;
expires 1y;
access_log off;
add_header Cache-Control "public";
}
# Any route containing a file extension (e.g. /devicesfile.js)
location ~ ^.+\..+$ {
try_files $uri =404;
}
# Any route that doesn't have a file extension (e.g. /devices)
location / {
try_files $uri $uri/ /index.html;
}
}
}