Docker Nginx Angular2/Angular routes

Here is my nginx sites-available/myapp

server {    listen 80;    listen 80 [::]:80;    root /my/root/path;    server_name www.mysite.com mysite.com;    location /app1/ {        alias /my/root/path/app1/;        try_files $uri$args $uri$args/ $uri/ /app1/index.html;    }    location /app2/ {         ...    }    }

After setting up the config you want to make your site enabled, run:

sudo ln -s /pathtonginx/sites-available/myapp /pathtonginx/sites-enabled/myapp

The basehref on my index.html

<base href="./">

Hope this helps!

The nginx Docker image includes a base configuration file, /etc/nginx/nginx.conf. This configuration file sets up various items to values that the image maintainers (presumably) know to be good values for a Docker container, so it is tempting to make use of that configuration file as much as possible when serving Angular. Anticipating that users might want to do that, the base configuration file includes the directive

http {...    include /etc/nginx/conf.d/*.conf;}

so, you can put your Angular specific configuration in a file /etc/nginx/conf.d/ng.conf, and get the benefit of using the base configuration file.

That file can be nice and simple. As recommended by the Angular documentation and the Nginx documentation, it just uses the try_files directive to serve your index.html for all deep-link paths:

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

and your Dockerfile just needs to copy that file from the build context into the Docker image:

COPY src/etc/nginx/conf.d/ng.conf /etc/nginx/conf.d/

I did that, but it didn't work, because there is also one snag.The nginx Docker image also includes a file /etc/nginx/conf.d/default.conf. That file is suitable for serving static content (from /usr/share/nginx/html), and if Nginx uses that configuration in preference to your configuration (which can happen), your try_files will be useless. Your Dockerfile should therefore also remove that default configuration:

RUN rm /etc/nginx/conf.d/default.conf

You need to configure your docker file like the following;

FROM nginx:1.17.8-alpineCOPY nginx.conf /etc/nginx/conf.d/nginx.confWORKDIR /usr/share/nginx/html/COPY dist/mooveinn .RUN rm /etc/nginx/conf.d/default.conf

One important thing is to remove the default nginx conf file.

Then your nginx file will be similar to this one;

server {    listen 80;    server_name localhost;    #sending logs to console(standard out) in a predefined json fromat    #access_log / dev / stdout json_combined;    #error_log / dev / stdout info json_combined;    root / usr / share / nginx / html;    index index.html index.htm;    include / etc / nginx / mime.types;    # compression    gzip on;    gzip_min_length 1000;    gzip_proxied expired no - cache no - store private auth;    gzip_types text / plain text / css application / json application / javascript application / x - javascript text / xml application / xml application / xml + rss text / javascript;    # angular index.html location    location / {        try_files $uri $uri / /index.html;    }    # potential reverse proxy    for sending api calls    location / reverse - proxy / {        proxy_set_header Host $host;        proxy_set_header Content - Type application / json;        proxy_set_header X - Real - IP $remote_addr;        # proxy_pass http: //pointer-api:8080/;    }}

Build the docker image again, and run the application.