【发布时间】：2021-04-27 19:07:44
【问题描述】：
我正在尝试一个使用 docker compose 的带有 spring boot 后端的简单 angular 应用程序。但是我的前端在调用时似乎找不到后端 api。以下是相关文件。
用于后端的 Docker 文件
#
# Build
#
FROM maven:3.6.0-jdk-11-slim AS build
COPY src /home/app/src
COPY pom.xml /home/app
RUN mvn -f /home/app/pom.xml clean package
#
# Package stage
#
FROM openjdk:11-jre-slim
COPY --from=build /home/app/target/demo-0.0.1-SNAPSHOT.jar /usr/local/lib/demo.jar
EXPOSE 8080
ENTRYPOINT ["java","-jar","/usr/local/lib/demo.jar"]
前端角度的 Docker 文件
FROM node:alpine AS builder
WORKDIR /app
COPY . .
RUN npm install && \
npm run build
FROM nginx:alpine
COPY --from=builder /app/dist/* /usr/share/nginx/html/
COPY /nginx.conf /etc/nginx/conf.d/default.conf
使用的 NGINX 配置文件
server {
include /etc/nginx/extra-conf.d/*.conf;
listen 80;
server_name frontend;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api/ {
proxy_http_version 1.1;
#proxy_pass http://<ContainerName>:<PortNumber>;
# In our case Container name is as we setup in docker-compose `beservice` and port 8080
proxy_pass http://backend:8080/api/;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
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-NginX-Proxy true;
proxy_cache_bypass $http_upgrade;
}
}
Docker 编写 Yml
version: "3.9"
services:
backend:
image: demo
container_name: demo
build:
context: ./demo
ports:
- 8080:8080
frontend:
image: demo-ui
container_name: demo-ui
build:
context: ./my-demo-ui
ports:
- 80:80
depends_on:
- backend
links:
- backend
前端应用程序出现了，但是当我点击后端应用程序（通过 angular/nginx）时，它给出了 502 Bad Gateway Error。
我还看到这些打印在 docker 的 NGINX 控制台中
[error] 30#30: *1 connect() failed (110: Operation timed out) while connecting to upstream, client: 172.18.0.1, server: , request: "GET /api/demoMethod HTTP/1.1", upstream: "http://172.17.0.2:8080/api/demoMethod", host: "localhost", referrer: "http://localhost/home"
【问题讨论】：
-
在 Compose 日志中，当您收到此错误时，
backend容器是否已启动并正在运行？可以直接从主机连接到http://localhost:8080吗？是否有任何代码或配置可以在后端设置网络侦听器？ -
我可以看到后端确实出现了。没有可以在后端设置网络侦听器的特定代码。我也试过 localhost:8080 并且它确实有效。
-
您是否正确设置了 CORS 配置？由于前端和后端运行在不同的端口上，请求默认会被后端阻塞。
-
是的。 Cors 设置正确。
-
请提供minimal reproducible example。重现您的问题以进行分析很有帮助。