私は友人のためにこのサイトを作成し、Amazon S3バケットにアップロードしました( http://ballard26.s3.amazonaws.com/index.html )そしてそのサイトにアクセスするとページは正しく読み込まれず、理由がわかりません。何か案は?
たとえば、stylesheet.css
が正しく読み込まれません。 http://ballard26.s3.amazonaws.com/stylesheet.css にアクセスすると、CSSとしてロードする代わりにファイルをダウンロードします。
アップロードしたファイルのmimeタイプ(HTTPコンテンツタイプヘッダー)を確認してください。 S3は必ずしも正しく設定するとは限りません。アップロードAPI呼び出しでそれらを設定する必要がある場合があります。一部のアップロードライブラリがこれを行います。
ファイルがS3からブラウザからダウンロードされたときにmimeタイプが正しくない場合、mimeタイプが正しく設定されていないと、常に正しくレンダリングされるとは限りません。
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の ブログ投稿 にあります。
ファイルをアップロードするときに、ファイルのmime-typeを適切に指定または設定しなかったと思います。その結果、デフォルトでbinary/octet-stream
になります。
ページをロードすると、ブラウザは、指定したスタイルシートがtext/css
以外のコンテンツタイプで提供されているため、CSSファイルではないと見なし、スタイルシートを適用しません。
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'