Как развернуть приложение Angular и REST Api в отдельных док-контейнерах?

Question

У меня очень похожий вопрос, как этот .

У меня есть приложение Angular, которое собирает данные, которые затем обрабатываются через REST Api.Я могу с радостью докеризировать оба приложения, и они отлично работают локально, однако, когда я пытаюсь развернуть их, чтобы сделать их доступными «везде», я могу добраться только до внешнего интерфейса, но соединение с REST Api не работает.

Внутри моего приложения Angular у меня есть файл baseurl.ts.Это просто содержит:

export const baseURL = 'http://localhost:3000/';

Я готовлю производство приложения, используя:

ng build --prod

, который создает папку dist, а затем следующий док-контейнер (взятый из здесь):

FROM node:alpine AS builder

ARG PROXY=http://myproxy
ARG NOPROXY=localhost,127.0.0.1

ENV http_proxy=${PROXY}
ENV https_proxy=${PROXY}
ENV NO_PROXY=${NOPROXY}
ENV no_proxy=${NOPROXY}

WORKDIR /app

COPY . .

RUN npm install && \
    npm run build

FROM nginx:alpine

COPY --from=builder /app/dist/* /usr/share/nginx/html/

Я создаю контейнер, используя

docker build -t form_angular:v1

и запускаю его, используя

docker run -d -p8088:80 form_angular:v1

Второй Dockerfile для REST Apiвыглядит так:

FROM continuumio/miniconda3

ARG PROXY=http://myproxy
ARG NOPROXY=localhost,127.0.0.1

ENV http_proxy=${PROXY}
ENV https_proxy=${PROXY}
ENV NO_PROXY=${NOPROXY}
ENV no_proxy=${NOPROXY} 

COPY my_environment.yml my_environment.yml
SHELL ["/bin/bash", "-c"] 

RUN echo "Using proxy $PROXY" \
    && touch /etc/apt/apt.conf \
    && echo "Acquire::http::Proxy \"$PROXY\";" >> /etc/apt/apt.conf \
    && cat /etc/apt/apt.conf \
    && apt-get -q -y update \
    && DEBIAN_FRONTEND=noninteractive apt-get -q -y upgrade \
    && apt-get -q -y install \
       build-essential \        
    && apt-get -q clean \
    && rm -rf /var/lib/apt/lists/*

RUN ["conda", "env", "create", "-f", "my_environment.yml"]
COPY user_feedback.py user_feedback.py
CMD source activate my_environment; gunicorn -b 0.0.0.0:3000 user_feedback:app

Здание:

docker build -t form_rest:latest .

Запуск:

docker run --name form_rest -d -p 3000:3000

Как я уже сказал, все работает, как и ожидалось, при работе на localhost.Как мне теперь заставить эти два контейнера общаться между собой для «глобального» развертывания?

Answer 1

Когда вы используете localhost в контейнере, это означает сам контейнер, а не хост, на котором выполняется контейнер.Поэтому, если вы указываете на «localhost» из второго контейнера (пользовательский интерфейс в вашем случае), этот новый контейнер будет смотреть на себя и не найдет API.

Один из вариантов решенияВаша проблема в том, чтобы сделать ваши контейнеры доступными по имени.

Самый простой способ сделать это, в вашем случае, использовать docker-compose: например:

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

И с этим, изУгловой вы можете добраться до Restapi, используя имя (в качестве DNS) restapi и angular от Restapi.

Я предлагаю вам прочитать больше о docker-compose на https://docs.docker.com/compose/

Он очень универсален и прост, и вы можете жить с ним долгое время, пока не решите создать собственное облако;)

Answer 2

Ваш baseURL жестко запрограммирован на localhost.Для «глобального» развертывания вам нужно изменить baseURL, чтобы он указывал на глобальную конечную точку вашего REST API.Для этого вам потребуется знать глобальную конечную точку, и она должна быть статической.

Другой вариант - установить baseURL в / api для prod и настроить угловой nginx на proxy / api для вашего REST api.Вам нужно будет связать контейнеры, чтобы это работало, но не нужно открывать публичный порт в контейнере API REST, он будет проксироваться только через nginx.

Я использую опцию прокси nginx для своих проектови используйте docker-compose для обработки всего связующего и межконтейнерного взаимодействия.

Пример файлов docker-compose.yml и nginx.conf.Это взято из того, что я сейчас использую, думаю, это должно работать для вас.

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