DPW

StaticPressでS3にアップロードした際にスタイルが崩れてしまう

WordPressを静的ファイルにできるStaticpressという便利なプラグインがあります。

さらに、このStaticpressの拡張で、生成した静的ファイルたちをaws S3にアップロードできるstaticpress-s3というものがあります。

これらを利用すれば、どんなトラヒックにも耐え、しかもセキュアな静的なサイトを構築することが出来ます。

しかも、使い慣れたWordpressの投稿画面や、作りこんだテーマファイルなどの資産はそのまま流用出来ます。

ただし、Cotact Form 7といった問い合わせプラグインや、投票機能、人気記事といった動的ページの類は利用できません。 (他のASPサービスを利用すれば、業務用件を満たすことはできると思います。)

そんなstaticpress-s3で、スタイルが崩れてしまう不具合が発生しました。

ソースを見てみるとCSSのパスに間違いはないのですが、クリックしてみるとブラウザがスタイルシートと認識していません。

さらに、アップロードしたS3バケットのファイルを見てみると、Content-Typeが「text/x-asm」となっていました。

どうやら、このせいでブラウザがスタイルシートと認識してくれなかったようです。

AWSのコンソールから、ファイルのプロパティを編集して、Content-Typeを「text/css」に修正すればひとまず改善されます。

しかし、スタイルシートを変更するたびにこの作業をしなければなりません。

これは面倒くさい。

そこで、プラグインのS3アップロード部分のプログラムがおかしいのではないかと推測し、ソースをみて手を加えることにしました。

どうやら、class-S3_helper.php の198行目あたりがポイントのようです。

この前にFinfoでmime_typeを取得しているのですが、それがtext/x-asmだったために、不適切なContent-Typeが設定されてしまっています。

これを回避する手段として、198行目のifを以下に修正しました。

これで適切に動作しました。

ただ、もう少し詳しく調べたところ、Finfoの部分を修正してもいけそうです。

こちらに、

一般的には、独自の magic データベースを使う必要がある場合を除いて、 組み込みの magic データベースを使うのが一番いい方法です (magic_file を省略し、環境変数 MAGIC も設定しないようにします)。

と書かれているのですが、staticpress-s3ではclass-S3_helper.phpの188行目のとおり、組み込みのMAGICを極力使用しない実装になっています。

こちらの、magic_file部分を以下のとおり空文字列に修正しました。

これも適切に動作しました。

同じ事象で困っている方がいらっしゃったら一度お試しください。