使用 Nginx 和 Docker 部署 React 和 Django

Question

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

\n

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

\n

一些例子：

\n

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

\n

---

\n

这是我的项目结构：

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 docker-compose.yml\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 front-end\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Dockerfile\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 debug.log\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 yarn.lock\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 housing_dashboard_project\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 housing_dashboard\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Dockerfile\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dashboard_app\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 admin.py\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 apps.py\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 migrations\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 models.py\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 serializers.py\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 static\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 templates\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 dashboard_app\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 urls.py\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 views.py\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 data\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 db.sqlite3\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 entrypoint.sh\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 importer\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 manage.py\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 nginx\n

\n

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

\n

docker-compose.yml

\n

version: \'3\'\n\nservices:\n  django:\n    build: ./housing_dashboard_project/housing_dashboard\n    command: ["python", "manage.py", "runserver", "0.0.0.0:8000"]\n    volumes:\n      - ./housing_dashboard_project/housing_dashboard:/housing_dashboard_project/housing_dashboard\n    ports:\n      - "8000:8000"\n\n  frontend:\n    build: ./front-end\n    command: ["npm", "start"]\n    volumes:\n      - ./front-end:/app/front-end\n      - node-modules:/app/front-end/node_modules\n    ports:\n      - "3000:3000"\n\nvolumes:\n  node-modules:\n

\n

前端文件夹中的Dockerfile

\n

FROM node\n\nWORKDIR /app/front-end\nCOPY package.json /app/front-end\n\nRUN npm install\n\nEXPOSE 3000\nCMD ["npm", "start"]\n

\n

位于housing_dashboard_project/housing_dashboard的Dockerfile

\n

FROM python:latest\n\nRUN apt-get update \\\n    && rm -rf /var/lib/apt/lists/*\n\nWORKDIR /housing_dashboard_project/housing_dashboard\nCOPY requirements.txt /housing_dashboard_project/housing_dashboard\nRUN pip install -r requirements.txt\n\nEXPOSE 8000\n#CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]\nENTRYPOINT ["sh", "entrypoint.sh"]\n

\n

入口点.sh在housing_dashboard_project/housing_dashboard

\n

#!/bin/sh\n\npython3 manage.py flush --no-input\npython3 manage.py makemigrations\npython3 manage.py migrate\n\npython3 manage.py collectstatic --no-input --clear\n\nexec "$@"\n

\n

Answer 1

在您的代码中，您在 docker-compose 中缺少 Nginx。您需要添加 Nginx 来重定向请求。这是一篇好文章：Docker-Compose for Django and React with Nginx reverse-proxy 和 Let's encrypt 证书

在这篇文章中你有：

• Nginx 重定向请求。有示例如何将请求重定向到管理面板，以便您可以根据您的需求进行调整。
• React 是由 nginx 构建并提供服务的。
• 已颁发 Let's crypt 证书。