【日本語URL対応版】WordPressのコンテンツを StaticPress S3プラグインを使用して配信する方法

WordPressコンテンツをStaticPress S3プラグインを使用してS3+CloudFrontで配信する方法を記載します。自力で構築するとエラーなどではまることも多いですが、本記事の通りに環境構築することで、ほとんどのエラーを回避できます。

本記事の通りに構築することで、以下のようなエラーを回避できます。

回避できるエラー

静的ファイルが正しく出力されない
S3に静的ファイルが転送されない
記事URLに日本語が含まれる場合、日本語が文字化けする

次に、StaticPress S3プラグインを使用してS3+CloudFrontで配信することのメリットについて触れておきます。以下のメリットがあります。

メリット

低コストで安定したサイト運用ができる
→急なアクセス増にも耐えられ、かつ、安価です
高速なサイトを構築できる
→サイトの速度向上はSEO的にも有利です
訪問者がWordPressに直接アクセスしないのでセキュアになります
→WordPressのセキュリティリスクについては以下の記事をご参照ください

WordPressのセキュリティリスクとセキュリティ対策
WordPressはセキュリティ対策を取らないとリスクが高いと思っています。 セキュリティ対策としてはセキュリティプラグインの導入などがあると思いますが、一番安全なのはStaticPress S3を使用してコンテンツをS3+CloudFrontで配信し、WordPressが動いているサーバを隠してしまう対策です。

逆にデメリットも上げておきます

デメリット

セットアップが難しい
→StaticPress S3のセットアップは、一般的なWordPressプラグインよりも複雑です
→本記事を参照し、構築すればきっと大丈夫です
静的ファイルに変換する(HTMLに変換する)処理に時間がかかる
→大量の記事を持つサイトほど、変換に時間がかかります。

 

まず、ゴールイメージです。

スポンサーリンク

ゴールイメージ

最終的なゴールイメージのAWS構成図は以下の通りです。

StaticPress S3+S3+CloudFront

StaticPress S3+S3+CloudFront

次に、環境構築で使用するものをリストアップしていきます!

使うもの

まず、使用するものをリストアップしていきます。

AWSリソース

使用するAWSリソースは以下の通りです。

使用するAWSリソース

EC2
→EC2にWordPressをインストールします
S3
→S3にWord Pressを静的コンテンツ化したHTMLを格納します
CloudFront
→S3に格納した静的コンテンツ化したHTMLをCloud Front経由で配信します

Word Pressプラグイン

使用するWord Pressプラグインは以下の通りです。

使用するWord Pressプラグイン/span>

Static Press
→Static Pressを使用してWord PressコンテンツをHTML化する
StaticPress S3
→StaticPress S3を使用してHTMLをS3に転送する

それでは、環境構築していきます!

構築作業

具体的には以下の作業をしていきます!

環境構築

S3バケット作成
CloudFrontディストリビューション作成
CloudFrontとS3の接続設定
EC2作成&設定
→ロール設定
→WordPress起動に必要なミドルウェアのインストール
→WordPressインストール
→WordPressプラグインインストール&設定

S3

  • 適切なバケット名でバケットを新規作成する

Cloud Front

  • ディストリビューションを新規作成する
    • オリジンは作成したS3バケットを指定する

CloudFrontとS3の設定の詳細

CloudFrontとS3の設定の詳細は以下の記事をご参照ください

AWS CloudFrontからS3へのアクセス制御をOACを使って正しく設定する
S3のコンテンツをCloudFront経由で配信する際、CloudFrontからS3へのアクセス制御をOAC(Origin access control settings)を使って正しく設定する方法を記載。OACは現在推奨されている設定なので、S3+CloudFrontでサイト公開する際のスタンダードな方法です。

EC2

次の設定でEC2インスタンスを起動します。

EC2インスタンス起動設定

OS:AmazonLinux2
スペック:t2.micro(もっと性能が良いインスタンスタイプを選択しても大丈夫です)
ロール:以下に記載のS3にアクセス可能なロールを割り当てる。


// EC2に割り当てが必要な権限(ポリシー)
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "cloudfront:CreateInvalidation",
                "s3:ListBucket",
                "s3:PutObject"
            ],
            "Resource": "*"
        }
    ]
}


  • 次にyum updateしておく
sudo yum -y update

Apacheインストール & 設定

  • Apacheインストール
sudo yum -y install httpd
  • Apacheのconfファイルを編集する

Apacheのconfファイルの場所:/etc/httpd/conf/httpd.conf

次の設定をhttpd.confの末尾に追記する

LoadModule 
rewrite_module modules/mod_rewrite.so

<Directory "/var/www/html/">

AllowOverride All

</Directory>
  • Apacheを起動する
sudo service httpd start
  • 今後自動で立ち上がるように設定する
sudo chkconfig httpd on

