Wordpress + Staticpress(S3) + S3 で吐き出したファイルがうまく表示されない場合の対処法

概要

Wordpressで 個人ポートフォリオサイト を作っているのですが、特に動的なページは無いのでStaticpressプラグインで静的コンテンツに吐き出してStaticpressS3プラグインでAWSのS3バケットに転送して公開しています。

転送時の問題

主に画像ファイル(たまにhtml)を転送すると、バケット上の静的ページからは画像ファイルがうまく表示出来ない場合があります。

例えば、SVGファイルの場合。

Wordpress上の表示は正常に出ていますが、

S3バケットに転送するとうまく表示されません。

原因

これはStaticpressS3プラグインにて、S3バケットに転送する際のMIMEタイプの指定が正しくされておらず、結果として「text/plain」が指定されてしまっているのが原因です。

SVGファイルであるなら本来は「image/svg+xml」と指定されるのが正解です。

解決方法

注意

プラグインの修正は間違えるとWordpressが動かなくなることがあるので、必ずファイルのバックアップを取る等してから内容の編集を行うようにしてください！

転送済みファイル向け

すでに転送済みのSVGファイルについては、S3バケット内のSVGファイルのContent-typeをimage/svg+xmlに変更する必要があります。

AWSのマネジメントコンソールから一つ一つ変更することも可能ですが、複数ファイルある場合はすごくめんどくさいので、AWS-cliを利用します。

以下のshellを作成し、実行してください。
※${~}をそれぞれ置換してください。

updateContentType.sh

BUCKETNAME=${バケット名}
REGEX="image/svg\+xml";
for KEY in $(aws s3api list-objects　　--profile ${profile} --bucket $BUCKETNAME  --query "Contents[].[Key]" --output text | grep "\.svg$")
do
  RESULT=`aws s3api head-object　　--profile ${profile} --bucket $BUCKETNAME  --key $KEY  --query "[ContentType]"  --output text`
  if [[ $RESULT =~ $REGEX ]] ;
  then
    continue;
  fi
  aws s3api copy-object　　--profile ${profile} --bucket $BUCKETNAME --acl public-read --copy-source $BUCKETNAME/$KEY --key $KEY  --metadata-directive "REPLACE" --content-type $REGEX
done;

これを実行することでS3バケット内の全てのSVGファイルのContentTypeが「image/svg+xml」に変わります。

これから転送するファイル向け

StaticpressS3プラグインのファイルを編集します。

staticpress-s3/includes/class-S3_helper.php

・・・
private function mime_type($filename){
        static $info;
        if (!isset($info)) {
            //$magic_file = '/usr/share/misc/magic';
                        $magic_file = '/etc/httpd/conf/magic';
            $info = file_exists($magic_file)
            ? new FInfo(FILEINFO_MIME_TYPE, $magic_file)
            : new FInfo(FILEINFO_MIME_TYPE);
        }
        $mime_type =
            file_exists($filename)
            ? $info->file($filename)
            : false;

        if ( $mime_type == 'text/plain') {
            if (preg_match('/\.css$/i', $filename))
                $mime_type = 'text/css';
            else if (preg_match('/\.js$/i', $filename))
                $mime_type = 'application/x-javascript';
            else if (preg_match('/\.html?$/i', $filename))
                $mime_type = 'text/html';
            else if (preg_match('/\.xml$/i', $filename))
                $mime_type = 'application/xml';
            else if (preg_match('/\.svg$/i', $filename))// ★追加
                $mime_type = 'image/svg+xml';// ★追加
        }

        return $mime_type;
    }
・・・

上記のようにファイル名が「.svg」で終わっている場合にMIMEタイプを設定するように変更しました。

確認

この状態で通常通りStaticpressを使ってS3バケット内にSVGファイルを転送すると、最初からContentTypeにimage/svg+xmlが設定されるので、前者のShellを流す必要もなくなります。

お困りの方がいたら是非お試しください♪