使用 nginx gunicorn 在 digitalocean 上部署 django react

Posted 2023-02-24

【中文标题】使用 nginx gunicorn 在 digitalocean 上部署 django react

【英文标题】：deploying django react on digitalocean with nginx gunicorn

【发布时间】：2020-04-06 16:20:28

【问题描述】：

我在 django 中构建了绑定反应。它在本地主机上工作正常，但在服务器上它的静态文件不起作用。当我在激活 virtualenv 后运行它时：

gunicorn --bind 64.225.24.226:8000 liveimage.wsgi

它的管理面板在没有 css 的情况下工作：

这是我的 nginx 默认配置：

server 
listen 80;
server_name 64.225.24.226;

access_log off;
location /media/ 
alias /root/liveimage/media/;  # change project_name
 
location /static 
 autoindex on;
 alias /root/liveimage/build;

location / 
    proxy_pass http://127.0.0.1;
    proxy_set_header X-Forwarded-Host $server_name;
    proxy_set_header X-Real-IP $remote_addr;
    add_header P3P 'CP="ALL DSP COR PSAa PSDa OUR NOR ONL UNI COM NAV"';

我的seetings.py：

TEMPLATES = [

    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [os.path.join(BASE_DIR, 'build')],
    'APP_DIRS': True,
    'OPTIONS': 
        'context_processors': [
            'django.template.context_processors.debug',
            'django.template.context_processors.request',
            'django.contrib.auth.context_processors.auth',
            'django.contrib.messages.context_processors.messages',
            'social_django.context_processors.backends',
            'social_django.context_processors.login_redirect',
        ],
    ,
,
]

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'build/static')] 


STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

gunicorn.service：

[Unit]
Description=gunicorn daemon
Requires=gunicorn.socket
After=network.target
[Service]
User=root
Group=www-data
WorkingDirectory=/root/liveimage
ExecStart=/root/venv/bin/gunicorn \
      --access-logfile - \
      --workers 3 \
      --bind unix:/run/gunicorn.sock \
      liveimage.wsgi:application
 [Install]
 WantedBy=multi-user.target

我的项目在 /root/liveimage 和 virtualenv 在 /root/venv 我不知道怎么回事

【问题讨论】：

/root/liveimage/build中有静态文件吗？

静态文件夹中没有

在 gunicorn --bind 之前，你是否运行过 python manage.py collectstatic ？

我也试过 /root/liveimage/static

是的，我确实运行了 collectstatic 是正确的静态目录，或者我应该添加 /root/liveimage/static

【参考方案1】：

我不太了解 Nginx 的配置，但是这里的关键是 Django 在生产中不提供静态文件，它们必须由 Nginx 提供。

在您的网站上，转到浏览器的开发工具 -> 网络 -> 单击 css，然后查看网址。它们必须以manage.py collectstatic 生成的静态目录为目标，Nginx 必须从这些 url 提供该目录的内容。

【参考方案2】：

Gunicorn 不会显示样式。

我发现了这个：

注意：管理界面不会应用任何样式，因为 Gunicorn 不知道如何找到对此负责的静态 CSS 内容。

来自docs

【讨论】：

它说你需要启用javascript

在哪里？在管理面板中？

gunicorn --bind 64.225.24.226:8000 liveimage.wsgi 可用于测试 gunicorn 是否可以为应用程序服务。要获取所有的 css，您需要配置 nginx。它在答案中提到的文档中（Ubuntu 18.04）

gunicorn --bind 64.225.24.226:8000 liveimage.wsgi 即使没有css也不会加载任何东西

问题中的图片是什么？