CloudFront × WordPressで高速・低コストなエンジニアブログを作ってみた

TABI LABO エンジニアの南です。

今回はエンジニアブログの最初の技術記事として、このブログをどのように作ったかについて解説したいと思います。

システム構成と狙い

システム構成を図にまとめてみました。

AWSとWordPressをフル活用してスピーディーに立ち上げつつ、WordPressの前段にCloudFrontを置くことで高速化とサーバーコスト軽減を図っています。

手順

KUSANAGIでEC2にWordPressを構築

EC2の立ち上げ

今回サーバーはEC2を利用します。AMIはWordPressが速くなると評判のKUSANAGIを選択します。

セキュリティグループの設定でhttp接続ができるようにしておきます。

インスタンスのパブリックIPはインスタンスを再起動すると変わってしまうので、Elastic IPでIPアドレスの固定化を行っておいてください。以降はIPアドレスが「***.***.***.***」に固定化された前提で進めていきます。

KUSANAGIの設定とWordPressのインストール

こちらのマニュアルを元にKUSANAGIの初期設定を行います。
基本的にマニュアル通りに設定していけば問題ないです。
私は言語等は日本語、WebサーバーはNginxを選択しました。

続いてこちらでKUSANAGIのプロビジョニングを行います。

ホスト名の設定はEC2のパブリックDNSを設定してください。Elastic IPが設定できていれば以下のようになっているはずです。

Let’s Encryptの設定は、後ほどAmazon Certificate Manager(ACM)で設定するので、ここではスキップすればOKです。

最後にこちらを元にWordPressの設定を行えば完了です。

CloudFrontの設定

Distributionの作成

次にCloudFrontの設定を行い、

http://tech.tabilabo.co.jp → CloudFront(********.cloudfront.net) →EC2(Origin)

という流れが作れるようにします。途中で関係性がわからなくなってきたら適宜最初の図を確認してみてください。

このブログはTABI LABOのコーポレートサイトのサブドメインを利用しているので、tech.tabilabo.co.jp ↔︎ ********.cloudfront.net という紐付けを行います。

サービス > CloudFront > Create Distribution > Web > Get Started から設定を行います。

設定項目は以下のように対応しています。

Origin Domain Name ec2-***-***-***-***.ap-northeast-1.compute.amazonaws.com
Alternate Domain Name tech.tabilabo.co.jp

その他の設定はこちらの記事を参考にさせてもらいました。

上記記事を参考に、管理画面(wp-admin/ 配下)と動的コンテンツであるphpの不具合が起こらないよう、これらをキャッシュをさせない設定も行っておいてください。

注意点として設定画面のGeneralタブの「Cache Based on Selected Request Headers」を「None」にしたままだとWordPressの投稿画面のエディターが強制的にテキストモードに固定化されてしまいます。

こちらの記事によると、CloudFrontを経由しているとUser-agentがCloudFrontになってしまうのが原因のようです。

具体的な設定はこちらを参考にしました。以下のように設定してみてください。

Route53でドメイン登録

諸々設定が完了してStatusがDeployedに変わったのを確認したら、
CloudFront Distributionsで先ほど作成したDistributionのDomain Name(********.cloudfront.net)を確認し、これをAlternate Domain Nameに設定したドメイン(tech.tabilabo.co.jp)と紐付けます。

Route 53 > Hosted zones > tabilabo.co.jp > Create Record Set から以下のように設定します。

これでhttp://tech.tabilabo.co.jp → CloudFront(********.cloudfront.net) →EC2(Origin)という流れができました。

ただ今の状態ではWordPress内のリンクが全てOrigin(ec2-***-***-***-***.ap-northeast-1.compute.amazonaws.com)のURLになってしまうので修正が必要なのですが、これはSSL対応の際に一緒に解決できるのでその時にやってしまいます。

トラブルシューティング

私がここまで設定するまで何度もNginxのwelcome画面が表示されたのですが、CloudFrontのキャッシュが影響していると考えキャッシュを削除したところ上手くいったので、思ったように動かない場合は以下の手順を参考にしてみてください。

