I'm trying to run an angularjs application along with an php application.
I made 2 folders ( client & api ) and I uploaded all my angular app files in client and all my php rest api into "api" directory.
I added into nginx:
location / {
try_files $uri /client/index.html;
}
location /api/ {
try_files $uri $uri/ /api/index.php$args;
}
location /static {
alias /var/www/www.sitename.com/htdocs/client/static/;
}
I'm wondering if is there a more elegant way to make this work, because right now if i want to add an exception to "location /" i need to go and modify nginx again.
Please advise.
Related
Ask a question, deploy React project with nginx, in order to configure the front-end routing of React Router, use $try_files for nginx to locate all routes into index.html, but there is a problem with this configuration,If you want to request other files, such as *.json, *.md, and if I request the json file in the directory, If the json file does not exist, the server will directly return the index.html file instead of returning 404. How to solve it?
location / {
alias /usr/local/var/www/;
index index.html;
try_files $uri index.html;
}
By default it looks like this:
try_files $uri $uri/ =404;
You don't need that index.html in try_files, since you have it as index option value.
The configuration file you have set for NGINX is always going to fall back to index.html, as it will attempt to match try_files in order. What you need to add is =404; or better yet, change:
try_files $uri index.html;
to the implementation found in user973254s answer. Otherwise, NGINX is always going to fall back to index.html.
Please see https://serverfault.com/questions/329592/how-does-try-files-work for a pretty detailed explanation. It directly addresses an instance where you append =404; to the try_files directive.
(Asked To Answer Via Queue)
I am following this tutorial in order to learn how to serve react and flask apps with one single nginx server.
I already reached the point in the tutorial where nginx should be serving the React app, but I still can only see default nginx page.
This is my nginx app configuration file /etc/nginx/sites-available/agroware:
server {
listen 80;
root /home/ubuntu/agroware/frontend/build;
index index.html;
location / {
try_files $uri $uri/ =404;
}
location /api {
include proxy_params;
proxy_pass http://localhost:5000;
}
}
I believe I am following the tutorial, but I cannot see the react app to this point.
I have 2 different React apps using React Router. I have the following structure on my Nginx conf:
# This is to serve main React App
location / {
root /apps/www;
index index.html index.htm;
try_files $uri /index.html;
}
# This is to serve secondary React App
location /report {
root /apps/www/report;
try_files $uri =404;
}
I have put both build files on the corresponding root folder.
However, when I open https://hostname/report, instead of going to the secondary React app, it goes to the main app, handled by its React Router, then redirected to NotFound page.
How to make Nginx location handle the routing to /apps/www/report ?
It seems you are using root directive incorrectly (check the difference between root and alias nginx directives). I think you should use a config like
root /apps/www;
index index.html index.htm;
# This is to serve main React App
location / {
try_files $uri /index.html;
}
# This is to serve secondary React App
location /report {
try_files $uri /report/index.html;
}
You may also need to rebuild your second React app according to your /report prefix since all links to its assets should be generated with this prefix (or they obviously would be served with your first app). Check this article for example.
I have a URL in the form of www.example.com, and am using nginx as the web server. When I go to www.example.com, the site works fine, however whenever I go to www.example.com/anyUri, I receive a 404. Here is the location element in my sites-available file:
location ~*/(.*) {
try_files $uri $uri/ = $404 ;
}
The website is built in React, so there is no real directory, but rather different routes. When I click on a link to navigate to a different route, it loads correctly, but if I try to access that same route directly through the URL, I receive the 404 as well. For example, if from my home page I click "Contact", the URL changes to www.example.com/contact and loads the "Contact" component as desired. If I refresh the page or type in www.example.com/contact manually, I receive the 404. I have my website set up to handle the nonexistent URIs accordingly, and do not need nginx to handle those. Instead, I want nginx to go to www.example.com/anyUri and let the website logic take over from there. I have tried looking up the different patterns online, however none seem to be working as desired.
This nginx.conf file is what I have been using - works like a charm for me.
server {
listen 80 default_server;
listen [::]:80 default_server;
root /your/web/root/path/nginx/html;
index index.html;
location / {
# Adds support for HTML5 history mode
try_files $uri $uri/ /index.html;
# -or-
# try_files $uri /index.html;
}
}
I want to do some A/B testing in a React Web App and decided to duplicate it.
So I'm tring to set one app in the root location (example.com) and the other into a sub-folder (example.com/bversion).
For this, I'm using nginx for serve both versions.
server {
listen 80;
server_name example.com;
root /var/www/html/a_version;
location / {
try_files $uri /index.html;
}
location /bversion {
root /var/www/html/b_version;
try_files $uri /index.html;
}
}
The problem is that Ngnix never resolve /bversion. Always return the root A version of my app.
If I remove try_files in both locations, I lose the possibility to access directly to some specific pages of the application (e.g. example.com/hello or example.com/bversion/hello)