WordPressをSymply Static+S3+CloudFrontで静的ホスティングする

もう、WordPressが重い！！！！
理由は分からないけど、とにかく重い。
CloudFront使ったり、ちょっとEC2の性能上げて見たりしたけど、もう重すぎで耐えられず、ついには静的ウェブホスティングすることにしましたwww

具体的には「Symply Static」というプラグインを使って、WordPressのサイトを丸っと静的ページとして出力してしまうという方法。
なんで今まで思いつかなかったのか、ということでやっていきました。

下記本文内にも書いていますが、今のところ、S3へのアップロードは手動です…
自動にして、なんならEC2の起動と停止も自動化出来たらな…とか考えてます。うん、そのうち頑張るwww

ここから下はAI記述です。どうぞ。AIについて気になる方はうに＠AI活用で100日後にニートになるを見てみてくださいw

はじめに

WordPressはその使いやすさと柔軟性で知られており、世界中で広く利用されていますが、動的コンテンツの管理とサーバーへの負荷が問題となることがあります。対照的に、静的サイトはHTML、CSS、JavaScriptのみで構成されており、ページのロード時間の短縮やセキュリティの向上が期待できます。この記事では、WordPressサイトを静的サイトに変換する「Simply Static」プラグインの利点と使用方法、そして変換されたサイトをAmazon S3およびCloudFrontを用いて効率的にホスティングする手順について解説します。

手順

1. 「Simply Static」プラグインの設定

「Simply Static」はWordPressのプラグインの一つで、WordPressサイトを静的HTMLサイトに変換するためのツールです。これにより、サイトのセキュリティを強化し、ロード時間を短縮することが可能になります。このプラグインは、特に大量のデータを扱うサイトや、高いセキュリティが求められるサイトに適しています。

(プラグイン設定の前に)WordPressディレクトリの構成変更

WordPressがインストールされている標準のディレクトリは /var/www/html です。ただし、「Simply Static」を使用する際には、このディレクトリ内に静的ファイルを生成してしまうと、管理が煩雑になる可能性があります。静的ファイルと動的コンテンツが混在することを避けたい場合は、サイトのホームディレクトリを変更することが推奨されます。

本例では、元々の /var/www/html ディレクトリを /var/www/html/peaceboat に変更しました。これにより、WordPressのコンテンツ管理と静的ファイル生成を区別しやすくなります。

「Simply Static」インストールと有効化

まず、WordPressの管理画面から「プラグイン」セクションにアクセスし、「新規追加」をクリックします。検索バーに「Simply Static」と入力し、プラグインを見つけたら「今すぐインストール」をクリックし、インストールが完了したら「有効化」をクリックします。

静的ファイルの保存方法の選択

「Simply Static」では、生成された静的ファイルをサーバーの指定ディレクトリに保存する方法と、ローカルにzipファイルとしてダウンロードする方法が選べます。今回は将来の自動化も考慮して、ローカルディレクトリに直接静的ファイルを保存する方法を選択しました。具体的には、新たに /var/www/html/peaceboat_s3 ディレクトリを作成し、ここに静的ファイルを出力する設定を行います。

「Deploy」の設定

「Simply Static」の管理画面から「Settings」（設定）タブにアクセスし、「Deploy」セクションを開きます。ここでは「DEPLOYMENT METHOD」（デプロイメント方法）を選択できます。デプロイメント方法には以下のオプションがあります：

  • Directory on server（サーバー上のディレクトリ）: サーバー内の指定したディレクトリに静的ファイルを保存します。
  • ZIP archive（ZIPアーカイブ）: 生成された静的ファイルをZIPファイルとしてパッケージ化し、ローカルにダウンロードします。

本例では、「Directory on server」を選択し、出力先ディレクトリとして /var/www/html/peaceboat_s3 を指定しました。この設定により、静的ファイルは指定されたディレクトリに直接保存され、将来の自動化プロセスに簡単に組み込むことが可能になります。

2. 静的ファイルの生成と検証

設定が完了したら、「Generate」タブから静的サイトの生成を開始します。プロセスが完了すると、/var/www/html/peaceboat_s3 ディレクトリにHTMLファイル、CSS、JavaScriptファイルなど、サイトを構成する全ての静的ファイルが保存されます。生成されたファイルをブラウザで開いて、リンクが正しく機能しているか、画像が適切に表示されているかなど、サイトの動作を慎重に確認します。

3. Amazon S3に静的ファイルをアップロード

