CODEWITHSUNDEEP
reactjsdockernginxconfig
Siyavash Hamdi
Siyavash Hamdi

Reputation: 3087

How to always redirect to index.html in Nginx Docker?

I'm using nginx:1.16.0-alpine image of Docker for serve react app (which is built before) and I want to redirect to index.html page in any cases (in what URL is got)

nginx.conf file has the following content:

user  nginx; worker_processes  auto;

error_log  /var/log/nginx/error.log warn; pid       
/var/run/nginx.pid;

events {
    worker_connections  1024; }

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;

    server {
        location / {
            try_files $uri $uri/ /index.html;
        }

        location ~ ^/$ {
            rewrite  ^.*$  /index.html  last;
        }
    }
}

Actually the server section is added and the other lines are default!

Dockerfile content is as below as well:

FROM nginx:1.16.0-alpine

COPY ./build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

For making sure, after building the container from the image and going to the shell inside that, the file /etc/nginx/nginx.conf has the above content.

But the problem is: When I browse the url http://localhost:3000/login (for example), it doesn't redirect to http://localhost:3000/index.html. It shows:

404 Not Found nginx/1.16.0

(Docker container is run on output port 3000 and local port on 80)

Does anybody know why it is not working!?
(I also searched the similar ways, but no success!)

UPDATED:
The page React-router and nginx doesn't solve the problem.

Upvotes: 4

Views: 7688

Answers (1)

ckaserer
ckaserer

Reputation: 5702

Comment the following line

# include /etc/nginx/conf.d/*.conf;

Why? Due to the line

include /etc/nginx/conf.d/*.conf;

The default.conf is loaded and your server config is ignored.

In addition, you need to include the root information in your server (which previously was provided by default.conf

How to reproduce

put the following 2 files in the same folder and execute

docker build -t test . && docker run --rm -p 8080:80 test

Dockerfile

FROM nginx:1.16.0-alpine

# COPY ./build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

nginx.conf

user nginx; worker_processes auto;

error_log /var/log/nginx/error.log warn; pid
/var/run/nginx.pid;

events { worker_connections 1024; }

http { include /etc/nginx/mime.types; default_type application/octet-stream;

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                  '$status $body_bytes_sent "$http_referer" '
                  '"$http_user_agent" "$http_x_forwarded_for"';

access_log  /var/log/nginx/access.log  main;

sendfile        on;
#tcp_nopush     on;

keepalive_timeout  65;

#gzip  on;

#include /etc/nginx/conf.d/*.conf;

    server {
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location ~ ^/$ {
        rewrite  ^.*$  /index.html  last;
    }
    listen       80;
    server_name  localhost;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
}

Upvotes: 5

Related Questions