弊社Webサイトは創業以来WordPressで構築しています。弊社と言いつつその実態は法人化しただけのフリーランスといった感じなので、創業以前から書いているブログをそのまま持ってきて、会社っぽいページを付け加えただけです。それでも、使用しているテーマ(Lightning)の出来が良くて、良さげな企業サイトになっているのはありがたいところです。
そんな弊社のWordPressは、VPSを使ってみたり、WordPressのホスティングサービスを使ってみたりで、その時々の仕事に応じて、環境を移したりしています。「その時々の仕事に応じて」というのは、結構、サーバ構築や運営に関する仕事があるので、その辺の技術知識を吸収したり、スキルを上げるには、自分のサイトを運営してみるのが一番だったりするからなんですね。
そんなわけでAWS
以前もAWSで運営していたことはあったのですが、今回、AWS度を高めた状態でAWSに再度持ってくることにしました。
具体的に言えば、こんな構成です。
- WebサーバとPHPの実行環境:EC2(KUSANAGIを使う)
- DBサーバ:EC2
- メディアファイルの配置:S3
- メディアファイルの配信:CloudFront
まぁ、DBサーバもRDSにしたいところだとか、Webサーバを冗長構成にしてELBでロードバランスとかするとさらに格好良いのですが、弊社サイト程度のアクセスでそこまでのコストはかけられないので、EC2中心ではあります(t2.microでも良さそうですが、KUSANAGIの推奨だし他の用途も出てくるかもなのでt2.mediumにしてみました)。
EC2でのWordPress運用はこれといって珍しいことではないし、それは以前もやっていたので、今回のポイントはS3とCloudFrontということになるでしょう。
ちなみに、KUSANAGIというのはWordPressを高速に動作させるための環境が整ったイメージのことで、AWS向けにもAMIがマーケットプレイスで配布されています(KUSANAGI自体は無料で使えます)。
構成
こんな感じでメディアファイルを取り回しています。
- WordPressにメディアファイルをアップロードすると、通常どおり
wp-content/uploads
配下に配置されるが、wp-content/uploads
の実体はS3 - EC2とS3の間はs3fuseでマウントされている
- S3だけでもメディアファイルを配信することはできるが、独自ドメイン(HTTPS)で運用したいので、S3とCloudFrontを連携させる
- CloudFrontは、
https://media.inoccu.com
というURLでアクセスできるようにしており、SSL証明書はAWS Certified Manager(ACM)を使って無料で作成
やり方
基本的には、こちらのサイトを参考に作業を進めました。
S3にバケットを作成し、Webアクセス可能にする
バケット名はmedia-inoccu-com
のように、ドットを含まないものにします。ドットを含めると、s3fuseでのマウントで問題が起きます。
wp-content/uploads配下のファイルをS3にコピー
aws-cliがインストールされ、アクセスキーなどの設定が完了していれば、下記のコマンドでコピーできます。
aws s3 cp wp-content/uploads s3://<s3 url>/wp-content --recursive
EC2環境にs3fuseを導入し、S3のバケットをマウント
先ほどのサイトのとおりです。
ACMでSSL証明書を取得
ACMでmedia.inoccu.com
のSSL証明書を取得します。ドメインの所有権確認のため、CNAMEの設定が必要です。
独自ドメインをCloudFrontのCNAMEに設定
media.inoccu.com
をCloudFrontのドメインにCNAME設定します。
CloudFrontを設定
S3バケットのURLを指定して、CloudFrontを設定します。その際、ACMでSSLの証明書を作成しておくと、独自ドメインのSSL証明書が選択できるようになります。
既存の記事のimgタグを書き換え
WordPressは記事内のimgタグでドメイン名を含むフルパスを抱え込んでいるので、Search Regexプラグインなどを用いて、https://inoccu.com/wp-content/uploads
をhttps://media.inoccu.com/wp-content/uplodas
のように置換します。
「ファイルへの完全なURLパス」を設定
WordPressの管理画面にログインし、設定>メディア>ファイルへの完全なURLパスをhttps://media.inoccu.com/wp-content/uploads
のように設定します。