使用 Nginx 和 Docker 部署 React 和 Django

Question

我正在尝试使用 Nginx 和 Docker 部署我的 React 构建和 Django API。我对部署仍然很陌生，并且从未托管过会投入生产的网站，所以有点不知所措。

现在我的 Django API 在端口 8000 上运行，React 应用程序在端口 3000 上运行。我希望使用 Nginx 将 IP 地址定向到 React 应用程序或 Django API，具体取决于 URL。

一些例子：

• http://10.2.5.250/: 将在 3000 端口为 React 构建提供服务
• http://10.2.5.250/upload: 将在 8000 端口为 Django 模板文件 index.html 提供服务
• http://10.2.5.250/median-rent?table=MedianRent: 将在 8000 端口为 Django api 提供服务

---

这是我的项目结构：

.
├── 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

这些是我在调试和开发构建中为 React 和 Django 提供服务的 docker 文件：

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 在 front-end 文件夹中

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"]

entrypoint.sh 在 housing_dashboard_project/housing_dashboard

#!/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 证书。