生成された静的ファイルをAmazon S3バケットにアップロードすることで、ファイルを安全に保管し、全世界に配信する準備を整えます。ここでは、EC2インスタンスを介してS3にファイルをアップロードするプロセスを説明します。

S3バケットの準備

まず、AWS管理コンソールにログインし、「S3」サービスを選択して新しいバケットを作成します。バケット作成時には、バケット名が全世界で一意であること、およびデータを保存するリージョンを選択する必要があります。バケットの設定で「静的ウェブサイトホスティング」を有効にし、インデックスドキュメントとエラードキュメントを指定します。

ファイルのアップロード

EC2インスタンスにSSHでログインし

て、以下のコマンドを実行して、生成した静的ファイルをS3バケットにアップロードします。この例では、/var/www/html/peaceboat_s3ディレクトリにあるファイルをyour-bucket-nameという名前のS3バケットにコピーします。

aws s3 cp /var/www/html/peaceboat_s3 s3://your-bucket-name/ --recursive

このコマンドはaws-cliを使用しており、--recursiveオプションによってディレクトリ内のすべてのファイルが再帰的にS3にアップロードされます。コマンドを実行する前に、aws-cliがインストールされていること、適切な権限が設定されていることを確認してください。

4. Amazon CloudFrontの設定

S3に静的ファイルをアップロードした後、CloudFrontを使用して全世界に高速に配信する設定を行います。CloudFrontはAWSのCDN（コンテンツ配信ネットワーク）サービスで、コンテンツのロード時間を短縮し、ユーザー体験を向上させることができます。

CloudFrontディストリビューションの作成

AWS管理コンソールから「CloudFront」を選択し、「Create Distribution（ディストリビューションの作成）」ボタンをクリックします。ウェブディストリビューションを選び、「Get Started」をクリックして設定を開始します。

  • Origin Settings（オリジン設定）:
    • Origin Domain Name（オリジンドメイン名）: S3バケットのウェブエンドポイントを選択します。自動で補完されるドロップダウンリストではなく、S3バケットの静的ウェブサイトホスティングURLを手動で入力します。
  • Default Cache Behavior Settings（デフォルトキャッシュ動作設定）:
    • Viewer Protocol Policy（ビューアプロトコルポリシー）: 「HTTPS Only」または「Redirect HTTP to HTTPS」を選択します。
  • Distribution Settings（ディストリビューション設定）:
    • Alternate Domain Names (CNAMEs)（別名ドメイン（CNAME））: カスタムドメインを使用する場合はここに入力します。
    • SSL Certificate（SSL証明書）: 「Custom SSL Certificate」を選び、適切な証明書を選択またはアップロードします（ACMから取得するのが一般的です）。

設定を完了したら、「Create Distribution（ディストリビューションを作成）」をクリックしてディストリビューションを作成します。これにより、設定が反映され、世界中のエッジロケーションにコンテンツが配信されるようになります。

5. 自動化の検討

現在はEC2インスタンスに手動でログインしてファイルをアップロードしていますが、このプロセスを自動化することで効率的に運用できるようになります。例えば、CI/CDツールを使用してビルドプロセスを自動化するか、「WP2Static」などの有料プラグインを利用したらWordPressから直接S3にファイルをアップロードする設定を行えるかもしれません。これにより、更新があるたびに自動的に静的ファイルが生成され、S3バケットにアップロードされるようになります。この自動化は、頻繁にコンテンツを更新するサイトにとって特に価値があります。

まとめ

「Simply Static」プラグインを用いてWordPressサイトを静的サイトに変換し、Amazon S3とCloudFrontを組み合わせて高速かつセキュアなウェブサイトホスティングを実現する方法を紹介しました。この手法は、サイトのロード速度を改善し、セキュリティを向上させるために非常に効果的です。また、自動化の導入により、サイトの管理がさらに楽になり、時間とリソースを節約することができます。

今後は、より多くのWordPressサイト運営者が静的サイトへの移行を検討することで、インターネット全体のパフォーマンスとセキュリティの向上に貢献できるでしょう。また、技術が進化するにつれて、静的サイトの生成と配信のプロセスもさらに簡素化され、アクセシビリティが向上することが期待されます。

このガイドが、静的サイトへの移行を考えているWordPressユーザーにとって役立つ一助となれば幸いです。静的サイト変換とクラウドベースのホスティングを活用して、より速く、安全で、管理しやすいウェブサイトを構築しましょう。

スポンサーリンク

コメント

タイトルとURLをコピーしました