Help us understand the problem. What is going on with this article?

django on heroku で aws s3 に compress

More than 1 year has passed since last update.

はじめに

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

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

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

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

どうしたか

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

具体的に

こうです(django は 1.11)。
※今動いている settings.py から網羅的に転機したつもりですけど、漏れていたら heroku docsdjango-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 に打ち込めば参照できるのでは・・・あ、見れた・・・。

ukisoft
まったり developer です。python と js を使うことが多いです。
rymansat
普段は宇宙開発に関わっていないサラリーマンが身近で誰でもできる宇宙開発を実現させることがリーマンサット・プロジェクト(Ryman Sat Project=rsp.)の目的です。キューブサットの開発をはじめ、宇宙を軸として様々なコミュニティやクリエイターとコラボレーションし、民間宇宙開発に関するネットワークを強化、拡張することを目指して活動しています。
https://www.rymansat.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした