Маршрутизация не работает после Dockerizing Angular приложения

Я новичок в Angular и Docker. Я разработал приложение Angular 7 и пытаюсь докеризовать его. Я просмотрел много руководств и смог создать образ Docker. Ниже мой Dockerfile

FROM nginx:1.13.3-alpine
## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*
COPY ./ /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

И я запускаю контейнер докеров с помощью команды

docker run -d --name containerName -p 8082:80 imagename

Мой контейнер запустился, и, посмотрев в браузере http: // IP-адрес: 8082 /, я увидел индексный html моего приложения. Кроме того, ни один другой URL-адрес моего приложения, такой как страница входа (http: // IP-адрес: 8082 / логин) или панель инструментов (http: // IP-адрес: 8082 / панель управления), не работает. Я вижу, что страница 404 не найдена. Чего еще не хватает, чтобы убедиться, что маршрутизация работает в моем dockerized контейнере?

Ниже мой файл default.conf

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

И моя версия докера - это версия Docker 17.03.2-ce. Любая помощь приветствуется

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
4
0
4 575
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это происходит потому, что базовый образ nginx будет пытаться обслуживать запросы от docroot, поэтому он попытается найти login.html, когда вы отправите запрос на /login.

Чтобы этого избежать, вам нужно, чтобы nginx обслуживал index.htmlнезависимо от запроса и, таким образом, позволял angular заботиться о маршрутах.

Для этого вам нужно будет изменить ваш nginx.conf, который в настоящее время находится в образе, чтобы включить в него следующее:

try_files $uri $uri/ /index.html;

Вместо значения по умолчанию:

try_files $uri $uri/ =404;

Вы можете сделать это разными способами, но я думаю, что лучший подход - иметь дополнительную команду в вашем Dockerfile, которая копирует конфигурацию nginx следующим образом:

COPY nginx/default.conf /etc/nginx/conf.d/default.conf

И поместите этот файл nginx/default.conf в свой каталог (содержащий конфигурацию nginx по умолчанию) с замененной командой, указанной выше.

РЕДАКТИРОВАТЬ

Уже есть изображения, которые делают именно это, поэтому вы можете просто использовать изображение, отличное от официального, которое создано специально для этого, и оно должно работать нормально: пример

Я добавил это в Dockerfile «FROM trion / nginx-angular: latest», хотя контейнер запущен, я также не вижу свой index.html. Он говорит, что страница не работает. http 502

RK3 18.12.2018 19:58

Я только что проверил его исходный код, он настраивает nginx для прослушивания на 8080, поэтому он изменен, вы можете либо сопоставить его с 80 на локальном хосте с помощью -p 80:8080, либо просто настроить его, как упоминалось перед редактированием

abdullahkady 18.12.2018 22:01

@ abdullahkady Я отредактировал вопрос с помощью файла default.conf. Я вообще не вижу упомянутой вами части try_files. Где именно мне нужно изменить файл default.conf?

RK3 19.12.2018 01:57

Просто добавьте его под location в качестве третьей строчки.

abdullahkady 19.12.2018 02:47

Другие вопросы по теме