WordPressをHTML化してみた
割と大変だった…。
今回、試したインフラ構成はこんな感じになります。
力を入れた部分
静的出力をどうするか、どうすればいいか
力を入れた部分はそこそこあるのですが、静的ファイルの生成とCloudFrontを使う部分です。
正直、すぐできるだろ…って甘く見てたらダメでした。
WordPressの静的出力においては、どのプラグインから出力するか？が割と問題で、WP Static Site Generatorが一番良さそうです。
ただこちらは、IAMユーザを払い出しが必要なので今はインストールのみに留めています。
近い将来、改善要望なり開発としてIAMロールでできるようにしてほしい旨を伝えるつもりです。
その間に使えそうだったのがSimply Staticが操作性良かったように思います。
静的出力する上で、各種設定が正しく出力できるか診断できます。
この時に自サイトがどうしても403でアクセス拒否されるのでなんでだ？と思ってたのですが、DBに設定されているsiteurlを自分自身にする必要があったところです。
S3用に用意したドメインを設定してたのですが、そんな余計な配慮はしなくて良かったようです（笑）
mysql> SELECT * FROM wopr_options WHERE option_name IN (‘home’,’siteurl’); +———–+————-+—————————+———-+
これが正しい
| option_id | option_name | option_value | autoload |
+———–+————-+—————————+———-+
| 2 | home | https://xxxx.com | yes |
| 1 | siteurl | https://xxxx.com | yes |
+———–+————-+—————————+———-+
mysql> SELECT * FROM wopr_options WHERE option_name IN (‘home’,’siteurl’); +———–+————-+—————————+———-+
これは間違い。
| option_id | option_name | option_value | autoload |
+———–+————-+—————————+———-+
| 2 | home | https://xxxx.com | yes |
| 1 | siteurl | https://xxxx.com | yes |
+———–+————-+—————————+———-+
Simply Static側で出力用のリンク先URLを閲覧したいURL(CloudFrontに設定しているドメイン)に変更し、後は出力したいファイルをガシガシ出していきました。
ただし、1点気をつけたのはセキュリティグループです。
PrivateIPでアクセスし、静的出力しようとするのですが、ポートがELBからのみのアクセスに限定しているのでうまく出力できませんでした。
そこでRoute53にeip.xxxx.comみたいな形でレコード登録しています。
さらにhostnameもeip.xxxx.comに変更し、Simply Static内で利用されているgethostname()はEIPを取ってくるようになります。
EIPを割り当てているのでELBのセキュリティグループも緩和しやすい形になっています。
この辺がなかなかどうしたもんかなぁと苦労し、力を入れた部分ですね。
CloudFrontと/サブディレクトリ/index.htmlへのアクセス
CloudFrontは今までどんなに頑張ってもサブディレクトリに対するindex.htmlへのアクセスは実現できませんでした。
どうするかなーって悩んだ末、最近リリースされたLambda Edgeを使ってみることにしました。
っていうか、タイムリーすぎてビックリしたのですが、この昨日なかった実現できませんでした（笑）
詳細はクラスメソッドさんの記事が参考になりましたので、そのまま流用していますが、そのまま利用することが可能です。
できた！S3 オリジンへの直接アクセス制限と、インデックスドキュメント機能を共存させる方法
まだこれだけでは不足しており、WordPressから生成する際のhtmlですが、リンクのパーマリンクって.htmlで終わらせることと、サブディレクトリに対しては /(スラッシュ) でのアクセスが必要です。
そこで 子テーマを作成し、functions.phpに修正を入れます。
子テーマの作り方で必要最低限の準備が必要な内容は以下の通りです。
– {子テーマサブディレクトリ}/style.css
– {子テーマサブディレクトリ}/functions.php
子テーマの作成方法はこんな感じです。
以下は複数のcssがある場合にまとめて読んでくれる方法です。
末尾にある add_slash_uri_end が末尾に /(スラッシュ) を埋め込んでくれるコードです。
> vim wp-content/theme/{子テーマディレクトリ}/functions.php
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘parent-style’)
);
}
function use_parent_theme_stylesheet() {
// Use the parent theme's stylesheet
return get_template_directory_uri() . '/style.css';
}
function my_theme_styles() {
$themeVersion = wp_get_theme()->get('Version');
// Enqueue our style.css with our own version
wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/style.css',
array(), $themeVersion);
}
// Filter get_stylesheet_uri() to return the parent theme's stylesheet
add_filter('stylesheet_uri', 'use_parent_theme_stylesheet');
// Enqueue this theme's scripts and styles (after parent theme)
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);
function add_slash_uri_end($uri, $type) {
if ($type != 'single') {
$uri = trailingslashit($uri);
}
return $uri;
}
add_filter('user_trailingslashit', 'add_slash_uri_end', 10, 2);cssがstyle.cssしかない場合は、コードが短くなります。
> vim wp-content/theme/{子テーマディレクトリ}/functions.php
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘parent-style’)
);
}
function add_slash_uri_end($uri, $type) {
if ($type != 'single') {
$uri = trailingslashit($uri);
}
return $uri;
}
add_filter('user_trailingslashit', 'add_slash_uri_end', 10, 2);style.css側の記述に必要な内容としてはこんな感じです
> vim wp-content/theme/{子テーマサブディレクトリ}/style.css
/*
Theme Name: {テーマの正式な名称} Child
Template: {テーマの正式な名称}
*/詳細はここに記載があります。
– https://wordpress.stackexchange.com/posts/182023/revisions
– http://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E
半自動化作業
Simply Staticなどで生成した後の作業としては、自動的にs3とCloudFrontにデプロイしたい、という部分ですが、cronでやるのが楽かなーということで、こういうスクリプトを作成しました。
> vim /usr/local/bin/updateS3andCloudFront.sh
#!/bin/sh
aws s3 sync --delete /var/www/html/wp-content/simply_static/ s3://{bucket name}/
aws cloudfront create-invalidation --distribution-id {CloudFront Distibution ID} --paths "/*"> vim /etc/cron.d/updateS3andCloudFront
0 */2 * * * root /usr/local/bin/updateS3andCloudFront.sh最後に
概ねやりたいことはできました。
まだやれていない部分として、Markdownによる記述とメールによる投稿、WP Static Site Generatorへの改善依頼ですね。
この辺ができれば満足かなーというところですね。
コスト最適化できたのかな？（笑）
1月から2月の請求金額でどれぐらいかかるようになったかわかるようになると思います。
今月は13日ぐらいから作ったから3000円ぐらいですが、どれぐらいになるやら…。