Django 管理靜態資源的四個階段

原視頻：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

能夠用 S三、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。

若是你像我同樣真正熱愛計算機科學，喜歡研究底層邏輯，歡迎關注個人微信公衆號：