ReactJS Router Dom not navigating to dashboard after logging in - node.js

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?

Related

ReactJS NodeJS Nginx deployment issue

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.

Deploying two angular application on a single aws ec2 istance

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.

Nginx With SSL and Frontend + Backend same server

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;
}

Refreshing page always resolves to top level

I am deploying my app on an ec2 machine. There is a node app which corresponds to myapp.com/api. This is working fine. The Client app is built on React and users visit it on myapp.com.
The client app is getting rendered and i am able to navigate to different paths. However when I refresh a page, eg. myapp.com/profile it always resolves to myapp.com.
server {
listen 80;
server_name myapp.com;
root /home/ec2-user/projects/synaid/client/build;
passenger_enabled on;
index index.html;
location / {
root /home/ec2-user/projects/synaid/client/build;
try_files $uri /index.html;
}
location /api {
root /home/ec2-user/projects/synaid/server/build;
rewrite ^/api/(.*) /$1 break;
passenger_enabled on;
passenger_app_type node;
passenger_app_root /home/ec2-user/projects/synaid/server/build;
passenger_startup_file index.js;
passenger_env_var APP_ENV staging;
}
}
What I thing is happening is that when nginx server gets a request it is slicing the url from base path and rendering the index.html to browser. It should also be passing the url forward to the app, which it doesnt seem to be doing.
A possible solution could be to forward url to the app from inside the configuration.

Nginx servers configuration

I’m trying to configure nginx. I have 2 node.js servers in my project. First is working. And here’s nginx configuration file for it:
server {
listen 80;
server_name www.myhоst.com
location / {
root /home/my-project/server1/app;
index index.html index.htm;
proxy_pass http://server1_ip:8080/;
}
location /server_2 {
root /home/my-project/server2/app;
index index.html index.htm;
proxy_pass http://server2_ip:5050/;
}
}
The first server is running correctly when I’m opening www.myhоst.com/ , but the second one when I’m passing www.myhost.com/server2 link is not. How I can fix it?

Resources