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

The /resume request shouldn't hit nginx. It should be handled at the client side by angular. Your nginx here should only be used to handle the initial download of your angular app. So I'd focus on your angular settings. Can you post more here. — Bernard
– Bernard, Commented Sep 10, 2016 at 2:14

Nick N. · Accepted Answer · 2020-06-03 15:17:20Z

6

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.

edited Jun 3, 2020 at 15:17

answered Oct 30, 2017 at 8:23

Nick N.

13.7k9 gold badges62 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Olivier D'Ancona Over a year ago

Hi, lately did you remove the include line into /etc/nginx/nginx.conf or did you overwrite the /etc/nginx/conf.d/default.conf? It's not clear what you did. Furthermore does the fast-nginx-default.conf in the dockerfile correspond to the config file you showed here?

Nick N. Over a year ago

I ended up doing the latter. I have overwritten the default conf

Roman Kolesnikov · Accepted Answer · 2016-09-10 06:15:46Z

2

I'm using

try_files $uri $uri/ /index.html =404;

in mine nginx.conf

answered Sep 10, 2016 at 6:15

Roman Kolesnikov

12.2k11 gold badges48 silver badges68 bronze badges

Comments

reyiyo · Accepted Answer · 2017-05-19 13:02:06Z

1

I'm using this in the location section:

try_files $uri$args $uri$args/ $uri/ /index.html =404;

answered May 19, 2017 at 13:02

reyiyo

5935 silver badges7 bronze badges

Collectives™ on Stack Overflow

Deploy Angular2 with Router inside a Docker Container using Nginx

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related