时间戳

首页 > 解决方案 > 使用 Nginx 和 Spring 对 React 进行 Dockerizing，通过 Web 浏览器访问两者

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

问题描述

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

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

我从基本场景开始，前面有 Spring 应用程序的 URL：http://backendcontainer:8080/people?name=john
当然，从 Web 浏览器的角度来看，不可能通过这样的地址获取人员列表。容器后端容器仅可从 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 Bad Gateway。我究竟做错了什么？

完整的 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;
}

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

标签： springdockernginx

解决方案

旧版 Docker 链接：使用 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 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 总是更容易。

码头工人-compose.yml

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

$ docker-compose up

推荐阅读