时间戳

首页 > 解决方案 > Docker + nginx + 角度 +Spring Boot

java - Docker + nginx + 角度 +Spring Boot

问题描述

我正在尝试一个使用 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"

标签： javaangulardockernginx

解决方案

在您的 docker-compose 文件中，您有

container_name: demo

但在 nginx 配置中，您使用的是 name backend。您必须demo在 nginx 配置中使用容器名称。服务名称backend只能在 docker-compose 文件中使用。

此外：

警告

--link 标志是 Docker 的遗留功能。它最终可能会被删除。除非您绝对需要继续使用它，否则我们建议您使用用户定义的网络来促进两个容器之间的通信，而不是使用 --link。

用户定义的网络不支持您可以使用 --link 执行的一项功能是在容器之间共享环境变量。但是，您可以使用其他机制（例如卷）以更可控的方式在容器之间共享环境变量。

Docker Composer 文档

推荐阅读