python - Nginx 服务 React 构建和 proxy_pass Django Rest api 服务器

Question

domain.conf 看起来像这样

我是使用 Nginx 传递 Django API 服务器的代理。 Nginx 使用 letsencrypt SSL 证书，目前正在监听端口 80 和 443。Nginx 完美地服务于 React 构建文件，同时在 React 应用程序中使用 Axios 访问 Django API 导致 502 错误网关。 Axios 正在尝试访问“/api/v1/”作为 baseURL。

server {
    listen 80;
    listen [::]:80;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

    return 301 https://example.com$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # redirects www to non-www. wasn't work for me without this server block
    return 301 https://example.com$request_uri;
}

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name example.com www.example.com;
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        root /var/www/frontend;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:8000;
        proxy_redirect default;
        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;
    }
}

部分 docker-compose.yml 如下所示

backend:
    build:
      context: .
      dockerfile: dockerFiles/backend/DockerFile
    tty: true
    ports:
      - "8000:8000"
    expose:
      - 8000
    volumes:
      - ./backend:/backend
    env_file:
      - backend/.env
    depends_on:
      - db

  frontend:
    image: node:latest
    command: sh start.sh
    working_dir: /frontend
    tty: true
    volumes:
      - ./frontend/:/frontend
    depends_on:
      - backend
    links: 
      - backend

  nginx:
    image: nginx:latest
    tty: true
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./config/nginx/conf.d:/etc/nginx/conf.d
      - ./frontend/dist:/var/www/frontend
      - ./data/certbot/conf:/etc/letsencrypt
      - ./data/certbot/www:/var/www/certbot
    depends_on:
      - backend

- start.sh 运行 yarn yarn build- domain.conf 是从 ./config/nginx/conf.d

复制的

Answer 1

添加最终工作配置和 Docker 文件:

Nginx 配置

upstream backend_server {
    server backend:8000;
}

server {
    listen 80;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

    location /api/ {
        return 301 https://$host$request_uri;
    }

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    root /var/www/frontend;

    ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location /api/v1/ {
        proxy_pass http://backend_server/;
        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-Forwarded-Proto $https;
        proxy_connect_timeout 360s;
        proxy_read_timeout 360s;
    }

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

docker-compose还添加了带有 nginx 的 certbot 配置

version: '3.5'

services:
  db:
    container_name: db
    image: postgres:latest
    ports:
      - "5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data/

  backend:
    container_name: backend
    build:
      context: .
      dockerfile: dockerFiles/backend/DockerFile
    tty: true
    ports:
      - "8000:8000"
    expose:
      - 8000
    volumes:
      - ./backend:/backend
    env_file:
      - backend/.env
    depends_on:
      - db

  frontend:
    container_name: frontend
    image: node:latest
    command: sh start.sh
    working_dir: /frontend
    tty: true
    volumes:
      - ./frontend/:/frontend
    depends_on:
      - backend
    links: 
      - backend

  nginx:
    container_name: nginx
    image: nginx:latest
    tty: true
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./config/nginx/conf.d:/etc/nginx/conf.d
      - ./frontend/dist:/var/www/frontend
      - ./data/certbot/conf:/etc/letsencrypt
      - ./data/certbot/www:/var/www/certbot
    depends_on:
      - backend
    command: "/bin/sh -c 'while :; do sleep 6h & wait $${!}; nginx -s reload; done & nginx -g \"daemon off;\"'"

  certbot:
    image: certbot/certbot
    restart: unless-stopped
    volumes:
      - ./data/certbot/conf:/etc/letsencrypt
      - ./data/certbot/www:/var/www/certbot
    entrypoint: "/bin/sh -c 'trap exit TERM; while :; do certbot renew; sleep 12h & wait $${!}; done;'"


volumes:
  postgres_data: # <-- declare the postgres volume

start.sh -- 迁移数据库，收集静态文件，启动gunicorn server

# Start Gunicorn processes
echo Starting Gunicorn.
exec gunicorn <app-name>.wsgi:application -k gevent\
    --bind 0.0.0.0:8000 \
    --workers