django on heroku で aws s3 に compress

はじめに

だいぶ頭悪い感じのタイトルになりましたが、何がしたかったかというと、

• django を heroku で動かしたい
• django-compressor を使いたい
• heroku は deploy 後に静的ファイルを追加できないので、compress したファイルを代わりに aws s3 に置きたい
• でも、es6 や sass の元ファイルは置きたくない（外部から参照させたくない）

です。
まるっと全部 s3 に、みたいな記事は探したら見つかったんですけど、compress したファイルだけというのが見つからなかったので、今回書きました。

※そして実はあまり意味なかったということが最後にわかりました。

どうしたか

まぁ、大したことはしてなくて、静的ファイルの参照先と compress する先を別々にしただけです。

具体的に

こうです（django は 1.11）。
※今動いている settings.py から網羅的に転機したつもりですけど、漏れていたら heroku docs や django-compressor、その他の blog を参照していただければと思います。。。

settings.py

# アプリやミドルウェアに compress などを追加
INSTALLED_APPS = [
    ...
    'compressor',
    ...
]

MIDDLEWARE = [
    ...
    'whitenoise.middleware.WhiteNoiseMiddleware',
]

# collectstatic した時の展開先。s3 に置かないような local で開発用の設定
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

# 静的ファイル置き場。sass などはここに置く
STATIC_URL = '/static/'

# compress するときの参照先設定
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

# 静的ファイル探すヤツラの指定
STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'compressor.finders.CompressorFinder',
    'npm.finders.NpmFinder',
]

# compress するコンパイラなどの指定
COMPRESS_PRECOMPILERS = (
    ('text/x-scss', 'compressor_toolkit.precompilers.SCSSCompiler'),
    ('module', 'compressor_toolkit.precompilers.ES6Compiler'),
)
COMPRESS_CSS_FILTERS = [
    'compressor.filters.css_default.CssAbsoluteFilter',
    'compressor.filters.cssmin.rCSSMinFilter',
]

# 以下、heroku 向け。local では不要

# s3 にアクセスするための鍵
AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')

# 静的ファイルへのアクセス設定
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
COMPRESS_STORAGE = 'storages.backends.s3boto.S3BotoStorage'
COMPRESS_OFFLINE = True  # ユーザがページを開いたときに compress しないようにする（事前に compress しないとエラーになる）
COMPRESS_ENABLED = True  # メンドイので manifest.json を見て css を参照するようにする

# s3 先の指定
AWS_STORAGE_BUCKET_NAME = 'hogehoge'
AWS_S3_CUSTOM_DOMAIN = 's3.amazonaws.com/hogehoge'

上記を deploy したあとで、python manage.py compress すると、s3 にファイルが展開されます。
ただ、キャッシュが効いているのか、たまに OfflineGenerationError が発生していまします・・・対応策を調査中です（python manage.py mtime_cache -c すればいいのかな？ と思ってますが、まだ試せてません）。

本当は

deploy するときに、一緒に compress を実行できれば良いと思ったんですけど、どうもやり方がわからなかったので、s3 を使うことで回避してます。

おまけ

ここまで書いて気づきましたけど、static ディレクトリに es6 や sass が置いてあるってことは、確かに html からは呼び出されなくても、直接 url に打ち込めば参照できるのでは・・・あ、見れた・・・。