使用 Docker-Compose 為 React 和 Flask 配置 Nginx

Question

我正在嘗試使用 Nginx 為網站配置多個 Docker 容器。

我有 docker-compose 工作來啟動每個容器，但是在使用 Nginx 時，我無法讓 React 應用程序訪問 Flask API 的 Gunicorn WSGI 服務器。

知道為什么會發生這種情況嗎？ 圖片中沒有 Nginx 也能正常工作。 我還需要 Flask 應用程序的 Nginx conf 嗎？ 或者是從 Nginx 路由請求到 Gunicorn WSGI 服務器的情況？

反應前端（容器）

# build environment
FROM node:12.2.0-alpine as build
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@3.0.1 -g --silent
COPY . /usr/src/app
RUN npm run build

# production environment
FROM nginx:1.16.0-alpine
COPY --from=build /usr/src/app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

配置文件

server {

  listen 80;

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

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

Docker-compose

version: '3.7'

services:
  middleware:
  build: 
      context: ./middleware
      dockerfile: Dockerfile.prod
  command: gunicorn --bind 0.0.0.0:5000 main:app
  ports:
    - 5000:5000
  env_file:
    - ./.env.prod
frontend:
  container_name: frontend
  build:
    context: ./frontend/app
    dockerfile: Dockerfile.prod
  ports:
  - '80:80'

Answer 1

是的，您需要將 Nginx 中的流量代理到 WSGI 應用程序，例如

server {
    listen 80;
    server_name your_domain www.your_domain;

    location / {
        include uwsgi_params;
        uwsgi_pass unix:/home/sammy/myproject/myproject.sock;
    }
}

在這里閱讀更多

更新

在這種特殊情況下，您需要代理到位於單獨容器中的 Gunicorn，在名稱middleware下可見。

因此 uwsgi_pass 指令應該引用該容器：

server {
    listen 80;
    server_name your_domain www.your_domain;

    location / {
        include uwsgi_params;
        uwsgi_pass http://middleware:5000;
    }
}

請注意，如果您使用 Gunicorn - 它建議使用proxy_pass ，而不是uwsgi_pass 。