原视频：Assets in Django without losing your hair - PyCon 2019

Django 处理静态资源相对而言是比较蛋疼的，该 talk 作者给我们介绍了 django app 处理静态资源的四个发展阶段（或者说场景），从最简单的单机文件系统，到前后端完全分离，希望能对你有所帮助。

0x01 Simple Assets

这种方式是最简单的，虽然效率可能相比下面介绍的要低，但是还是足够 handle 大多数业务场景，Don't Over Thinking！ 这种开发模式用collectstatic将所有 app和STATICFILES_DIRS目录下的静态资源打包到到STATIC_ROOT目录。然后可以用 nginx serve 静态资源，比如:

# django settings.py
STATIC_URL = '/static/'

# nginx server config
server {   
    ...
    location /static {    
        autoindex on;    
        alias /opt/aa/webroot/;    
    }
}
复制代码

除了nginx，作者还介绍了一个工具：whitenosie，文档在这里，有兴趣可以了解一下。

这个阶段的示意图如下所示：

总结一下这个阶段：

• 使用 whitenoise。（我个人还是比较喜欢nginx）
• 关键配置为：STATICFILES_DIRS和STATIC_ROOT。
• 模板语法不要硬编码！

• 每次 deploy别忘了 collectstatic，有一个 --noinput 参数比较有用，这可以实现自动化，而不需要每次 collecstatic 都回答yes or no。

0x02 Cloud Stroage

可以用 S3、Azure、阿里云、七牛云来存储你的静态文件，这样访问速度肯定是要更快的，但是会对开发新增 complexity。django 有个第三方插件：django-storages，但是目前好像还不支持国内的CDN 服务商，比如阿里云、七牛云，当前你完成可以自己写。

比如如果你想使用 Amazon s3存储：

django 的配置文件：

其中最关键的配置为：STATICFILES_STORAGE，它的默认值为django.contrib.staticfiles.storage.StaticFilesStorage，也就是文件系统，第一阶段介绍的那个。Django 的官方文档有一个如何使用 cloud 服务、CDN 的 guideline。如果你想自己自己写一个 storage backend，这个文档应该会对你有所帮助。

上图还包含了一个最佳实践：根据DEBUG选择不同的aws prefix，这样就不会把测试时的静态资源推到生产 aws bucket。

这时的collectstatic会把STATICFILES_DIRS的静态资源推到 aws（或其他 cloud provider），而之前的是本地的文件系统。

你的 stroage engine会为你 handle 正确的 url，比如在模板页面里面使用static，能够正确指向实际的 url。

总结一下这个阶段：

• 推荐使用django-storages，如果你有足够实力，可以按照 django 官方文档介绍的 API 自己写一个 storage engine。
• 关键设置为：STATICFILES_STORAGE。
• 再次：使用static，不要硬编码。
• 可以把collectstaic当作 CI一部分。

0x03 User-Uplaod Media

让用户上传文件到你的服务器是存在很多安全隐患的，所以最好使用第二步提到的 cloud provider。作者提到的是使用 django 的 model form 上传 media，这在某些情况下是做不到的，比如前后端分离的场景。前端使用 cloud provider 的sdk上传至cloud，然后把 url post 给后端或许更加常见。当然如果你使用到了ImageField或者FileField，有两个参数是你可以利用的：STATICFILES_STORAGE和DEFAULT_FILE_STORAGE，当你设置为 aws 相关配置的时候，它能够自动为你上传到 aws。

总结一下此阶段：

• 推荐使用django-storages。
• 关键配置参数：DEFAULT_FILE_STORAGE。
• 使用ImageField、FileField的时候指定upload_to。

Asset Compilation

也就是前后端分离，前端使用webpack、react or vue技术栈。所以你需要：

• npm
• webpack
• webpack-bundle-tracker
• django-webapck-loader

webpack-bundle-tracker和django-webapck-loader能减少你的 headache。简单来说，webpack-bundle-tracker生成 metadata 数据，django-webapck-loader利用 metadata 数据使其更好地和 django app 结合。

webpack自己是一套完整的体系，你想要很复杂，足够你复杂的，但是简单的使用大致如下：注意最下面的./webpack-stats.json文件，这是webpack和django连接的桥梁。

重要的配置如下：

你只需要运行两条指令：

collectstatic知道如何通过webpack-stats.json找到 bundle 文件，然后把它推送到该去的位置：本地文件系统、aws...

总结一下此阶段：

• 推荐使用webpack-bundle-tracker和django-webapck-loader。
• 关键配置项：INSTALLED_APPS += "webpack"，WEBPACK_LOADER={}， webpack.config.js。
• compile、存储静态资源分两步：webpack -> collectstatic。

如果你像我一样真正热爱计算机科学，喜欢研究底层逻辑，欢迎关注我的微信公众号：