Cannot serve angular app from its container through nginx container

Question

I have a problem showing basic angular page through nginx. We have an angular and a nginx container.

This is nginx.conf

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;

    server {
        server_name angular_test.dev;

        proxy_cache_key $request_method$request_uri;
        proxy_cache_min_uses 1;
        proxy_cache_methods GET;
        proxy_cache_valid 200 1y;

        location /angular {
            proxy_pass https://angular:4200;
            rewrite ^/angular(.*)$ $1 break;
        }
        listen 80;
        listen 443 ssl;
        ssl_certificate /etc/letsencrypt/angular_test.dev.crt;
        ssl_certificate_key /etc/letsencrypt/angular_test.dev.key;      
    }
}

So, I built angular app with docker file like this

FROM node:10.16.0-alpine as node
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
#RUN npm install -g @angular/cli 
COPY . .
RUN npm install
CMD ["npm", "start"]

And this is docker-compose file

version: '3.1'

services:

  angular:
    container_name: angular
    restart: unless-stopped
    build: ./wanderkite
    expose:
      - 4200
    ports:
      - "4200:4200"
  nginx:
    image: nginx
    container_name: nginx
    #restart: unless-stopped
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./nginx/error.log:/etc/nginx/error_log.log
      - ./nginx/cache/:/etc/nginx/cache
      - ./certs/client:/etc/letsencrypt
    ports:
      - 80:80
      - 443:443

I also cant access angular just by typing localhost:4200 in browser. So basically what I want is to server angular app through nginx both on different containers. Am I missing something here? I also checked log from angular container and it is saying that angular live development server is listening on localhost:4200. When I access page on my host machine (angular_test.dev), I get 404.

Answer 1

this isn't how angular is intended to be served / hosted in a production environment, the npm start command is just for development purposes only. The angular build process outputs a set of static files that can be served as a static site by any web server with some minor tweaks... read more here: https://angular.io/guide/deployment

I'm not overly familiar with nginx or docker tbh and have never run a configuration like this. But, my general expectation from past deployments / configurations would be that docker runs the build command like

RUN ng build --prod

and nginx is just configured to serve the outputted index.html on all (non 404) requests to port 80/443, rather than running the angular dev server inside of a docker container with nginx pointed at the dev server.

the specific nginx configuration from the deployment guide is here:

try_files $uri $uri/ /index.html;

Answer 2

I am a kubernetes guy so I am not sure about the syntax of your docker compose file but it looks like you have not exposed the 80 & 443 ports of the nginx container.