so I'm building a react site using browserHistory, my current Nginx setup serves index.html for all URLs, however I have split out my admin part of the site so I need any url under /admin to server admin.html but I can;t figure it out (not a server guy!).
This is my current config, any help would be greatly appreciated!
server {
listen 80;
server_name http://178.62.98.191/;
root /www/rawnet-one-web/dist;
index index.html index.htm;
rewrite ^/(.*)/$ $1 permanent;
location / {
auth_basic "Restricted";
auth_basic_user_file /www/.htpasswd;
try_files $uri /index.html;
}
}
Based on the examples in the location documentation, you should just have to define the /admin/ location and serve the /admin.html file for any location that matches it.
location /admin/ {
try_files $uri $uri/ /admin.html
}
If you want /admin to not have a trailing slash, you will need to hard code that location.
location = /admin {
try_files /admin.html
}
Related
I have a website (let's say www.example.com) with an input parameter to type 6 character code to join a socket.io room. If you to go www.example.com, it will show you the empty input but if you go to www.example.com/ABCDEF it will automatically pre-fill the input with the code 'ABCDEF'. The rooms codes are all like [a-zA-Z]{6}.
I have difficulty to configure correctly my nginx reverse proxy, It works fine when you go to www.example.com but I have a 404 error when I go to www.example.com/ABCDEF.
Here is my nginx config :
server {
root /var/www/example.com/html;
index index.html index.htm index.nginx-debian.html;
server_name example.com www.example.com;
location / {
try_files $uri $uri/ =404;
}
}
I also tried this :
location ~* "/[a-zA-Z]{6}" {
try_files $uri $uri/ =404;
}
What I'm trying to achieve is to have a project use the subdomain as part of the request path for react SPA.
e.g. qem.xxx.com -> xxx.com/qem for a SPA where the file path doesn't change with the request.
I've been messing about for a while with rewrites but haven't been able to achieve it. Most of the resources seem to deal with the opposite, or with non-SPAs where the file path matches.
Here's the latest conf:
server {
listen ${NGINX_PORT};
server_name ${NGINX_HOST}
charset utf-8;
client_max_body_size 20M;
# what file to server as index
root /src/build;
index index.html index.htm;
error_page 503 #maintenance;
location #maintenance {
root /src;
rewrite ^(.*)$ /deploy/maintenance.html break;
}
location / {
# First attempt to serve request as file, then
# as directory, then fall back to redirecting to index.html
if (-f /src/maintenance.txt) {
return 503;
}
try_files $uri $uri/ #qem /index.html;
}
location #qem {
rewrite ^ /qem/$request_uri?;
try_files $uri $uri/ /index.html;
}
}
EDIT: Further details as requested:
NGINX_HOST=qem.xxx.com
Only one SPA application, so only one index.html in folder root
Have static resources that $uri and $uri/ match, all site content is served by index.html
Trying to achieve access to qem.xxx.com to serve as if the user accessed xxx.com/qem/ (i.e. this subdomain serves that part of SPA)
Currently semi-works in that it serves a blank page (200s).
Even just a general steer in the correct direction would be great!
Cheers,
Carl
I want to host a demo app on a subroute of my domain. When I place the app in the root of the domain and use the following configuration, it works:
server {
server_name domain.com www.domain.com;
root /var/www/my-app/build;
index index.html index.htm;
location / {
try_files $uri /index.html =404;
}
}
But when i move it to a subroute using the following configuration, it correctly fetches the initial index.html but then routes the static file requests (for css, js, images...) to index.html as well.
server {
listen 80;
server_name domain.com www.domain.com;
location / {
}
location /demo-apps/my-app{
root /var/www/my-app/build;
try_files $uri /index.html =404;
}
}
And I don't understand why. Here's a screen capture of the request which succeeds but returns the index.html file instad of the js file:
And here's the folder structure on the server:
As I understand it, the request from the first screen capture should match the $uri condition in the second location block and return the corresponding js file but, clearly, I'm wrong. What do I need to change for this to work?
Before anyone asks, yes, I did restart nginx.
The path to the file is constructed by concatenating the value of root with the value of $uri. So a request for /demo-apps/my-app/css/foo.css will be looked for at /var/www/my-app/build/demo-apps/my-app/css/foo.css, which is the wrong place.
You can use alias instead (see this document), for example:
location /demo-apps/my-app {
alias /var/www/my-app/build;
try_files $uri /demo-apps/my-app/index.html;
}
However, using alias and try_files together can be problematic. See this long term issue.
Or use a regular expression location (see this dcoument) to extract the latter part of the URI, for example:
location ~ ^/demo-apps/my-app(/.*)?$ {
root /var/www/my-app/build;
try_files $1 /index.html =404;
}
I'm using the create-react app template with react router and I want to deploy my app on a subfolder using nginx.
My nginx.conf file looks like this. (I'm using the nginx-alpine docker image)
events { }
http {
server {
listen 80;
# You would want to make a separate file with its own server block for each virtual domain
#access_log logs/host.access.log main;
location /procejts/myproject/ {
root /usr/share/nginx/html;
try_files $uri $uri/ /procejts/myproject/index.html;
}
}
}
However I'm getting an empty page when I go to mydomain.com/procejts/myproject
I have tried the answer here but it is giving me a 500 error “rewrite or internal redirection cycle”. I changed the
try_files $uri $uri/ /procejts/myproject/index.html;
To
try_files $uri $uri/ =404;
and I start to get 404 not found.
I'm serving multiple react apps from the same server block in Nginx.I'm forwarding these routes from nginx to each react app's index.html, I've added a try_files to each location:
My nginx configuration :
server {
listen 80;
location /nest/ {
alias /Users/harikrishnan/turbolab/nest-ui/build;
try_files $uri /index.html;
}
location /nest/dataviewer/ {
alias /Users/harikrishnan/turbolab/dataviewer/dataviewer/build;
try_files $uri /index.html;
}
}
The problem is that when I browse to /nest/dataviewer it redirects to the /nest/. That's obviously not what is expected, since I want to have each location to forward to the index.html of the adequate project.
The regular expression (^nest/dataviewer) does not match the URI that begins with /nest/dataviewer. You are missing the leading /.
The location ~* { statement is missing any regular expression, I am surprised that nginx accepts it.
In this case, you should be using the prefix location, which is more efficient. See this document for details.
For example:
location /nest/dataviewer { ... }
location / { ... }