【手順付き】AWSでs3とCloudfrontを使ってWordPressサイトを設置してみた

Webサイトの高速化を目指してAWSのs3に当ブログのデータを設置したところ、高速化のついでに様々なメリットがあったので、今回は手順も含めてご紹介します。

手順だけ見たいという方は、目次から「手順」の欄をクリックしてください。

s3に移行するメリット・デメリット

まずは筆者が感じたs3に移行した際のメリット、デメリットをご紹介します。

スポンサーリンク

メリット

表示が高速になる

s3からデータを配信するには、サイトのデータをhtml化、つまり静的化するため、非常に高速になります。


↑WordPressをインストールし、プラグインをある程度入れた状態。

読み込みに522ms(0.5秒)かかってるのがわかります。


↑s3+Cloudfrontで静的ファイル化した状態。

読み込みに356ms(0.35秒)しかかかっていません。

突然の大量アクセスも柔軟に捌く

レンタルサーバーやVPSといった、サーバーを共有するタイプのサービスの場合、突然の大量アクセスが来た場合にサーバーが落ちてしまう可能性があります。

しかし、CloudFrontは大量アクセスも捌けるようにするためのサービスなので、落ちてしまう心配も無用です。

セキュリティの大幅向上

WordPressは世界中で利用されている反面、ハッカーなどのターゲットにされやすいというデメリットがあります。

ところが、静的化する時点で、管理画面といった、通常のユーザーはアクセスしない部分については、そもそもページが作成されません。

これによって、セキュリティが大幅に向上すると言えるでしょう。(100%ではありません)

WordPressをローカルで編集できるようになる

今まで使用していたWordPressは、公開用に使用することはなくなるため、外部から接続できない環境でもWordPressをインストールして編集できるようになります。

つまり、お使いのPCにXAMPP等をインストールして、PCだけでWordPressを管理できるようになります。

コストが減る(増える方もいます)

サイトのPV数にもよりますが、レンタルサーバーやVPSにかける費用がなくなる(AWSだけになる)ため、コストが減ります。

ただし、AWSは従量制課金であるため、アクセス数の多い方はその分費用が高くなります。

デメリット

記事を投稿する際に余計な動作が加わる

通常であれば、記事を公開すればそれで終わり!となりますが、これに加えて、「s3にアップロードする」という動作が加わります。

やること自体はボタンクリックで終わりますが、時間がかかる処理になります。

コメントやフォームの受付ができなくなる

コメントや、フォームといった動作は、動的サイトでのみ可能なので、外部サービスなしでは実現ができなくなります。

どうしても必要な場合は、Googleで検索してみてください。

コストが増える(減る方もいます)

メリットで紹介した「コストが減る」の逆になります。

ある程度のアクセス数がある場合、AWSの方がレンタルサーバーよりもコストが増える可能性があります。

その分サイトが安定するという考え方をすると、仕方ない部分もあると思います。

材料

手順を紹介する前に、今回の材料を紹介します。

AWSアカウント

AWSにサーバーを追加するために必要になります。
(IAMアカウントに関しては、記事中に作成します。)

クレジットカードorデビットカード

AWSには、ある程度の無料枠が用意されていますが、確実と言っていいほど超えます。
特にs3のアップロードファイス数(2,000ファイルまで)は、何回かテストをするときに超える可能性が高いです。

超えないとしても、支払いのためにクレジットカードは必須となります。

WordPressで作成されたサイトorブログ

今回はWordPressを前提としているので、WordPressで作られたサイトを必須としています。

AWSに詳しい方がこれを参考にする場合、WordPressでなくても利用できるかもしれません。

手順

s3バケツの作成

s3では、データを保存する場所を、「Bucket」と言います。
イメージとしては、HDDを新しく追加する感じになります。

https://s3.console.aws.amazon.com/s3/home にアクセスして、s3コンソールを表示します。

上部の「バケットを作成する」をクリックします。


バケット名を入力して、「作成」をクリックします。なお、他の人が使ってるバケット名は使用できませんのでご注意ください。

これでs3にデータを入れるバケツが作成されました。

s3でのサイト公開

先程のコンソールから、作成したバケツ名をクリックします。

「プロパティ」タブから、「Static website hosting」をクリックします。


上記画像の順番でクリック、入力を行います。(めんどくさくなった)


これでs3からサイトを公開できるようになりました。

アップロード用のアカウント作成

正確にはIAMアカウントを作成します。

画面右上の自分の名前から、「マイセキュリティ資格情報」をクリックします。


左のリストから、「ユーザー」を選択します。


