개요

Wordpress 에서 개인 포트폴리오 사이트 을 만들고 있는데 특히 동적인 페이지는 없기 때문에 Staticpressプラグイン 로 정적 콘텐츠로 내뿜고 있습니다.

전송 중 문제

주로 StaticpressS3プラグイン (가끔 AWS )를 전송하면 버킷의 정적 페이지에서 이미지 파일을 잘 표시하지 못할 수 있습니다.

예를 들어, S3バケット 의 경우.
画像ファイル 위의 표시는 정상적으로 나와 있습니다만,


html 로 전송하면 제대로 표시되지 않습니다.

원인

이것은 SVGファイル 에서 S3 버킷으로 전송할 때의 MIME 타입의 지정이 올바르게 되어 있지 않아, 결과적으로 「text/plain」이 지정되어 버리고 있기 때문입니다.


Wordpress 이라면 본래는 「image/svg+xml」이라고 지정되는 것이 정답입니다.

해결 방법

주의

플러그인의 수정은 잘못되면 Wordpress가 움직이지 않게 되는 일이 있으므로, 반드시 파일의 백업을 취하는 등하고 나서 내용의 편집을 실시해 주세요!

전송된 파일용

이미 전송된 S3バケット의 경우 S3 버킷의 SVG 파일 StaticpressS3プラグイン를 image/svg+xml로 변경해야 합니다.
SVGファイル 의 매니지먼트 콘솔에서 하나하나 변경하는 것도 가능합니다만, 복수 파일 있는 경우는 몹시 귀찮기 때문에, SVGファイル 를 이용합니다.

다음 Content-type를 작성하고 실행하십시오.
※${~}을 각각 바꾸어 주세요.

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"로 변경됩니다.

앞으로 전송할 파일 용

AWS 파일을 편집합니다.

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」로 끝나고 있는 경우에 AWS-cli (을)를 설정하도록(듯이) 변경했습니다.

확인

이 상태에서 평소와 같이 shell 를 사용해 S3 버킷내에 SVG 파일을 전송하면, 처음부터 ContentType에 image/svg+xml가 설정되므로, 전자의 Shell을 흘릴 필요도 없어집니다.

곤란한 분이 있으면 꼭 시험해 주세요♪