Dockerizing通过Nginx和Spring进行反应，通过web浏览器访问两者

我的应用程序包含两个组件：

• 在Nginx上工作的前端
• 弹簧后端

两者都已停靠，并且位于同一停靠网络中。
Spring应用程序提供用于前端的API。
前端在端口80上可用 我想配置前端和后端Docker容器，以便能够从“外部”用户角度显示数据。这意味着前端应该能够从后端获取JSON数据并将其显示给用户

我从基本场景开始，前面是Spring应用程序的URL:
当然，从Web浏览器的角度来看，不可能通过这样的地址获得人员列表。容器backendcontainer仅可从Docker网络获得

下一步是通过添加反向代理扩展Nginx配置：

location /people {
    root /usr/share/nginx/html;
    proxy_pass http://backendcontainer:8080;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
}

此外，前端中后端URL的完整地址已替换为相对“/人”

通话后，请立即向前走
我得到502坏网关。 我做错了什么

完整nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        location /people {
            root /usr/share/nginx/html;
            proxy_pass http://backendcontainer:8080;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_redirect off;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

Dockerfile：

### STAGE 1: Build ###
FROM node:11-alpine as build
RUN mkdir /app
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
ENV NPM_CONFIG_LOGLEVEL warn
COPY package.json /app/package.json
RUN npm config set unsafe-perm true
RUN npm install --silent
RUN npm install react-scripts -g --silent
COPY . /app
RUN npm run build

### STAGE 2: Production Environment ###
FROM nginx:1.14-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /data/conf/nginx.conf
EXPOSE 80
CMD ["nginx", "-c", "/data/conf/nginx.conf", "-g", "daemon off;"]

编辑：

我终于明白了。我换了

location /people {
    root /usr/share/nginx/html;
    proxy_pass http://backendcontainer:8080;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
}

与：

它开始工作了。但是，不确定代码片段的哪一部分是问题的根源

：使用docker链接将后端容器链接到前端应用程序容器

nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    server {
        listen 8080;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location / {
            try_files $uri $uri/ /index.html;
        }

        location /people {
            proxy_pass http://backend:8080;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_redirect off;
        }
    }
}

Docker命令：

$ docker run -p 9000:8080 --name frontent --link backend  reactapp

37.36"
172.17.0.1 - - [01/Feb/2019:17:21:20 +0000] "GET /main.9712d6edfd3728dcfc56.bundle.js HTTP/1.1" 200 59020 "http://localhost:9000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"
172.17.0.1 - - [01/Feb/2019:17:21:27 +0000] "GET /people?name=john HTTP/1.1" 200 10 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

后端应用程序：

$ docker run -d -p 8080:8080 --name backend backendapp

前端应用程序：

$ docker run -p 9000:8080 --name frontent --link backend  reactapp

37.36"
172.17.0.1 - - [01/Feb/2019:17:21:20 +0000] "GET /main.9712d6edfd3728dcfc56.bundle.js HTTP/1.1" 200 59020 "http://localhost:9000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"
172.17.0.1 - - [01/Feb/2019:17:21:27 +0000] "GET /people?name=john HTTP/1.1" 200 10 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

输出：

$ docker run -p 9000:8080 --name frontent --link backend  reactapp

37.36"
172.17.0.1 - - [01/Feb/2019:17:21:20 +0000] "GET /main.9712d6edfd3728dcfc56.bundle.js HTTP/1.1" 200 59020 "http://localhost:9000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"
172.17.0.1 - - [01/Feb/2019:17:21:27 +0000] "GET /people?name=john HTTP/1.1" 200 10 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

在这些情况下，使用docker compose总是比较容易

docker compose.yml

version: '3'
services:
  frontend:
    image: reactapp
    ports:
      - "9000:8080"
    depends_on:
      - backend
  backend:
    image: backendapp
    ports:
      - "8080:8080"

---

请共享用于运行docker容器的Dockerfile和命令。如果存在docker compose文件，请将其共享到。感谢您的共享，但问题是，这两个容器都位于同一端口（80）。与react应用程序的“/”和回弹端的“/api”类似，在本例中，/and/api都通过前端nginx，后者充当反向代理。因此，两个容器不能公开相同的主机端口。让后端容器在不同的端口中运行。在同一个主机上，后端和前端实际上都不可用：端口。前端-前端容器：8080，后端：后端容器：8080。只有前端已将端口发布到外部（80）。要从后端提取数据的用户必须通过前端（Nginx上的反向代理）执行此操作。请理解，后端和前端容器不能在单个主机系统中使用同一端口8080。backendcontainer只是一个服务名称。这只有在swarm/kunernetes这样的多主机系统中才可能，我在这里使用kubernetes服务。您可以找到如何使用openshift和kunernetes，在多主机系统支持下，使用api网关运行前端和后端。