使用 Nginx 和 Docker 部署 React 和 Django

Question

我正在嘗試使用 Nginx 和 ZC5FD214CDD3B02B3B42Z727E 部署我的 React 構建和 Django API。 我對部署仍然很陌生，並且從未托管過將 go 投入生產的網站，所以有點不知所措。

Right now I have my Django API run on port 8000 and the React app runs on port 3000. I'm hoping to use Nginx to direct the IP address to the React app or Django API depending on the URL.

一些例子：

• http://10.2.5.250/ ：將服務於端口 3000 的 React 構建
• http://10.2.5.250/upload ：將服務於 Django 模板文件 index.html 在端口 8000
• http://10.2.5.250/median-rent?table=MedianRent ：將服務於 Django api 在端口 8000

---

這是我的項目結構：

.
├── docker-compose.yml
├── front-end
│   ├── Dockerfile
│   ├── README.md
│   ├── debug.log
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   ├── src
│   └── yarn.lock
├── housing_dashboard_project
│   └── housing_dashboard
│       ├── Dockerfile
│       ├── dashboard_app
│       │   ├── admin.py
│       │   ├── apps.py
│       │   ├── migrations
│       │   ├── models.py
│       │   ├── serializers.py
│       │   ├── static
│       │   ├── templates
│       │   │   └── dashboard_app
│       │   │       └── index.html
│       │   ├── urls.py
│       │   └── views.py
│       ├── data
│       ├── db.sqlite3
│       ├── entrypoint.sh
│       ├── importer
│       ├── manage.py
├── nginx

這些是我的 docker 文件，用於在調試和開發構建中提供 React 和 Django：

docker-compose.yml

version: '3'

services:
  django:
    build: ./housing_dashboard_project/housing_dashboard
    command: ["python", "manage.py", "runserver", "0.0.0.0:8000"]
    volumes:
      - ./housing_dashboard_project/housing_dashboard:/housing_dashboard_project/housing_dashboard
    ports:
      - "8000:8000"

  frontend:
    build: ./front-end
    command: ["npm", "start"]
    volumes:
      - ./front-end:/app/front-end
      - node-modules:/app/front-end/node_modules
    ports:
      - "3000:3000"

volumes:
  node-modules:

前端文件夾中的Dockerfile

FROM node

WORKDIR /app/front-end
COPY package.json /app/front-end

RUN npm install

EXPOSE 3000
CMD ["npm", "start"]

Dockerfile在housing_dashboard_project/housing_dashboard

FROM python:latest

RUN apt-get update \
    && rm -rf /var/lib/apt/lists/*

WORKDIR /housing_dashboard_project/housing_dashboard
COPY requirements.txt /housing_dashboard_project/housing_dashboard
RUN pip install -r requirements.txt

EXPOSE 8000
#CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]
ENTRYPOINT ["sh", "entrypoint.sh"]

在Housing_dashboard_project/housing_dashboard中的entrypoint.sh

#!/bin/sh

python3 manage.py flush --no-input
python3 manage.py makemigrations
python3 manage.py migrate

python3 manage.py collectstatic --no-input --clear

exec "$@"

我非常感謝任何關於如何最好地做到這一點的建議、說明和資源。 非常感謝！！！

Answer 1

在您的代碼中，您在 docker-compose 中缺少 Nginx。 您需要添加 Nginx 來重定向請求。 這是一篇好文章： Docker-Compose for Django and React with Nginx reverse-proxy and Let's encrypt certificate

在本文中，您有：

• Nginx 重定向請求。 有示例如何將請求重定向到管理面板，以便您可以根據需要進行調整。
• React 使用 nginx 構建和服務。
• 有 Let's encrypt 頒發的證書。