我有一个 UI 应用程序(Angular 应用程序)和一个后端应用程序(Java Spring 引导应用程序)。我想将它们部署在 docker 容器中,并希望将后端和前端应用程序进行通信。没有硬编码 URL 和其他东西,通信所需的一切都应该动态解析。
所以基本上我想要创建的是本地开发环境,它有点类似于生产环境,不是完全相同的复制品,但功能类似于生产环境。
最佳答案
所以我选择的解决这个问题的方式如下所述。 首先,需要了解目录结构。
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 反向代理配置。
设置说明:
- 使用最新代码更新存储库后端和 repos。
- 清理构建您的后端和 UI 应用。
- 如注释中所述,替换 docker-compose.yml 文件中的占位符 [ ... ]。
- 打开docker-compose.yml,每一步我都添加了注释。并提出更改建议。
- 就像我在后端服务中通过 docker-compose 一样,您只需要将应用构建路径映射到
- volume 和 pass build Jar 名称
- 在 UI 应用程序中,只需传递 UI 构建路径。 Angular App "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
关于angular - 如何在 docker env 中使用 nginx 反向代理来通信 UI 和后端应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62246826/