Routing doesn't work after Dockerizing Angular app

Question

Am new to Angular and Docker. I have developed an Angular 7 application and trying to dockerize it. I did see many tutorials and was able to build the Docker image. Below is my Dockerfile

FROM nginx:1.13.3-alpine
## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*
COPY ./ /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

And i run the docker container using command

docker run -d --name containerName -p 8082:80 imagename

My container did start and after looking in the browser http://IP-address:8082/ I could see index html of my app. Apart from that none other url of my application like the login page (http://IP-address:8082/login) or dashboard (http://IP-address:8082/dashboard) works. I see 404 page not found issue. What else is missing to make sure routing works in my dockerized container?

Below is my default.conf file

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # 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;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

And my docker version is Docker version 17.03.2-ce. Any help appreciated

user_7502260 · Answer

This is happening because the base nginx image will try to serve the requests from the docroot, so it will try to find a login.html when you send a request to /login.

To avoid this, you need nginx to serve the index.html no matter the request, and thus letting angular take care of the routes.

To do so, you will need to change your nginx.conf, which is currently in the image, to include the following :

try_files $uri $uri/ /index.html;

Instead of the default being:

try_files $uri $uri/ =404;

You can do so in many ways, but I guess the best approach is to have an extra command in your Dockerfile, that copies over the nginx configuration like so :

COPY nginx/default.conf /etc/nginx/conf.d/default.conf

And have that nginx/default.conf file in your directory (containing the default nginx configuration) with the command specified above replaced.

EDIT

There is already images that does exactly that, so you can just use an image other than the official one, that is made specifically for that, and it should work fine: example

Routing doesn't work after Dockerizing Angular app

1 Answers