弊社WordPressをかなりAWS化した

弊社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/uploadshttps://media.inoccu.com/wp-content/uplodasのように置換します。

「ファイルへの完全なURLパス」を設定

WordPressの管理画面にログインし、設定>メディア>ファイルへの完全なURLパスをhttps://media.inoccu.com/wp-content/uploadsのように設定します。

この記事を書いた人

井上 研一

株式会社ビビンコ代表取締役、ITエンジニア/経済産業省推進資格ITコーディネータ。AI・IoTに強いITコーディネータとして活動。画像認識モデルを活用したアプリや、生成AIを業務に組み込むためのサービス「Gen2Go」の開発などを行っている。近著に「使ってわかった AWSのAI」、「ワトソンで体感する人工知能」。日本全国でセミナー・研修講師としての登壇も多数。