如何在 docker env 中使用 nginx 反向代理通信 UI 和后端应用程序

Posted

技术标签:

【中文标题】如何在 docker env 中使用 nginx 反向代理通信 UI 和后端应用程序【英文标题】:How to communicate UI and backend application using ngnix reverse proxy in docker env 【发布时间】:2020-09-26 12:27:00 【问题描述】:

我有一个 UI 应用程序(Angular 应用程序)和一个后端应用程序(Java Spring boot 应用程序)。我想将它们部署在 docker 容器中,并希望与后端和前端应用程序进行通信。没有硬编码 URL 和其他东西,通信所需的一切都应该动态解决。

所以基本上我想要创建的是本地开发环境,它有点类似于生产环境,不是精确的副本,而是功能类似于生产环境。

【问题讨论】:

【参考方案1】:

所以我选择解决这个问题的方式如下所述。 首先,需要了解dir结构。

E:.
│   .gitattributes
│   docker-compose.yml
│   README.md
│
├───beservice
│       Dockerfile
│
├───nginx
│   └───conf
│           ngnix.conf
│
└───ui-app
        Dockerfile

后端应用程序有自己的 docker 文件,前端应用程序有自己的。一个重要的文件是 Nginx 文件 nginx.conf。

让我们看看文件里面有什么。

└───beservice
        Dockerfile

FROM openjdk:11.0.4-jre
LABEL APP_ID="beservice"
VOLUME /app
EXPOSE 8080
ENTRYPOINT java -Xdebug -Xrunjdwp:transport=dt_socket,address=*:8000,server=y,suspend=n -jar /app/$JAR

└───ui-app
          Dockerfile

FROM nginx
LABEL APP_ID="ui-app"
RUN rm /etc/nginx/conf.d/default.conf
CMD ["nginx", "-g", "daemon off;"]

E:.
└───docker-compose.yml

version: "3"

services:
  beservice:
    build:
      context: ./beservice # beservice1 -> backend Service 1
    image: beservice:latest 
    container_name: beservice
    volumes:
      - [ REPLACE this with Backend Service path ]:/app # Like E:\repos\backend-service\build\libs
    ports:
      - 9002:8080 # App access Port, inside container it is 8080 and mappped with 9002
      - 1111:8000 # to remote debug springboot application
    environment:                                                                      
      JAR : [ jar file name - locate form build path ] # Just Jar Name like module-backend-0.0.1-SNAPSHOT.jar
  uiapp:
    build:
      context: ./ui-app
    image: ui-app:latest
    container_name: ui-app
    volumes:
      - [ path of ui app build ]:/usr/share/nginx/html # We need to Map UI app build path here, Like my angular UI App, E:\repos\ui-app\dist\ui-app 
      - nginx\conf\ngnix.conf:/etc/nginx/conf.d/
    depends_on:
      - beservice
    ports:
      - 80:80

最重要的文件,ngnix.conf

├───nginx
│   └───conf
│           ngnix.conf



server     
    listen 80;  
    server_name host.docker.internal;   

    # By default land on localhost:80 to root so in root we copied UI build to the ngnix html dir.
    # have a look to docker-compose uiapp service.
    location /     
            root   /usr/share/nginx/html;   
            index  index.html index.htm;    
       

   # after location add filter, from which every endpoint starts with or comes in endpoint 
   # so that ngnix can capture the URL and reroute it.
   # like /backend/getUserInfo/<UserId> 
   # In above example /backend is that filter which will be captured by Ngnix and reroute the flow.
    location /backend  
        proxy_set_header X-Forwarded-Host $host;    
        proxy_set_header X-Forwarded-Server $host;  
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        #proxy_pass http://<ContainerName>:<PortNumber>; 
        # In our case Container name is as we setup in docker-compose `beservice` and port 8080
        proxy_pass http://beservice:8080;   
       

带有容器的开发环境

此存储库包含所有必需的文件和配置,可帮助您设置容器化环境,该环境具有不同容器中的 UI 应用程序和不同容器中的后端应用程序。这两个应用程序都使用 Ngnix 服务器进行通信。

Ngnix 反向代理配置详解。

设置说明:

使用最新代码更新存储库后端和存储库。 干净构建您的后端和 UI 应用程序。 替换 docker-compose.yml 文件中的占位符 [ ... ],如 cmets 中所述。 打开 docker-compose.yml,在每一步中我都添加了 cmets。并提出更改建议。 就像我在后端服务中通过 docker-compose 一样,您只需要将应用构建路径映射到 volume 和 pass 构建 Jar 名称 在 UI 应用程序中,只需传递 UI 构建路径。在 Angular 应用程序“E:\repos\ui-app\dist\ui-app”的情况下展示 如何运行:

在当前 Repo/localDevEnv 的根目录中打开 powershell 并运行以下命令

docker-compose -f "docker-compose.yml" up -d --build

命令完成并输出:

Creating beservice ... done
Creating uiapp     ... done 

更多详情请访问:https://github.com/dupinder/NgnixDockerizedDevEnv

【讨论】:

以上是关于如何在 docker env 中使用 nginx 反向代理通信 UI 和后端应用程序的主要内容,如果未能解决你的问题,请参考以下文章

如何在 nginx、passenger 和 redmine 中使用不同的 rails_env

如何从.env文件获取环境变量到docker-compose.yml?

如何持久化docker中的环境变量

使用 Docker 和 PHP 从 env 文件加载环境变量

如何从docker compose文件中访问env变量

Docker-容器介绍与配置镜像分层部署nginx优化镜像