Question

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

React的Nginx前端
春季后端

两者都已被docker化，并位于同一Docker网络中。
Spring应用程序提供了用于前端的API。
前端在http://mypublicaddress.com端口80上可用我想将前端和后端Docker容器配置为能够从“外部”用户角度显示数据。这意味着前端应能够从后端获取JSON数据并将其显示给用户。

我从基本方案开始，在该方案的前面是Spring应用程序的URL：http://backendcontainer:8080/people?name=john
当然，从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的完整地址也被替换为相对的“ / people”

在致电后立即前进
http://mypublicaddress.com/people?name=john我得到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;
}

具有：

location /people/ {
    proxy_pass http://backendcontainer:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

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

Answer 1

Legacy Docker Links：使用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 -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 compose总是更容易。

docker-compose.yml

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

$ docker-compose up

使用Nginx和Spring进行Dockerizing React，通过Web浏览器访问两者

1 个答案: