python开发中前后端部署在同一域名下的静态文件处理

2022年10月31日 18:58 by wst

服务部署

---

接上一篇文章中，在处理静态文件的过程中踩了不少坑。这里做一个总结。

说明：项目前端是vue，项目后端是django。

收集静态文件

1)编译vue后产生的文件夹dist, 先放入后端目录（backend）下。

2)配置settings.py文件，注意包含dist文件夹下的静态文件。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, "dist")],
        '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',
            ],
        },
    },
]

注意DIRS设置。

3）把代码放到服务器之后，收集静态文件到static目录下。settings.py中相应的配置如下：

STATIC_URL = '/assets/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "dist/assets"),
]

# 部署时将作为放置静态文件的目录
STATIC_ROOT = 'static'

STATIC_URL这么设置是因为：html拉取静态文件时的地址前缀是"assets"（同时会引起nginx配置更改）。

运行的命令为：

python manage.py collectstatic

4）nginx配置修改，注意静态文件地址。

server {                                                                                                                                                                                                             
    listen 80;                                                                                                                                                                                                       
    server_name prod.eilieili.vip;
    access_log /home/wst/workspace/production-admin/backend/logs/access.log;
    error_log /home/wst/workspace/production-admin/backend/logs/error.log;                                                                                                                                                                     
    client_max_body_size 10M;
    root /home/wst/workspace/production-admin/backend;

        location  /assets/ {
            #如果你的static目录不在root里，可以配置 alias /path/to/your/mysite/static;
            alias /home/wst/workspace/production-admin/backend/static/;
        }

        location / {
            include uwsgi_params; # the uwsgi_params file you installed
            uwsgi_pass 127.0.0.1:5555;
        }
}

注意：location /assets/，常规情况下这里设置为/static/。不要忘了前后的斜杠，否则会报错。还有alias后面的路径，最后也是有斜杠的。

5）对应的uwgi.ini文件为：

[uwsgi]
# 项目根目录路径(full path)
chdir           = /home/ubuntu/workspace/production-admin/backend
# Django的 wsgi 文件
module          = backend.wsgi:application
# virtualenv目录 (full path)
home            = /home/ubuntu/.conda/envs/production
# 自动载入
py-autoreload=1
# 设置日志
daemonize   = %(chdir)/logs/uwsgi.log
log-maxsize = 5000000
master          = true
# 最大工作进程数（CPU密集型建议设为CPU核心数，IO密集型建议设为CPU核心数的两倍）
processes       = 1
# unix套接字文
socket          = %(chdir)/socket.sock
# socket文件权限
chmod-socket    = 777
# 退出时清空环境
vacuum          = true
# 用以重启服务
stats=%(chdir)/uwsgi.status
pidfile=%(chdir)/uwsgi.pid

 

---