PHPインストール

  • 管理者権限に切り替えておく
sudo su
  • 時間の設定
    • ロンドンの時間になっているので日本時間に修正
ln -sf /usr/share/zoneinfo/Japan /etc/localtime
  • dateコマンドで日本時間になっているか確認する
date
  • PHPをインストールする
amazon-linux-extras enable php7.4


yum clean metadata

yum install php


yum install php-mbstring
  • apacheを再起動
service httpd restart

Apacheとphpの動作確認

  • 動作確認用ファイルの作成
 vi /var/www/html/index.php
  • 動作確認用ファイルの中身
<?php


echo"test!!";
  • 動作確認

以下の動作確認をします!

ブラウザで動作確認する

http://ドメイン/index.phpアクセスする
→ブラウザに「test!!」と表示されればOK!

 

MySQLインストール

  • yumでMySQLをインストールする
yum remove mariadb-libs


rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022


yum localinstall http://dev.mysql.com/get/mysql57-community-release-el7-7.noarch.rpm


yum -y install mysql-community-server


yum install php-xml -y
  • phpからMySQLをコントロールするため追加プログラムを入れる
yum install -y php-mysqlnd
  • MySQLを起動
service mysqld start
  • MySQLの設定
mysql_secure_installation

初期パスワードを聞かれる

初期パスワードは/var/log/mysqld.logに吐かれているので、それを入力する

A temporary password is generated for root@localhost: [初期パスワード]

WordPressインストール

cd /var/www/html/


curl -O https://ja.wordpress.org/latest-ja.tar.gz

tar
xvf latest-ja.tar.gz


chown -R apache:apache wordpress


rm -f latest-ja.tar.gz

MySQLのデータベース作成

mysql -u root -p
CREATE DATABASE wordpress;

StaticPress S3設定

  • まずはGitをインストールする
yum install git-all
  • StaticPress S3をインストールする
cd wordpress/wp-content/plugins/

git clone https://github.com/megumiteam/staticpress-s3.git

chown -R apache:apache staticpress-s3

  • ソース修正が必要なため、修正する

修正①:wp-content/plugins/staticpress-s3/includes/class-S3_helper.php

変更前

$magic_file = '/usr/share/misc/magic';
変更後

$magic_file = '/etc/httpd/conf/magic';

ソース修正②:wp-content/plugins/staticpress-s3/includes/class-S3_helper.php
18行目あたりにある、「__construct」をする
「Access Key」と「Sercret Key」の入力チェックを行っているif文をコメントアウト

修正後ソース

function __construct($access_key = null, $secret_key = null, $region = null) {

// if ($access_key && $secret_key) {

$this->init_s3($access_key, $secret_key, $region);

// }

}

StaticPressをインストールする

「http://ドメイン/wordpress/」にアクセスし、

WordPressの初期設定を行い、

プラグインStaticPressをインストールして有効化する。

ついでにStaticPress S3も有効化しておく。

StaticPressの設定をする

StaticPress設定画面で以下の設定を行う

StaticPress設定

静的サイト URLCloud Frontのドメインを入力
出力先ディレクトリ
(ドキュメントルート):「/wordpress_home/」を入力
S3 Bucket
:作成したバケットを選択
AWS Access Key:EC2のロールを使用するため、未入力とする
AWS Secret Key:EC2のロールを使用するため、未入力とする
AWS Region:「AP_NORTHEAST_1(東京リージョン)」を選択

 

次に以下のコマンドで静的HTMLファイルの出力先ディレクトリの権限設定をする

mkdir /wordpress_home/

chown -R apache:apache /wordpress_home
  • ソース修正が必要なため修正する

修正ソース①:wp-content/plugins/staticpress/includes/class-static_press_admin.php

// 以下のコードを追加する
「if( !($('li:last-child', ul).offset() === void 0) )」を追加する


修正後ソース 312行目辺り
if( !($('li:last-child', ul).offset() === void 0) )//追加

$('html,body').animate({scrollTop: $('li:last-child', ul).offset().top},'slow');

修正ソース②:wp-content/plugins/staticpress/includes/class-static_press.php

// 変更前 以下をコメントアウト

//$permalink = get_permalink($post->ID);

//if (is_wp_error($permalink))

//      continue;

//$count = 1;

// 変更後 コメントアウトした箇所に以下を追記
$permalink = get_permalink($post->ID);
if (is_wp_error($permalink))continue;
if (preg_match('/.*\.html\/.*/', $permalink, $m)) 
{continue;}
$count = 1;
  • WordPressのStaticPress画面から「再構築」を実施

 

Word Pressのパーマリンク設定の変更

WordPressの設定->パーマリンク画面を開き、カスタム構造を選択し、「/%postname%.html」を入力する

 

MySQLの再設定をする(日本語文字化け対策)

