How to deploy an Angular application and a REST Api in individual docker containers?

Question

I have a very similar question as this one.

I do have an Angular application that collects data which are then processed via a REST Api. I can happily dockerize both

Answer 1

Your baseURL is hardcoded to localhost. For "global" deployment you would need to change the baseURL to point to the global endpoint of your REST api. That will require you to know the global endpoint and it would need to be static.

Another option would be to set baseURL to /api for prod and configure the angular nginx to proxy /api to your REST api. You would need to link the containers for that to work but wouldn't need to expose the public port on the REST api container, it will only be proxied through nginx.

I use the nginx proxy option for my projects and use docker-compose to handle all linking and inter-container communication stuff.

Example docker-compose.yml and nginx.conf files. This is taken from what I'm currently using, think it should work for you.

docker-compose.yml

version: '3.4'
services:
  nginx:
    container_name: nginx
    image: form_angular
    build:
      context: .
      dockerfile: <path to angular/nginx dockerfile>
    ports:
      - 8088:80
    networks:
      - my-network
  restapi:
    container_name: restapi
    image: form_rest
    build:
      context: .
      dockerfile: <path to rest dockerfile>
    networks:
      - my-network
networks:
  my-network:
    driver: bridge

nginx.conf:

events {
  worker_connections 1024;
}
http {
  upstream api {
    server restapi:3000;
  }
  server {
    server_name nginx;
    root /usr/share/nginx/html;
    index index.html;
    include /etc/nginx/mime.types;
    location /api/ {
      proxy_pass http://api;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-NginX-Proxy true;
      proxy_cache_bypass $http_upgrade;
    }
    location /assets/ {
      access_log off;
      expires 1d;
    }
    location ~ \.(css|js|svg|ico)$ {
      access_log off;
      expires 1d;
    }
    location / {
      try_files $uri /index.html;
    }
  }
}

Answer 2

When you use localhost in a container, it means the container itself, not the host running the container. So if you're pointing to "localhost" from a second container (the UI in your case), that new container will look at itself, and doesn't find the API.

One of the option to solve your problem is to make your containers reachable by name.

The easiest way to do it, in your case, is using docker-compose: eg:

version: '3'
  services:
    angular:
      image: "form_angular:v1"
      container_name: "form_angular"
      ports:
        - "8088:80"
      external_links:
        - restapi

    restapi:
      image: "form_rest:latest"
      container_name: "form_rest"
      ports:
        - "3000:3000"
      external_links:
        - angular

And with that, from the angular you can reach the restapi using the name (as a DNS) restapi, and angular from the restapi.

I suggest you to read more about docker-compose at https://docs.docker.com/compose/

It is very versatile and easy, and you can live with it for a long time, until you decide to build your own cloud ;)