作成したCloudFrontのDistribution > Invalidationsタブ > Create Invalidation > Object Pathsに「/*」を入力

Amazon Certificate ManagerでSSL対応

次にSSL対応を行いhttpsでアクセスできるようにします。
色々方法はありますが、今回はAmazon Certificate Manager(ACM)を利用します。

サービス > Certificate Manager

現時点でアジアパシフィック(東京)リージョンのACMで発行したSSL証明書はCloudFrontに登録できないので、画面右上から米国東部 (バージニア北部)リージョンを選択します。

証明書のリクエスト > *.tabilabo.co.jp を入力 > 確認とリクエスト

ドメインに登録されているアドレスにメールが届くので承認すれば完了です。

次にCloudFrontに証明書を登録します。

CloudFront > 作成したDistribution > Generalタブ > Edit > SSL Certificateの項目で「Custom SSL Certificate」にチェックして証明書を登録

httpでアクセスが来てもhttpsにリダイレクトさせる設定もしておきます。

CloudFront > 作成したDistribution > Behaviors > チェックを入れてEdit


WordPress側でもSSL対応の設定が必要になります。

1. EC2にssh接続して以下のコードをwp-config.phpの上部に書いてください。
最下部に記入したところ、管理画面にアクセスできなくなってしまったので気をつけてください。

$_SERVER['HTTPS'] = 'on';
$_ENV['HTTPS'] = 'on';

2. WordPress管理画面の設定から
http://ec2-***-***-***-***.ap-northeast-1.compute.amazonaws.com → https://tech.tabilabo.co.jpに変更

こうすることでWordPress内のリンクが全て設定したものに変わります。

これでSSL対応が完了しました。

S3の導入

画像等の保存はEC2ではなくS3で行うようにします。
サービス > S3 > バケットを作成する

WordPressの画像が作成したバケットに保存されるように設定を行います。
プラグインで便利なものがあったので今回は「WP Offload S3 Lite」を利用します。

これは「Amazon Web Services」というプラグインに依存しているので一緒にインストールしておいてください。
インストールが完了するとサイドメニューに以下のような項目が表示され、Access Keysを選択して設定画面に行くとwp-config.phpにDBI_AWS_ACCESS_KEY_IDDBI_AWS_SECRET_ACCESS_KEYを設定してくださいと言われるので、EC2に接続して設定します。

次に同じく左メニューから「S3 and CloudFront」を選択して、設定画面で先ほど作成したS3バケットを選択すれば完了です。

念のため メディア > 新規追加 から追加した画像がS3に保存されているか確認しておきましょう。

RDSの設定

データベースはRDSを利用します。
サービス > RDS > DBインスタンスの起動 > MySQLタブ > MySQL から設定を進めていきます。
以下の情報は後で使うので控えておいてください。

設定が完了してDBインスタンスが立ち上がったら、wp-config.phpを編集してデータがRDSに保存されるようにします。

DB_NAME 上記画像参照
DB_USER 上記画像参照
DB_PASSWORD 上記画像参照
DB_HOST  RDS詳細画面のエンドポイント

これでWordPressでRDSを使えるようになりました。

すでに管理者の追加などを行っていた場合は今まで使っていたDBをバックアップしてRDSにインポートしましょう。

1. sshでEC2に接続

2. mysqldump -u ユーザー名 -p DB名 > /tmp/db_backup_20180111

↑ ※ KUSANAGIのプロビジョニング(kusanagi provision kusanagi_html)をした時のDB情報です

3. mysql -u ユーザー名 -p -h RDSエンドポイント DB名 < /tmp/db_backup_20180111

↑ ※ RDS設定時の情報です

GoogleAnalytics対応

今回はGoogleAnalytics以外にもSEOに便利な機能が入っているAll in One SEO Packというプラグインを使います。

プラグインの設定ページで以下の項目にアナリティクスIDを入力するだけで完了です。
「トラッキングからユーザーを除外」にチェックを入れておくとより正確にトラッキングできるのでおすすめです。

まとめ

以上で全ての設定が完了しました!お疲れ様でした。

AWSをはじめほとんど使ったことがあるサービスでしたが、初期設定は初めてというものが多かったので個人的にかなり勉強になりました。

自社のエンジニアブログや個人ブログを作ろうと思っている方の参考になれば嬉しいです。

=====================================

TABI LABOでは一緒に働いてくれる仲間を絶賛募集中です。