Multiple react apps not running in nginx - nginx

I have 3 apps: 1 nodejs and 2 react apps.
My nginx.conf looks like this:
#node-app is running on port 3001
upstream api {
server localhost:3001;
}
server {
listen 80;
listen [::]:80;
server_name _;
index index.html index.htm;
location /api {
rewrite /api /$1 break;
proxy_pass http://api;
}
#the first react app
location /admin {
root /home/ec2-user/admin/build;
try_files $1 index.html;
}
#the second react app
location / {
root /home/ec2-user/client/build;
try_files $uri /index.html;
}
What happens is that I can go to the second react app. But when I go to the admin-page I got an nginx error:
The page you are looking for is not found.
I also have tried to declare the admin this way:
location /admin/(.*) {
root /home/ec2-user/admin/build;
try_files $1 index.html;
}
But then the page does not display anything. I suspect that the app number 2 takes over, but as there is no route to "admin" it shows an empty page.

Please add
these rule in nginx
#First app
location ^~ /admin/ {
if (!-e $request_filename){
rewrite ^(.*)$ /index.html break;
}
root /home/ec2-user/admin/build;
}
###Second app
location ^~ /admin-page/ {
if (!-e $request_filename){
rewrite ^(.*)$ /index.html break;
}
root /home/ec2-user/client/build;
}

Related

How I combine multiple react apps in one app

I have two apps build in react using vite and I want to combine those two apps in one on the same port:
For example in nginx I want something like this:
http://localhost -> redirect to http://localhost:3000;
http://localhost/path-to-app2 -> redirect to http://localhost:4000;
What I tried with the apps in development mode:
server {
listen 80;
location / {
proxy_pass http://localhost:3000;
}
location /path-to-app2 {
proxy_pass http://localhost:4000;
}
}
also I tried with builded apps:
server {
listen 80;
location / {
root /usr/share/nginx/html/app1;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /path-to-app2 {
root /usr/share/nginx/html/app2;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
The problem is that all routes are redirected to location /. I also tried to change location / to location = / but also didn't work...
I also tried to app2 who has the path /path-to-app2 to add in package.json: "homepage": "/path-to-app2" but also didn't work. I don't succed to make the path / exact
I someone here who faced the same issue like me?

Multiple Reverse Proxy and Hosting NginX [duplicate]

I am trying to implement something like that in the nginx conf:
subdomain
sub.domain.com -> Serve html
sub.domain.com/api -> proxy to port 3001
sub.domain.com/viewer -> serve another html
subdomain2
sub2.domain.com -> proxy to port 3000
The only route that doesn't work is the viewer, I get the html from the "location /". All other configurations work well.
I tried to move the viewer to the bottom then to the top and to the middle no matter what it doesn't work.
I use CentOS7. This is the configurations currently in the server:
events {
}
http {
server {
listen 80;
listen [::]:80;
server_name www.sub.domain.com subdomain.com;
location /viewer {
root /opt/viewer/;
try_files $uri /index.html;
index index.html;
}
location / {
root /opt/client-bo/;
try_files $uri /index.html;
index index.html;
}
location /api {
proxy_pass "http://localhost:3001";
}
}
server {
listen 80;
server_name www.sub2.domain.com sub2.domain.com;
listen [::]:80;
location / {
proxy_pass "http://localhost:3000";
}
}
}
Thanks!
If your viewer app located in the /opt/viewer directory and you want it to be available under the /viewer URI prefix, you should use root /opt; for the location /viewer { ... }. Check the difference between root and alias directives.
Next, the very last argument of the try_files directive is treated as the new URI to re-evaluate, so you /index.html being treated as the new URI going to be served with the location / { ... }. You should change that directive to
try_files $uri /viewer/index.html;

nginx with multiple locations directives with subdomains

I am trying to implement something like that in the nginx conf:
subdomain
sub.domain.com -> Serve html
sub.domain.com/api -> proxy to port 3001
sub.domain.com/viewer -> serve another html
subdomain2
sub2.domain.com -> proxy to port 3000
The only route that doesn't work is the viewer, I get the html from the "location /". All other configurations work well.
I tried to move the viewer to the bottom then to the top and to the middle no matter what it doesn't work.
I use CentOS7. This is the configurations currently in the server:
events {
}
http {
server {
listen 80;
listen [::]:80;
server_name www.sub.domain.com subdomain.com;
location /viewer {
root /opt/viewer/;
try_files $uri /index.html;
index index.html;
}
location / {
root /opt/client-bo/;
try_files $uri /index.html;
index index.html;
}
location /api {
proxy_pass "http://localhost:3001";
}
}
server {
listen 80;
server_name www.sub2.domain.com sub2.domain.com;
listen [::]:80;
location / {
proxy_pass "http://localhost:3000";
}
}
}
Thanks!
If your viewer app located in the /opt/viewer directory and you want it to be available under the /viewer URI prefix, you should use root /opt; for the location /viewer { ... }. Check the difference between root and alias directives.
Next, the very last argument of the try_files directive is treated as the new URI to re-evaluate, so you /index.html being treated as the new URI going to be served with the location / { ... }. You should change that directive to
try_files $uri /viewer/index.html;

Nginx serving server and static build

I have one next.js server that is running on port 3000 and I have static build (created with create-react-app), that should be admin panel. So it looks like this
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
root /usr/share/nginx/city-am-club/admin/build/;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location /admin/ {
root /usr/share/nginx/myproject/admin/build;
index index.html index.htm;
try_files $uri /index.html;
default_type "text/html";
}
location / {
rewrite /(.*) /$1 break;
proxy_pass http://127.0.0.1:3000;
}
}
I understand that location should be like this with admni panel, cause location is path after root path.
location / {
root /usr/share/nginx/myproject/admin/build;
index index.html index.htm;
try_files $uri /index.html;
default_type "text/html";
}
Any way, I don't really know how to configure this correct. Right now I cannot get my built files, i tried a lot of different variations of this config. ATM I have a behavior when all my routes location /, even when I try to react /admin it shows me 404 page (custom page of locations / server template).
Try this for your NGINX config.
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
root /usr/share/nginx/city-am-club/admin/build/;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
rewrite /(.*) /$1 break;
proxy_pass http://127.0.0.1:3000;
location /admin/ {
alias /usr/share/nginx/myproject/admin/build;
index index.html index.htm;
try_files $uri /index.html;
default_type "text/html";
}
}
If the admin path is not /usr/share/nginx/myproject/admin/build then change the alias section.

Serving 2 servers on one domain/port pair

I have some static HTML/Javascript/CSS files that I'd like to serve at /.
But I also have a webserver that performs all of my API calls written in Python using Flask and uwsgi.
What I'm trying to do is to have all of my static content be accessible as localhost and my web API be accessible through localhost/api.
This is my default site in sites-enabled:
server {
listen 80;
server_name localhost;
root /var/www;
location /api {
location / {
try_files $uri #app;
}
location #app {
include uwsgi_params;
uwsgi_pass 127.0.0.1:3031;
}
}
}
As you can see I'm serving static content located at /var/www and I'm trying to make all requests to /api to be handled by uwsgi..
Currently when I try this, uwsgi gives me 404 and I think that it is because the uwsgi parameters aren't being passed.
From what I can gather of the documentation (http://flask.pocoo.org/docs/deploying/uwsgi/), the method you choose only works when the app is set to the URL root. I removed the try_files from your /api location as I do not believe it is needed since you are not serving static files from there. You may not need the rewrite either.
server {
listen 80;
server_name localhost;
root /var/www;
location / {
try_files $uri $uri/ =404
}
location = /api { rewrite ^ /api/; }
location /api {
include uwsgi_params;
uwsgi_param SCRIPT_NAME /api;
uwsgi_modifier1 30;
uwsgi_pass 127.0.0.1:3031;
}

Resources