Nginx для Angular не задействует внутренний API
Я использую nginx для реверса URL-адресов прокси-сервера, идущих на внутренний сервер.
Вот мой угловой файл докера:
FROM node as node
# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app/package.json
RUN npm install
COPY . /usr/src/app
ARG env=prod
RUN npm run build -- --prod
FROM nginx
COPY --from=node /usr/src/app/dist/ /usr/share/nginx/html
COPY nginx-custom.conf /etc/nginx/conf.d/default.conf
Моя конфигурация nginx
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html/sampleangularapp;
location / {
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api/products {
proxy_pass http://backend:80;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
}
}
Составление докера:
version: '3'
services:
backend:
image: backend:v2
container_name: backend
build:
context: BackEndAPIs
ports:
- 9000:80
frontend:
image: frontend:v2
container_name: frontend
build:
context: sampleangularapp
ports:
- 4200:80
depends_on:
- backend
Когда я нажимаю кнопку, которая вызывает API/продукты через код:
return this.http.get<string[]>('api/products');
Вот что я получаю:
Я дважды проверил API и работает нормально:
@JohnVelasquez URL правильный. Я обновил вопрос, включив в него базовый путь API.
ваш API на порту 8080, верно?
@JohnVelasquez Я также пробовал другой порт 9000 для серверной части. но все равно возникает та же проблема.
Ответы 1
Основная причина: внутренний URL-адрес «http://локальный:8080» не будет работать внутри контейнера приложения angular, поскольку он разрешается в IP-адрес контейнера.
Вам нужно убедиться, что вы используете сеть докеров, чтобы связать два контейнера с одной и той же сетью и подключиться, используя имя службы или IP-адрес контейнера внутреннего приложения.
вы можете использовать docker-compose в этом случае.
Образец здесь:
version: '3'
services:
backend:
image: backend
ports:
- "9000:9000"
frontend:
image: frontend
ports:
- "4200:80"
depends_on:
- backend
Я также ответил на аналогичный вопрос здесь: Проблема с серверной частью Nginx
Я ценю вашу помощь. Я изменил внутренний порт на 9000, используя docker compose. У меня все еще та же проблема. Я предполагаю, что что-то не так с тем, что я делаю, и не знаю, что это такое.
Пожалуйста, обратитесь к этой строке в nginx conf proxy_pass http://localhost:9000/api/products; и сравните с моей конфигурацией. Пожалуйста, следуйте рекомендациям при именовании служб в файле компоновки докеров, используйте back_end или backend, а не back.end.
Та же проблема :(. Кажется, есть проблема с тем, что nginx не выбирает маршрут.
Обновите конфигурацию nginx с помощью серверная часть: 9000. Во-вторых, добавление зависит от внешнего интерфейса, чтобы внешний интерфейс не запускался до запуска внутреннего интерфейса.
Обновлено в соответствии с вашими комментариями, все та же проблема.
Вы тестировали бэкэнд API в одиночку, используя порт 9000, работает ли он, можете ли вы подтвердить? поделитесь своим кодом на github, чтобы помочь
Да, работает нормально. проверьте картинку во вкладке сети браузера. он по-прежнему указывает на http\\:localhost\api\prodcuts. так же добавил картинку что апи работает
Давайте продолжить обсуждение в чате.
Хорошо, проблема здесь в изменении конфигурации nginx с proxy_pass серверная часть: 9000/api/продукты; на proxy_pass серверная часть: 9000;
ваш API base_url неверен, проверьте базовый путь http ресурсов API