Docker + Nginx +角+ Spring Boot [英] Docker + nginx + angular +Spring Boot

问题描述

我正在尝试使用docker compose，带有Spring Boot后端的简单角度应用程序.但是我的前端在调用时似乎找不到后端api.以下是相关文件.

I am trying a simple angular app with a spring boot backend using docker compose. But my front end cant seem to find the backend api when called. Below are the relevant files.

用于后端的Docker文件

Docker File for Backend

#
# 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文件

Docker File for frontend angular

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 conf文件

NGINX conf file used

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 Compose Yml

Docker Compose 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.

The Front end application comes up but when I hit the backend app (through angular/nginx) it gives a 502 Bad Gateway Error.

我也看到这些打印在docker的NGINX控制台中

Also I see these printed in NGINX console in docker

 [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"

推荐答案

在您的docker-compose文件中

In your docker-compose file you have

container_name: demo

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

but in the nginx configuration you're using the name backend. You have to use the container name demo in the nginx configuration. The service name backend can only be used inside the docker-compose file.

另外:

警告

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

The --link flag is a legacy feature of Docker. It may eventually be removed. Unless you absolutely need to continue using it, we recommend that you use user-defined networks to facilitate communication between two containers instead of using --link.

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

One feature that user-defined networks do not support that you can do with --link is sharing environmental variables between containers. However, you can use other mechanisms such as volumes to share environment variables between containers in a more controlled way.

Docker Composer文档

这篇关于Docker + Nginx +角+ Spring Boot的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！