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?
Related
I am trying to set up a straight-forward scenario. We have a SPA (Angular) app that is built into a subfolder of our nginx container (e.g. /usr/share/nginx/html/foo). When navigating to https://example.com, I want to be redirected to https://example.com/foo. I tried the following config:
user nginx;
worker_processes 1;
events { worker_connections 1024; }
http {
server {
listen 80;
root /usr/share/nginx/html;
include /etc/nginx/mime.types;
index index.html index.htm;
location = / {
rewrite "^$" /foo;
# return 301 ...
}
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
}
}
I have tried alternatives for the second location section, e.g.:
location ~ ^/ui(.*) {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
Redirect works, so https://example.com or https://example.com/foo works. But any deep link will not, e.g. https://example.com/foo/bar/baz. This will return 404 as it's likely not activating Angular.
As a side note, but perhaps important: this is hosted as a container within kubernetes, so I hope it's not the ingress that is blocking here.
With which configuration can I get the deep link to work as expected?
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;
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;
}
I have problem with proxy_pass in nginx. I have one page, for example test.com. In test.com/article I use proxy_pass:
server {
listen 80;
server_name test.pl;
root /var/www/html/test.com;
index index.html;
try_files $uri /index.html;
location /article/ {
proxy_pass https://anotherpage.com/;
}
}
And it's work, but if I have links in page test.com/article, they look like: test.com/some-link
I want it would be: test.com/article/some-link
Any ideas or tips how can I do that?
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;
}