Deploy Angular2 with Router inside a Docker Container using Nginx

Question

I am trying to deploy an Angular 2 that uses the router capabilities of the framework but I am having some issues serving it with nginx inside a docker container.

An angular app built by the angular-cli, has a file structure like this:

./dist
├── 08c42df75dd2c636f46f3c564b3ddaa5.ttf
├── 8eab7754b320d3562a2deff1ca81bb6f.woff2
├── assets
│   ├── fonts
│   │   ├── Avenir_Next_New_Regular.otf
│   │   ├── Avenir_Next_New_Regular.ttf
│   │   └── material.woff2
│   └── img
│       ├── angular-2.svg
├── index.html
├── inline.js
├── main.dc3f8a76e21296ab1f32.bundle.js
├── main.dc3f8a76e21296ab1f32.bundle.js.gz
├── styles.771fbb659c3d6c4edd71.bundle.js
└── styles.771fbb659c3d6c4edd71.bundle.js.gz

I am trying to deploy using the below dockerfile

FROM nginx:1.10-alpine
COPY dist/ /var/www
COPY ng2.conf /etc/nginx/conf.d/default.conf
CMD 'nginx'

The tricky part is how to setup the default.conf file below:

server {
  listen 80;

  root /var/www/;

  // The question is how do I set this location block
  // making sure both angular and the local files are happy?
  location / {
    try_files $uri  /index.html;
  }
}

It all works except the angular routes. Meaning / works but /resume get redirected to /

const appRoutes: Routes = [
    {
    path: '',
    component: DevComponent
  },
    {
    path: 'resume',
    component: ResumeComponent
  }
];

export const router: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Answer 1

I was also using al the above, but still couldn't get it to work. Eventually I found out that there was another include in the nginx.conf file. This include needs to be removed, or the file in the include (default.conf) needs to be overwritten. I ended up doing the latter.

So nginx.conf is not copied any more, and I am using the initial one. This is now my docker file:

FROM nginx
COPY dist /usr/share/nginx/html
COPY fast-nginx-default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

And my default.conf is:

server {
  listen 80;
  sendfile on;
  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  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;
  gzip_comp_level   9;

  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

Further explanation:

This is the default nginx.conf file:

user  nginx;
worker_processes  1;

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

Note this line: include /etc/nginx/conf.d/*.conf; this makes sure the default.conf (with the server tag inside is included in the nginx config. If you have your try_files $uri $uri/ /index.html =404; in your normal nginx.conf and you don't remove or replace this include, then it's still not going to work.

I struggled long on this, so I hope I can help people with this very specific answer.