このままですと投稿名が日本語の場合に文字化けするので、テーブルの文字コードを変更する

  • /etc/my.cnfの末尾に以下を追記
character-set-server=utf8


sql_mode=ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION,ALLOW_INVALID_DATES
  • MySQL再起動する
service mysqld restart
  • MySQLに接続し、wp_urlsテーブルの文字コードを変更する
 mysql -uroot -p
 use wordpress;


ALTER TABLE wp_urls CONVERT TO CHARACTER SET utf8;

S3にHTMLを転送し、Cloud Frontで配信できるようにする

  • WordPressのStaticPress画面から「再構築」を実施
  • CloudFrontのドメインにアクセスし、WordPressコンテンツが見れれば成功!

StaticPressがうまく動かない場合

StaticPressが正常に動作しない場合の対処方法を記載します。

StaticPressが動作しない時の対処法

EC2の出力先ディレクトリにコンテンツが生成されない
S3にコンテンツがコピーされない
固定記事などが表示されない(403エラーとなる)ケースがある
画像メディアのみS3にコピーされない
ドメインが静的サイトURLに置き換わらない
サイトマップが出力されない

EC2の出力先ディレクトリにコンテンツが生成されない

  • ドキュメントルートの権限を確認する
    • Apacheユーザで書き込み可能である必要がある
      • 以下のコマンドを実行します。

chown -R apache:apache /wordpress_home

S3にコンテンツがコピーされない

  • AWSコンソールからS3のバケットを選択
    • アクセス許可タブを開く
      • オブジェクト所有者を編集
        • ACL無効 (推奨)に更新し、再度、Word PressのStatic Press画面から「再構築」を行う

固定記事などが表示されない(403エラーとなる)ケースがある

  • 以下の記事をご参照ください
WordPressのプラグインStaticPress S3で固定記事などが表示されない(403エラー)
WordPressのプラグインStaticPress S3で固定記事などが表示されない(403エラーが発生する)場合の対処法。エラー・表示されない原因と対処法ほうについて記載します。対処方法はStaticPressのPHPプログラムを修正する方法もありますが、CloudFrontの関数を使用する方法を記載しています

画像メディアのみS3にコピーされない

  • 日本語やスペースが入っていると正常に動作しない模様
    • 画像のファイル名を英語+スペースなしに変更して再度アップロードしてから、StaticPressで再構築する

ドメインが静的サイトURLに置き換わらない

  • 以下の記事をご参照ください
StaticPressでドメインが静的サイト URLに置換されない時の対処法(WordPress)
WordPressのプラグインStaticPressを使用しているが、 StaticPressで生成された静的ファイルのリンクURLが、StaticPressで設定した「静的サイト URL」に置き換わらないことがありますが、これの対処法を記載しています。対処法はStaticPressのソース修正となります。

サイトマップが出力されない

  • 以下の記事をご参照ください
WordPressのStaticPressでサイトマップ(sitemap.xml)が出力されない時の対応方法
WordPressのプラグインStaticPressでサイトマップ(sitemap.xml)が出力されない時の対方法を記載。 2つの対応をすることでサイトマップ(sitemap.xml)が出力されるようになります。 1.StaticPressのソース修正/2.Google XML Sitemapsプラグインを入れる

追加で設定しておくと良いこと

正常に動いているけど、追加で設定しておくと良いことについて記載します!

オススメの追加設定

WordPressの置いてあるEC2サーバでBasic認証をかける
不要なページの出力を止める
CloudFrontのキャッシュを簡単に消せるようにする

WordPressの置いてあるEC2サーバでBasic認証をかける

  • 以下の記事をご参照ください
WordPressのプラグインStaticPress S3でBasic認証を使う
StaticPress利用時のBasic認証のかけ方について記載。StaticPressで静的HTMLを生成して、StaticPress S3で静的ファイルをS3に転送して、配信する場合、Basic認証をかけることをお勧めします。Basic認証をかけるにはStaticPressのソース修正も必要となります

不要なページの出力を止める

  • 以下の記事をご参照ください
WordPressのプラグインStaticPressで不要な静的ファイルが生成されないようにする
WordPressのプラグインStaticPressで不要な静的ファイルが生成されないようにする方法について記載。不要なファイルを生成されないようにすることで、ディスク容量の削減やStaticPressでの再構築時間の短縮が可能。StaticPressのソースコードを修正することで不要なファイルが生成されなくなります。

CloudFrontのキャッシュを簡単に消せるようにする

  • 以下の記事をご参照ください
StaticPress S3と共存できるWordPressプラグインClear CloudFront Cacheを公開!
StaticPress S3と共存できるWordPressプラグイン「Clear CloudFront Cache」を公開! WordPressコンテンツをCloudFront経由で配信している場合に使えるプラグイン。公開したプラグイン「Clear CloudFront Cache」はWP管理画面からインストール可能