如何在单个DigitalOcean App中安装React与Python包？

以下是适配你的React作为Django模板、共享身份验证场景的完整环境搭建步骤：

1. 创建DigitalOcean Droplet #

• 选择Ubuntu 22.04 LTS镜像（稳定性强，社区支持完善）
• 按需选择CPU/内存配置（起步可选Basic 2GB/1CPU）
• 配置SSH密钥登录（比密码更安全）
• 完成创建后，通过SSH连接到Droplet

2. 系统初始化与基础依赖安装 #

连接Droplet后，先更新系统并安装必备工具：

sudo apt update && sudo apt upgrade -y
sudo apt install python3-pip python3-venv git nginx -y

3. 配置Python与Django环境 #

• 创建项目目录并进入：

mkdir ~/django-react-project && cd ~/django-react-project

• 创建并激活Python虚拟环境：

python3 -m venv venv
source venv/bin/activate

• 安装Django及生产环境依赖：

pip install django gunicorn
# 若项目有requirements.txt，直接执行：
# pip install -r requirements.txt

4. 安装Node.js与React依赖 #

使用nvm管理Node.js版本，避免系统级权限冲突：

# 执行nvm官方安装脚本
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# 重新加载shell配置（或退出SSH后重新连接）
source ~/.bashrc
# 安装长期支持版Node.js
nvm install --lts
# 验证安装结果
node --version
npm --version

• 进入React项目子目录（假设为react-app），安装依赖并构建：

cd react-app
npm install
# 构建React项目，生成可用于Django模板的index.html和静态资源
npm run build

5. 整合React与Django模板系统 #

• 将React构建生成的build/index.html复制到Django应用的模板目录（例如your_django_app/templates/）
• 修改Django项目的settings.py：
  • 确保TEMPLATES配置中的DIRS包含模板文件所在路径
  • 添加React静态资源路径到STATICFILES_DIRS：

    STATICFILES_DIRS = [
        BASE_DIR / "react-app/build/static",
    ]
    

• 收集所有静态资源到Django指定的静态目录：

python manage.py collectstatic --noinput

6. 配置生产环境服务 #

配置Gunicorn运行Django #

• 先测试Gunicorn是否能正常启动Django：

gunicorn --bind 0.0.0.0:8000 your_django_project.wsgi:application

• 创建systemd服务文件，实现Gunicorn开机自启：

sudo nano /etc/systemd/system/gunicorn.service

写入以下内容（替换your_username和your_django_project为实际信息）：

[Unit]
Description=gunicorn daemon
After=network.target

[Service]
User=your_username
Group=www-data
WorkingDirectory=/home/your_username/django-react-project
ExecStart=/home/your_username/django-react-project/venv/bin/gunicorn --workers 3 --bind unix:/home/your_username/django-react-project/django-react.sock your_django_project.wsgi:application

[Install]
WantedBy=multi-user.target

• 启动并启用Gunicorn服务：

sudo systemctl start gunicorn
sudo systemctl enable gunicorn

配置Nginx反向代理 #

• 创建Nginx站点配置文件：

sudo nano /etc/nginx/sites-available/django-react

写入以下内容（替换your_domain_or_ip和your_username为实际信息）：

server {
    listen 80;
    server_name your_domain_or_ip;

    location /static/ {
        root /home/your_username/django-react-project;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/home/your_username/django-react-project/django-react.sock;
    }
}

• 启用配置并重启Nginx：

sudo ln -s /etc/nginx/sites-available/django-react /etc/nginx/sites-enabled
sudo nginx -t
sudo systemctl restart nginx

7. 环境验证 #

访问Droplet的IP地址或绑定的域名，确认Django模板中的React应用正常加载，身份验证功能可正常使用。

内容的提问来源于stack exchange，提问作者cbirch