左上から、「ユーザーを追加」を選択します。


ユーザー名を入力後、アクセスの種類から、「プログラムによるアクセス」にチェックを入れます。
その後、右下の次のステップをクリックします。


上から、「既存のポリシーを直接アタッチ」をクリック。

検索欄に、「s3」と入力。

「AmazonS3FullAccess」にチェック。※セキュリティが不安な方は、バケツへの読み込みと書き込みだけあれば大丈夫だと思います。

「次のステップ」を連打して作成を完了します。


アクセスキーIDとシークレットアクセスキーが表示されるので、これをメモしておきます。
.csvとしてダウンロードすることもできます。

これでIAMユーザーの作成が終わりました。

CloudFrontの作成

CloudFrontは、CDNのようなサーバーで、安定化のために必要となります。
(どうしてもUIが日本語にならないので、英語画面で解説します)

上部の「サービス」から、ちょっと下に移動して、CloudFrontを選択します。
見つからない場合は、検索欄に「CloudFront」と入力してもOKです。


「Create Distribution」から、新しく作成します。


今回はサイトを公開するので、「Web」の方にある「Get Started」をクリックします。


「Origin Domain Name」にs3のStatic Website hostingに表示された静的URLから、「http://」を除いた部分を入力します。

「Origin Domain Name」をクリックした際に表示されるリンクを入力した場合、うまくサイトが表示されない場合があるようです。

「Origin Path」に、サイトに公開するサブフォルダを入力します。フォルダ直下を公開する場合は、何も入力しません。

「Origin Custom Headers」は、ヘッダーを付与したい場合に入力します。

何やらたくさん設定する項目がありますが、サイトをhttps化させている場合は「Redirect HTTP to HTTPS」にチェックを入れておきます。

これ以外に編集する部分はないので、下まで移動して「Create Distribution」を選択します。


赤線に引かれている部分が、あなたのURLです。5分後くらいにアクセスすると、s3に入ってる中身がwebページとして表示されるようになります。

また中身はアップロードしてないので、Access Deniedと書かれたページが出現するかもしれません。

これでCloudFrontの作成は終了です。

独自ドメインを使用する設定

独自ドメインを使用する場合は、追加で設定が必要となります。

https://console.aws.amazon.com/cloudfront/home に接続してCloudFrontのリストを表示します。

固有IDのため、モザイクをかけていますが、青くなってる部分をクリックします。


すぐ下にある「Edit」をクリックします。


「Request or Import a Certificate with ACM」をクリックして、httpsで使用するための証明書をもらいに行きます。


ドメイン名に独自ドメインを入れます。サブドメインをサイト公開に使用する場合は、「この証明書に別の名前を追加」で、使うサブドメインを入力します。

その後はドメインの認証に入るので、表示される指示に従って認証を進めます。

最後にCNAMEで「なんとか.cloudfront.net」につながるようにレコードを追加します。

これで独自ドメインの設定は完了です。

WordPressプラグインの導入、設定

ここからはWordPress側の操作となります。

「WP2Static」プラグインを導入してください。

有効化すると、左のリストの上の方に「WP2Static」の欄が現れます。

上から、まずはリストから「Amazon S3」を選択します。
選択すると、上のスクリーンショットと同じ見た目になると思います。

「Destination URL」には、実際に公開するURLを入力します。

「Access Key ID」には、IAMアカウント作成時に表示されたIDを入力します。

「Secret Access Key」には、IAMアカウント作成時に表示されたKeyを入力します。

「Region」には、s3作成時のリージョンを選択します。ほとんどの方は「Tokyo」になると思います。

「Bucket」には、作成したバケツの名前を入力します。

「Sub Directory」には、サブディレクトリにデータを入れたい場合にのみディレクトリ名を入力します。

「Cloudfront Cache Invalidation」には、CloudFrontのID(英語と数字だけの部分)を入れると、s3へのアップロード時に自動でキャッシュをリセットしてくれるようになります。


左のボタンを押せばアップロードが開始されます。

アップロードは数分以上かかるので、気長に待ちましょう。

アップロードが完了するとこのような見た目になります。

右のボタンを押せば、アップロードしたサイトを表示できます。

これで正常に表示されれば終了です。

まとめ

今回はAWSのs3とCloudFrontを使ってWordPressサイトを公開する方法を紹介してみました。

すでにこのサイトはs3とCloudFrontだけで運用されているので、高速化後の速度の大体の目安になるかもしれません。

なお、AWSには無料枠というものがあるので、少し試してみるだけならほぼ無料でできます。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
コメントの入力は終了しました。