Блог

Я пытаюсь контейнеризировать свой веб-сайт, на котором изначально был проект angular, который выполняет определенные действия, главная страница представляет собой статическую веб-страницу с начальной загрузкой и обратный прокси-сервер Nginx, который направляет запрос в требуемое приложение.
Я пытаюсь переместить три компонента в три разных контейнера docker. Однако контейнер angular не перенаправляется для очень конкретного варианта использования, который мне нужен.

Мой код приведен ниже, кроме того, я использую пустой проект angular для его тестирования, с помощью которого я создал ng new test-project .

docker-compose.yml

 version: "3.4"
services:
  nginx:
    image: nginx
    ports:
      - "80:80"
    volumes:
      - "./config/:/etc/nginx/"

  bootstrap:
    image: bootstrap_image
    ports:
      - "8889:80" # Just for testing

  angular:
    image: angular_image
    ports:
      - "8888:80" # Just for testing
 

Dockerfile для приложения Angular

 ##############
# build dist #
##############
FROM node as build

RUN mkdir -p /app

WORKDIR /app

COPY package.json .
RUN ["npm", "install"]
RUN ["npm", "install", "-g", "@angular/cli"]

COPY . .

RUN ["ng", "build"]


##############
# prod image #
##############
FROM nginx:alpine as prod

COPY --from=build /app/dist/test-project /usr/share/nginx/html

EXPOSE 80
 

Загрузочный образ также использует тот же образ nginx: alpine и просто копирует файлы html в /usr/share/nginx/html

Конфигурация обратного прокси-сервера Nginx

 server {
        listen 80;
        # root /usr/share/nginx/html;
        # index index.html index.htm;

        location /home {
            proxy_pass http://angular:80/;
        }

        location / {
            proxy_pass http://bootstrap:80/;
        }

}
 

В настоящее время конфигурация очень проста. При отладке я обнаружил следующие факты:

1. Когда я меняю местами средство проверки местоположения для двух контейнеров (/ на angular, /home на bootstrap), это работает.
2. Когда я захожу localhost:80/home , он никогда не попадает в угловой контейнер.
3. Когда я меняю службу angular на другой контейнер, основанный на образе начальной загрузки, localhost:80/home он попадает в службу соответствующим образом.
4. Хотя страница angular не загружается, заголовок на вкладке отображается правильно.

Я понятия не имею, что может быть причиной этого, потому что два контейнера определенно работают. Я проверил это, обратившись localhost:8888 к и localhost:8889 . В настоящее время я пришел к выводу, что что-то не так с тем, как angular создает приложение, и, возможно, мне нужно что-то сделать с angular.json файлом, чтобы исправить это. Любая помощь будет оценена!

Спасибо!

Я бы посмотрел, использует ли контейнер Angular перенаправления http или пытается загрузить дополнительные ресурсы по относительному адресу. т. Е. Если angular считает, что это корневой адрес http://angular:80 / и он пытается сообщить клиентам о загрузке http://angular:80/index.html (например), клиенты не смогут это найти. Nginx proxy_pass работает только в одну сторону, есть и другие директивы, которые вам нужно будет добавить: proxy_redirect и (я думаю) proxy_set_header HOST