使用 nginx 部署容器化 React Django 应用程序

Question

我有一个应用程序： 客户端在反应。 Django 中的服务器。

该应用程序是容器化的：

backend-container

和

frontend-container

如下(

docker-compose.yaml

):

version: '3.8'

services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
      args:
        POSTGRES_USER: ${POSTGRES_USER}
        POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
        POSTGRES_HOST: ${POSTGRES_HOST}
        SECRET_KEY: ${SECRET_KEY}
        DEBUG: ${DEBUG}
        CORS_ALLOWED_ORIGIN: ${CORS_ALLOWED_ORIGIN}
        REACT_APP_ALLOWED_HOST: ${REACT_APP_ALLOWED_HOST}
    image: backend
    container_name: backend-container
    ports:
      - "8000:8000"
    environment:
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_HOST: ${POSTGRES_HOST}
      SECRET_KEY: ${SECRET_KEY}
      DEBUG: ${DEBUG}
      CORS_ALLOWED_ORIGIN: ${CORS_ALLOWED_ORIGIN}
      REACT_APP_ALLOWED_HOST: ${REACT_APP_ALLOWED_HOST}

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
      args:
        REACT_APP_ALLOWED_HOST: ${REACT_APP_ALLOWED_HOST}
    image: frontend
    container_name: frontend-container
    ports:
      - "3000:3000"
    environment:
      NODE_ENV: production
      REACT_APP_ALLOWED_HOST: ${REACT_APP_ALLOWED_HOST}

该应用程序托管在 EC2 实例上，使用 github 操作进行部署： 名称：我的工作流程

on: workflow_dispatch

jobs:
  first-job:
    runs-on: self-hosted
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Build the Docker backend image
        env:
          POSTGRES_USER: ${{ secrets.POSTGRES_USER }}
          POSTGRES_PASSWORD: ${{ secrets.POSTGRES_PASSWORD }}
          POSTGRES_HOST: ${{ secrets.POSTGRES_HOST }}
          SECRET_KEY: ${{ secrets.SECRET_KEY }}
          DEBUG: ${{ secrets.DEBUG }}
          CORS_ALLOWED_ORIGIN: ${{ secrets.CORS_ALLOWED_ORIGIN }}
          REACT_APP_ALLOWED_HOST: ${{ secrets.REACT_APP_ALLOWED_HOST }}
        run: |
          sudo docker-compose -p fullstack down
          sudo POSTGRES_USER=$POSTGRES_USER POSTGRES_PASSWORD=$POSTGRES_PASSWORD POSTGRES_HOST=$POSTGRES_HOST SECRET_KEY=$SECRET_KEY DEBUG=$DEBUG CORS_ALLOWED_ORIGIN=$CORS_ALLOWED_ORIGIN REACT_APP_ALLOWED_HOST=$REACT_APP_ALLOWED_HOST docker-compose -p fullstack up --build -d

我可以看到容器正在我的 EC2 实例上运行。

我在 EC2 实例上配置了 nginx：

server {
    listen 80;

    server_name _;

    location / {
        proxy_pass http://172.20.0.3:3000;
        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 $scheme;
        proxy_read_timeout 90;
        proxy_connect_timeout 90;
        proxy_redirect off;
    }
}

172.20.0.3

是我的

frontend-container

的本地网络地址。

我的react-app当前尝试通过backend:8000（后端是我的docker-compose中的服务名称）从代码访问我的后端容器，如下所示：

const App = () => {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    fetch(http://${process.env.REACT_APP_ALLOWED_HOST}:8000/demoapp/allBooks)
      .then(response => response.json())
      .then(data => setBooks(data.books)) // Access the 'books' property of the response
      .catch(error => console.error('Error fetching data:', error));
  }, []);
...

我的 API 请求

http://backend:8000/demoapp/allBooks

就这样失败了。 我可能错过了 nginx 配置的一些东西，但我不知道到底是什么。

Answer 1

尝试在 nignx 配置中添加类似的内容：

server {
    listen 80;
    server_name your.domain.com;

    location / {
        # Forward requests to the frontend
        proxy_pass http://172.20.0.3:3000;
        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 $scheme;
    }

    location /api/ {
        # Forward API requests to the backend
        proxy_pass http://backend-container:8000;  # Use container name for internal Docker communication
        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 $scheme;
    }
}

• 确保检查两个容器的主机