具有Nginx和Angular的Docker容器以及具有Asp.net核心的其他容器无法通过nginx工作获得rever代理 [英] Docker container with Nginx and Angular and other container with Asp.net core cannot get the rever proxy via nginx working

查看:94
本文介绍了具有Nginx和Angular的Docker容器以及具有Asp.net核心的其他容器无法通过nginx工作获得rever代理的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在构建两个容器,其中一个容器运行.net核心api,另一个容器运行nginx和angular应用程序.如果这种方法不合适,很高兴收到反馈.

I am building two conatiners with one container having the .net core api running and another with nginx and angular application running. Happy to receive feedback if this approach is not a right one.

Angular正在使用localhost:4000/api的uri来调用api.

Angular is using uri of localhost:4000/api to invoke the api.

Nginx正在侦听端口4000,并将它们代理到正在侦听API的端口5000.

Nginx is listening on port 4000 and proxies them to port 5000 where the API is listening.

我可以启动并运行我的两个docker服务noticeapi和reverseproxywithui.但是,当我浏览ui并单击调用api的UI上的搜索按钮时,我收到api调用的连接被拒绝错误,这意味着nginx拒绝了对api的调用.

I can get my two docker services both noticeapi and the reverseproxywithui up and running. But when I browse the ui and click the search button on the UI which invokes the api, i get connection refused error for the api invocation, which means nginx is rejecting the calls to the api.

这是我的docker-compose.yml

Here is my docker-compose.yml

version: '3.4'

networks:
  corp:
    driver: bridge

services:

  reverseproxyandui:
    image: ${DOCKER_REGISTRY-}reverseproxyandui
    build:
     context: ./notice-ui-app
     dockerfile: ui.prod.dockerfile
    container_name: reverseproxyandui
    networks:
      - corp

    ports:
      - "80:80"
    restart: always
    depends_on :
      - noticeservice

  noticeservice:

    image: ${DOCKER_REGISTRY-}noticeservice
    build:
      context: .\noticeService
      dockerfile: noticeService/Dockerfile
    container_name: noticeservice
    networks:
      - corp
    ports:
      - "5000:5000"
    restart: always

我的api的docker文件如下

My docker file for the api is as follows

FROM mcr.microsoft.com/dotnet/core/aspnet:2.2-stretch-slim AS base
WORKDIR /app

EXPOSE 1433
EXPOSE 5000

FROM mcr.microsoft.com/dotnet/core/sdk:2.2-stretch AS build
WORKDIR /src
COPY ["NotificationService/NotificationService.csproj", "NoticeService/"]
RUN dotnet restore "NoticeService/NoticeService.csproj"
COPY . .
WORKDIR "/src/NoticeService"
RUN dotnet build "NoticeService.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "NoticeService.csproj" -c Release -o /app/publish



FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .

ENV ASPNETCORE_ENVIRONMENT=Development
ENV ASPNETCORE_URLS=http://*:5000


ENTRYPOINT ["dotnet", "NoticeService.dll"]

我的角度UI的docker文件如下:

The docker file for my angular UI is as follows:

###Stage 1
FROM node as node
WORKDIR /webclientapp
COPY package.json package.json
RUN npm install

#Angular CLI
RUN npm install -g @angular/cli@8.3.3

COPY . .

RUN npm run build -- --prod

FROM nginx:alpine

## Remove default Nginx website
RUN rm -rf /usr/share/nginx/html/*

VOLUME /var/cache/nginx
COPY --from=node /webclientapp/dist/Notice-ui-app /usr/share/nginx/html
COPY ./config/nginx.conf /etc/nginx/nginx.conf


CMD ["nginx", "-g", "daemon off;"]

最后一个文件是nginx配置,如下所示:

And the final file which is the nginx config as follows:

worker_processes auto;

events { worker_connections 1024; }

http {

    sendfile on;

    upstream noticeservice {
        server noticeservice:5000;
    }

    server {
        listen 80;
        listen 4000;
        server_name  localhost;

        gzip                    on;
        gzip_comp_level         6;
        gzip_vary               on;
        gzip_min_length         1000;
        gzip_proxied            any;
        gzip_types              text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_buffers            16 8k;
        client_max_body_size    256M;

        root /usr/share/nginx/html;

        index  index.html index.htm;
        include /etc/nginx/mime.types;
        default_type application/octet-stream;


        location / {
            try_files $uri $uri/ /index.html =404;
        }

         location /api {
            proxy_pass         http://localhost:5000;
            proxy_redirect     off; 
            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-Forwarded-Proto $scheme;
            proxy_set_header   X-Forwarded-Host $server_name;


        }
    }


}

感谢您的帮助.

推荐答案

问题出在Nginx配置上.

The issue is with the Nginx config.

在以下链接上找到答案

当此任务托管在AWS Fargate任务中时,我们需要将'upstream app_servers'的值更改为'127.0.0.1:5000'.因为当Fargate任务在Awsvpc联网模式(默认)下运行时,它将使用本地环回接口127.0.01,以连接到定义为Fargate任务一部分的其他容器(服务),这将在后面的部分中进行介绍."

"When this is hosted in AWS Fargate task, we need change the value of 'upstream app_servers' to '127.0.0.1:5000'. Because when the Fargate task runs in Awsvpc networking mode (which is default) it will use the local loopback interface of 127.0.01 to connect to the other container (service) defined as a part of the Fargate task which will be covered in the later sections."

因此,我的Ngnix配置对于开发人员和产品而言是不同的.

So my Ngnix config is now different for dev and Prod.

在Prod中,我具有更新代理通行证,以在本地开发机器上运行时使用127.0.0.1:5000的本地回送地址并使用服务名称.

In Prod I have update proxy pass to use local loop back address of 127.0.0.1:5000 and use service name when running on my dev machine.

这篇关于具有Nginx和Angular的Docker容器以及具有Asp.net核心的其他容器无法通过nginx工作获得rever代理的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