使用 Nginx 和 Docker 部署 React 和 Django

Posted 2023-02-24

【中文标题】使用 Nginx 和 Docker 部署 React 和 Django

【英文标题】：deploy React and Django with Nginx and Docker

【发布时间】：2021-03-16 08:34:51

【问题描述】：

我正在尝试使用 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 "$@"

【参考方案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 证书。

【讨论】：

您好，非常感谢您的回答！！我正在阅读教程并在运行docker-compose -f docker-compose-dev.yml up 后遇到此错误。我已经修复了目录名称以适合我的项目，但不知道为什么我仍然有这个错误：Traceback (most recent call last):backend_1 | File "/usr/local/lib/python3.8/site-packages/gunicorn/arbiter.py", line 583, in spawn_worker ....backend_1 | ModuleNotFoundError: No module named 'server'

很难根据这么少的信息进行调试......对不起。但我会尝试：你在 gunicorn start 命令中指向正确的文件吗？或者您可以尝试在 wsgi-entrypoint 中使用开发服务器而不是 gunicorn，它会为您提供更多信息来调试问题。

嗨，抱歉，我花了一段时间，但我发现问题与 docker/backend/wsgi-entrypoint.sh 中的这一行有关：gunicorn server.wsgi --bind 0.0.0.0:8000 --workers 4 --threads 4 我不确定其中server.wsgi 在我的目录或您的目录中。你介意帮我澄清一下那个文件吗？再次感谢

嗨，我终于想通了！我只需要将server.wsgi 更改为my_project_name.wsgi。很抱歉让您感到困惑，非常感谢您的回答！！！

太好了，在我的项目中有一个文件：backend/server/server/wsgi.py。祝你好运！