WordPressコンテンツをStaticPress S3プラグインを使用してS3+CloudFrontで配信する方法を記載します。自力で構築するとエラーなどではまることも多いですが、本記事の通りに環境構築することで、ほとんどのエラーを回避できます。
本記事の通りに構築することで、以下のようなエラーを回避できます。
静的ファイルが正しく出力されない
S3に静的ファイルが転送されない
記事URLに日本語が含まれる場合、日本語が文字化けする
次に、StaticPress S3プラグインを使用してS3+CloudFrontで配信することのメリットについて触れておきます。以下のメリットがあります。
低コストで安定したサイト運用ができる
→急なアクセス増にも耐えられ、かつ、安価です
高速なサイトを構築できる
→サイトの速度向上はSEO的にも有利です
訪問者がWordPressに直接アクセスしないのでセキュアになります
→WordPressのセキュリティリスクについては以下の記事をご参照ください
逆にデメリットも上げておきます
セットアップが難しい
→StaticPress S3のセットアップは、一般的なWordPressプラグインよりも複雑です
→本記事を参照し、構築すればきっと大丈夫です
静的ファイルに変換する(HTMLに変換する)処理に時間がかかる
→大量の記事を持つサイトほど、変換に時間がかかります。
まず、ゴールイメージです。
ゴールイメージ
最終的なゴールイメージのAWS構成図は以下の通りです。
次に、環境構築で使用するものをリストアップしていきます!
使うもの
まず、使用するものをリストアップしていきます。
AWSリソース
使用するAWSリソースは以下の通りです。
EC2
→EC2にWordPressをインストールします
S3
→S3にWord Pressを静的コンテンツ化したHTMLを格納します
CloudFront
→S3に格納した静的コンテンツ化したHTMLをCloud Front経由で配信します
Word Pressプラグイン
使用するWord Pressプラグインは以下の通りです。
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の設定の詳細は以下の記事をご参照ください
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設定画面で以下の設定を行う
静的サイト URL:Cloud 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が正常に動作しない場合の対処方法を記載します。
EC2の出力先ディレクトリにコンテンツが生成されない
S3にコンテンツがコピーされない
固定記事などが表示されない(403エラーとなる)ケースがある
画像メディアのみS3にコピーされない
ドメインが静的サイトURLに置き換わらない
サイトマップが出力されない
EC2の出力先ディレクトリにコンテンツが生成されない
- ドキュメントルートの権限を確認する
- Apacheユーザで書き込み可能である必要がある
- 以下のコマンドを実行します。
- Apacheユーザで書き込み可能である必要がある
chown -R apache:apache /wordpress_home
S3にコンテンツがコピーされない
- AWSコンソールからS3のバケットを選択
- アクセス許可タブを開く
- オブジェクト所有者を編集
- ACL無効 (推奨)に更新し、再度、Word PressのStatic Press画面から「再構築」を行う
- オブジェクト所有者を編集
- アクセス許可タブを開く
固定記事などが表示されない(403エラーとなる)ケースがある
- 以下の記事をご参照ください
画像メディアのみS3にコピーされない
- 日本語やスペースが入っていると正常に動作しない模様
- 画像のファイル名を英語+スペースなしに変更して再度アップロードしてから、StaticPressで再構築する
ドメインが静的サイトURLに置き換わらない
- 以下の記事をご参照ください
サイトマップが出力されない
- 以下の記事をご参照ください
追加で設定しておくと良いこと
正常に動いているけど、追加で設定しておくと良いことについて記載します!
WordPressの置いてあるEC2サーバでBasic認証をかける
不要なページの出力を止める
CloudFrontのキャッシュを簡単に消せるようにする
WordPressの置いてあるEC2サーバでBasic認証をかける
- 以下の記事をご参照ください
不要なページの出力を止める
- 以下の記事をご参照ください
CloudFrontのキャッシュを簡単に消せるようにする
- 以下の記事をご参照ください