We Keep Coding

Return 404 for invalid routes via nginx

I am using nginx with react.
My nginx.conf file
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
As per this config nginx is serving 200 for all routes..
Suppose my routes are
example.com/login
example.com/landing
Now suppose someone enter wrong url
example.com/test
In that case i want to throw 404 without landing to application at nginx level itself. Is this possible to handle routing at nginx level and send 404 despite of 200 and than handling at react level.
I found that to restrict any particular route at nginx level we can do it using below code
location ^~ /test/ {
return 404
}
But i want to restrict all routes which are invalid for that i used
# return 404 for all routes
location / {
return 404;
}
# define each possible route like this
location /login {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /landing {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
But after this my application is not loading getting 503 Service Temporarily Unavailable
First question is it really possible to achieve routing at nginx level if yes what approach i need to take any clue or reference will be of great help.
Thanks in advance
EDIT
Please find docker file
# Base Image
FROM node:10-alpine AS base
MAINTAINER test#test.com
RUN mkdir -p /usr/src/app
COPY . /usr/src/app
# Dependencies
FROM base as build
WORKDIR "/usr/src/app"
RUN npm install
RUN npm run test
RUN npm run build
# Web Server
FROM nginx:alpine
EXPOSE 80
COPY --from=build /usr/src/app/build /usr/share/nginx/html
COPY --from=build /usr/src/app/nginx.conf /etc/nginx/conf.d/default.conf

Yes, nginx can be used for this.
COPY --from=build /usr/src/app/nginx.conf /etc/nginx/nginx.conf
Just use this one.

compress.js made the CACHE directoly under uwsgi not nginx

I am using Django Compressor on nginx & uwsgi
I have each docker container for nginx & uwsgi
I copied static folder to nginx:/static and others to uwsgi:/myapp/ in advance.
However compress.js made the compress file dynamically and set under uwsgi:myapp/static/CACHE of uwsgi container.
<script src="/static/CACHE/js/output.b6723c2174c0.js">
So consequently 404 not found for this file, because this request is redirect to nginx:/static not uwsgi:/myapp/static
How anyone solves this problem?
my nginx setting is below
server {
listen 8000;
server_name 127.0.0.1;
charset utf-8;
location /static {
alias /static;
}
location / {
auth_basic "Restricted";
auth_basic_user_file /etc/nginx/.htpasswd;
proxy_pass http://uwsgi:8001/;
include /etc/nginx/uwsgi_params;
}
}

It's about troubleshooting. There can be different issues.
Similar reported here django-compressor and nginx: 404 with compressed files
Having same issue I found that in settings.py the COMPRESS_ROOT was defined to the path which is not specified in the Nginx configuration.
Removing COMPRESS_ROOT fixed it. Refer to: Django Compressor Quickstart

Deploying React js build directory in nginx using kubernetes

Deploy React js(build directory) static files in Nginx server.
Using kubernetes, i am running the nginx server to serve the React js "build" directory for static files. I could access the simple index.html in the browser. But not the index.html with react js code. The root directory has the index.html file, static directory and other files in it. Directory structure is copied to this path.
nginx.conf is like below
events {
worker_connections 1024;
}
http {
server {
listen 80;
root /usr/share/nginx/html;
#index index.html;
location / {
index index.html;
try_files $uri $uri/index.html /index.html;
}
location /static/ {
autoindex on;
root /usr/share/nginx/html/static/;
}
}
}
In the browser, index.html is not loaded, but in source (right-click in the browser > select source), the index.html code is available. formatted index.html file copied from source in the browser is at this path. I am predicting that javascript(css,js) code is not executed or having issues loading in the browser. Otherwise, there is a problem with the nginx configuration to load the javascript files.
how to properly configure nginx to deploy Reactjs build directory files?

try_files does not tell nginx to serve the static file. Reaching the closing brace in the absence of any other operation causes it to serve the static file. try_files tests for the existence of the file in the local file system and may rewrite the URL.
You have syntax errors in your file i.a white spaces.
Remember to create service for nginx - type LoadBalancer and refer to it in deployment configuration file. You have to add your server if there are several servers that match the IP address and port of the request.
Here is example how you should execute this process. Make sure you followed every step from tutorial: nginx-configuration - there is example of exercise on PHP application but there are the same steps to reproduce with ReactJS app.
Your conf file should looks like this:
events {
worker_connections 1024;
}
http {
server {
listen 80;
root /usr/share/nginx/html;
index index.html index.htm;
server_name your_server_name_or_IP
location / {
try_files $uri $uri/index.html /index.html;
}
location /static/ {
autoindex on;
root /usr/share/nginx/html/static/;
}
}
}

The below code that works for me.
server {
listen 80;
root /usr/share/nginx/html;
index index.html index.htm;
server_name xyz.application.com;
server_name localhost;
location / {
ssi on;
set $inc $request_uri;
if (!-f $request_filename) {
rewrite ^ /index.html last;
}
index index.html;
try_files $uri $uri/index.html /index.html =404;
}
Setting the rewrite redirects to index.html page. I am not sure about the impact of ssi, set $inc $request_uri in the code.

NGINX is not loading my application even i mentioned the root

here is my chat application present in C:\chat1 which contains index.html and index.js files
here is the path i am setting like this in config file of NGINX.
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root C:/chat1/;
index index.html index.htm;
}
i changed forward slashes and backword slashes and changed to other application stil it is not loading instead it is show as welcome page as below
Welcome to nginx!
If you see this page, the nginx web server is successfully installed and working. Further configuration is required.
For online documentation and support please refer to nginx.org.
Commercial support is available at nginx.com.
Thank you for using nginx.
can anyone please help me on this issue.. Thanks in advance.

You issue is that you are loading the default nginx config also. In case of multiple server blocks, the one that came first answers the request. In your case it is default nginx config block which is answer. So simple fix you can try is add default_server.
server {
listen 80 default_server;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root C:/chat1/;
index index.html index.htm;
}
If that doesn't help then you need delete the config of default server. You can see what config your nginx is actually loading by running nginx -T

How to redirect all Angular request to index.html in Nginx

I have create a simple Nginx config file to server an Angular like so:
server {
listen 80;
listen [::]:80;
root /path/to/apps/myapp/current/dist;
access_log /path/to/apps/myapp/current/log/nginx.access.log;
error_log /path/to/apps/myapp/current/log/nginx.error.log info;
index index.html;
location ^~ /assets/ {
gzip_static on;
expires max;
add_header Cache-Control public;
}
location / {
try_files $uri $uri/ =404;
}
}
And all works fine as expected. because I'm using Angular UI Router, I'd like to forward all pages to index.html so Angular will take over (so a request to example.com/users/new will be redirect by Nginx to index.html, for Angular UI to handle it) for pages reloads, links, etc.
How can I achieve this?
I've playing around with options like:
server {
#implemented by default, change if you need different ip or port
#listen *:80 | *:8000;
server_name test.com;
return 301 $scheme://www.test.com$request_uri;
}
As specified in this answer. But I couldn't anything similar to work based on all requests.
Suggestions will be much appreciated.

You've nearly got it. try_files is the correct one to use, as Richard shows, you just needed to add your index.html in the list. However, there is no need to remove the =404 from the end, in fact, its better not to.
location / {
try_files $uri $uri/ /index.html =404;
}
Once the above change is implemented, reload the config with sudo nginx -s reload
$uri will try the request as a file, if this fails, it moves to the
next one.
$uri/ will try the request as a folder /index.html will
then be tried, which sends all requests to your index.html where your
angular app will be able to route things (also make sure you use
html5mode to avoid the use of # in the url.
=404 will be your final fallback, basically saying: I've tried this as a file, folder, and via index.html. If index.html fails/does not
exist for whatever reason, we will serve a 404 error.
Why =404?
If all goes well, the last one is never used, and routing will just try file, folder, angular app. And that would be it. But I see it as good practice to have the =404 on the end to cover all bases.
Important note about index.html catchall
Regardless of whether or not you use the =404 in try_files, by directing everything to index.html, you basically lose the ability to serve 404 errors from your webserver, unless index.html does not exist (which is where =404 comes in). This means that you will need to handle 'Not Found' urls and missing pages within Angular JS, and you need to be ok with the fact that the error page you use will return a HTTP 200 response, rather than 404. (This is because the moment you direct to the index.html, you've served a page to the user, thus 200).
For added reassurance on the above, google try_files angular js and you will find most examples incorporate =404.
References:
http://nginx.org/en/docs/beginners_guide.html#control
http://ajbogh.blogspot.ca/2015/05/setting-up-angularjs-html5-mode-in.html (just one example)

You need to add the router to the end of your try_files directive, like this:
location / {
try_files $uri $uri/ /index.html;
}
See this document for more.

location / {
try_files $uri$args $uri$args/ index.html;
}
This worked for me