8

静的ファイルを提供するAmazonS3を使用してherokuにデプロイされたアプリにdjango-compresorを使用しています。background-image：url（）で参照されているcssの画像が正しいパスでレンダリングされないことを除いて、すべてが正常に機能しています。

私の静的ファイルは、次のディレクトリ構造で編成されています。

-static
    -myapp
        -js
        -css
        -img
    -bootstrap
        -js
        -css
        -img
    -othervendor
        -js
        -css
        -img

したがって、url（）で使用しているパスは、cssファイルからの相対パスです。

url("../img/icon.png")

すべてのcssファイルが圧縮され、静的ディレクトリのCACHEフォルダーに移動され、CACHEディレクトリへのURLは次のように正しくレンダリングされます。

https://mybucket.s3.amazonaws.com/static/CACHE/css/somehash.css

問題は、cssファイルurl（）の画像が次のようにレンダリングされることです。

https://mybucket.s3.amazonaws.com/static/CACHE/img/imagefile.png

そしてそれは次のようになります：

https://mybucket.s3.amazonaws.com/static/myapp/img/imagefile.png

または、画像がCACHEディレクトリにコピーされた場合、これは機能します。

https://mybucket.s3.amazonaws.com/static/CACHE/img/imagefile.png

私の一時的な修正は、css内の画像のパスを次のように変更することです。これは機能します。

url("/static/foldername/img/icon.png")

私はdjangoとcompressorを初めて使用するので、正しい動作がどうあるべきかわかりませんが、これは正しくないようです。私の見方では、djangoコンプレッサーに2つのことのいずれかを実行させることができれば問題を修正できます：1）css url（）で参照されているすべての画像をCASHE / imgディレクトリにコピーするか、2）で表される正しいURLをレンダリングする../これが私の設定です：

テンプレートのcssファイルは{％compress css％}ブロックにあります。

s3utils.py（バケット内に個別のメディアディレクトリと静的ディレクトリを作成するために使用）

from storages.backends.s3boto import S3BotoStorage

StaticS3BotoStorage = lambda: S3BotoStorage(location='static')
StaticRootS3BotoStorage = lambda: S3BotoStorage(location='static')
MediaS3BotoStorage = lambda: S3BotoStorage(location='media')
MediaRootS3BotoStorage = lambda: S3BotoStorage(location='media')

settings.py

DEFAULT_FILE_STORAGE = 'myapp.settings.s3utils.MediaRootS3BotoStorage'
STATICFILES_STORAGE = 'myapp.settings.s3utils.StaticRootS3BotoStorage'

AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
AWS_STORAGE_BUCKET_NAME = os.environ.get('AWS_STORAGE_BUCKET_NAME')

S3_URL = 'http://%s.s3.amazonaws.com/' % AWS_STORAGE_BUCKET_NAME
MEDIA_URL = S3_URL+'media/'
MEDIA_ROOT = S3_URL+'media/'
STATIC_URL = S3_URL+'static/'
STATIC_ROOT = S3_URL+'static/'

COMPRESS_STORAGE = STATICFILES_STORAGE 
COMPRESS_URL = STATIC_URL
COMPRESS_ROOT = STATIC_ROOT

css url（ "../ img / image.png"）をCACHE /imgディレクトリにコピーするようにコンプレッサーに指示する設定が必要だと思いますか？

4

3 に答える 3

2

私は同じ問題を抱えていました！

私にとっては、最初はコンプレッサーの問題のように見えました。プレフィックス付きの S3Storage バックエンドを

StaticS3Backend = lambda: S3BotoStorage(location='static')

に

class StaticS3Backend(S3BotoStorage):
    location = 'static'

他の方法が場所の値を正しく設定しなかったため（空のままでした）

これで問題は解決しました。

于 2013-03-26T10:24:41.710 に答える
1

私はまったく良い解決策を見つけていません。ここでいくつかの良い議論https://github.com/jezdez/django_compressor/issues/226

CSS ファイルで、Amazon S3 の画像 URL を指す絶対パスを使用すると機能します。しかし、言うまでもなく、これはばかげています。ローカルの開発環境とテスト環境のすべてで本番環境のイメージを使用する必要があるのはなぜですか? 場合によっては、受け入れられないことさえあります。画像を変更してしばらくテストしたいとします。(新しいイメージを s3 に手動でアップロードし、このイメージへの何千もの CSS 参照をすべて新しい URL に手動で変更できます。これもばかげています。)

少し良い方法は、css で {{STATIC_URL}} を使用して、相対パスではなく絶対パスを作成することです。はい、 https: //django_compressor.readthedocs.org/en/1.3/settings/#base-settings に記載されている compress.filters.template.TemplateFilter を追加すると、{{STATIC_URL}} を使用できます。これにより、多段階問題が解決されます。ただし、ここで圧縮していないため、ローカル開発では機能しません。圧縮すると、デバッグに苦労します。

個人的には、django-compressor 内に compress.filters.template.TemplateFilter があるのは間違っていると感じています。これは、django の一部である必要があります。css および js に対してオンにできるオプションのプロセス。

于 2013-09-10T18:26:01.027 に答える
1

私は最近これに遭遇し、COMPRESS_OUTPUT_DIR = ''. これにより、圧縮ファイルが、静的なデフォルトの「CACHE」ディレクトリではなく、静的ルートに保存されました。

于 2018-02-06T02:55:45.393 に答える