べにやまぶろぐ

技術寄りの話を書くつもり

StaticPress で静的化した WordPress を S3 に置いてデザインが崩れた時は css の Content-Type を確認しよう

大学時代の研究をまとめたサイトを WordPress で構築して EC2 でホストしてたのですが、

  • ラトビアあたりからの不正ログイン試行のアラートが Wordfence から頻繁に送られてくるようになった
  • そもそも更新もしないし PV も少ないし micro インスタンスでも運用するコストが見合わない

という理由で静的化プラグインの StaticPress で静的化して S3 から配信することにしました。

今回作業したのはこちらのサイト。

beniyama.com

具体的な作業内容はまたどこかで書ければと思うのですが、諸々の設定が終わった後はまったのがデザイン崩れ。崩れというより css が当たっていない。

f:id:beniyama:20160104234324p:plain

テーマが対応していないとダメだ、という記事も見かけたのですが結論としては css のファイルが S3 アップロード時に Content-Type:text/plain になってしまっていたのが原因。Content-Type:text/css に変更することで問題なくデザインが適用されました。

/tmp/static 以下に StaticPress で静的 html を吐いたとして、

s3cmd put -r --acl-public /tmp/static/* s3://<バケット名>

などとするとバケットにファイルが転送されますが、そのままだと css ファイルのメタデータは下記のようになってしまいます。

f:id:beniyama:20160104235300p:plain

s3cmd でバケット内のファイルのメタデータを一括変更することが可能ですので、続けて

s3cmd modify --add-header='Content-Type':'text/css' s3://<バケット名>/*/*.css

などとすればバケット内の全 css の Content-Type が書き換わります。

f:id:beniyama:20160105002652p:plain

これで WordPress と同じデザインが再現されました。

ちなみに余談ですが、WordPress のプラグイン StaticPress でハマった話 - わりと技術的な話 に書かれている

記事のタイトルは 〜.html というリンクになっているがアクセスするとディレクトリになってしまうという事だった。

という問題にもはまり(ページ名.html というディレクトリができてしまう)、試行錯誤した結果、パーマリンク設定のカスタム構造は

http://beniyama.com/%category%/%postname%/

で落ち着きました(%postname%.html などとしなくて良かった)。

参考)