web-dev-qa-db-ja.com

AmazonS3がファイルを正しく提供していません

私は友人のためにこのサイトを作成し、Amazon S3バケットにアップロードしました( http://ballard26.s3.amazonaws.com/index.html )そしてそのサイトにアクセスするとページは正しく読み込まれず、理由がわかりません。何か案は?

たとえば、stylesheet.cssが正しく読み込まれません。 http://ballard26.s3.amazonaws.com/stylesheet.css にアクセスすると、CSSとしてロードする代わりにファイルをダウンロードします。

20

アップロードしたファイルのmimeタイプ(HTTPコンテンツタイプヘッダー)を確認してください。 S3は必ずしも正しく設定するとは限りません。アップロードAPI呼び出しでそれらを設定する必要がある場合があります。一部のアップロードライブラリがこれを行います。

ファイルがS3からブラウザからダウンロードされたときにmimeタイプが正しくない場合、mimeタイプが正しく設定されていないと、常に正しくレンダリングされるとは限りません。

31
jnoss

CSSファイルのデフォルトのMIMEタイプはoctet/binaryです。これを修正するには、AWSマネジメントコンソールにサインインし、Amazon S3セクションに移動して、関連するバケットを見つけます。 CSSファイルを見つけて、[プロパティ]を選択します。 [メタデータ]で、Content-Typeキーを値に設定します:text/css

Mac OS X用のPanicのTransmitアプリを使用する場合、Content-Type: text/cssのCSSファイルにカスタムアップロードヘッダーを設定できます。これにより、ファイルをアップロードするたびに正しいMIMEタイプが適用され、手動で設定する必要がなくなります。毎回コンソール。

これに関する詳細は、Adam Wilcoxの ブログ投稿 にあります。

15

ファイルをアップロードするときに、ファイルのmime-typeを適切に指定または設定しなかったと思います。その結果、デフォルトでbinary/octet-streamになります。

ページをロードすると、ブラウザは、指定したスタイルシートがtext/css以外のコンテンツタイプで提供されているため、CSSファイルではないと見なし、スタイルシートを適用しません。

5
vezult

CSS/JSファイルのコンテンツタイプが正しくないため、IEでも同じ問題が発生しました。

RubyとAWSgemを使用している場合は、次のコードを使用してください。

s3 = Aws::S3Interface.new($s3[:s3_access_key_id],$s3[:s3_secret_access_key],{:multi_thread => true});
s3.put($s3[:s3_bucket],s3_path,file[:tempfile].read,{'x-amz-acl' => 'public-read', 'content-type' => 'text/css' })

S3メタデータの構文が異なることに注意してください。

'content-type' => 'text/css'
3
tiagomatos