1. WordPressを自分のPCにインストール
2. WordPressのstaticpress2019プラグインを設定
3. staticpress2019でWordPressのコンテンツをHTMLファイルとして出力
4. HTMLファイルを配信サーバーにアップロードする

という具合に、WordPressのコンテンツをHTMLファイルとして出力して、HTMLファイルを配信することで、安くて高速なサイトを簡単に構築できます。

WordPressを自分のPCにインストールする方法

「Local」を使用するとこで簡単に自分のPCにWordPressをインストールできます。

WindowsでもmacOSでも使えます。

以下のURLから「Local」をダウンロードしてインストールします。

Local

localwp.com

インストールが完了したら、Word Pressの管理画面からパーマリンク設定をします。

Word Pressのパーマリンク設定の変更

WordPress管理画面の設定->パーマリンク画面を開き、カスタム構造を選択し、「/%postname%.html」を入力します。

次に、staticpress2019プラグインの設定に進みます。

WordPressのstaticpress2019プラグインを設定

WordPress の管理画面［プラグイン］-［新規追加］から「staticpress2019」をインストールして有効化します。これだけです。

staticpress2019でWordPressのコンテンツをHTMLファイルとして出力

インストールした「staticpress2019」の画面で「再構築」ボタンを押下します。これだけです。

HTMLファイルを配信サーバーにアップロードする

あとはHTMLファイルを配信サーバーにアップロードします。

サーバーは別途契約する必要があります。

おすすめのサーバなどなど以下に記載します。

• • AWSのS3を使う
    • 費用はS3料金のみとなります
  • スターサーバーを使う
    • • 安価なプランがありおすすめです。

    
    

  • ロリポップサーバもおすすめです。

• • ドメインの取得をしていない方におすすめ

  
  

この記事でのサーバレスとはS3＋CloudFrontでコンテンツ配信をすることを指しています。

サーバーレスにすることで以下のようなメリットがあります。

• 低コストで安定したサイト運用ができる
  • 急なアクセス増にも耐えられ、かつ、安価です
• 高速なサイトを構築できる
  • サイトの速度向上はSEO的にも有利です
• 訪問者がWordPressに直接アクセスしないのでセキュアになります
  • WordPressのセキュリティリスクについては以下の記事をご参照ください

https://it.kensan.net/it/wordpress_security.html

localhost

では、構築手順を記載していきます。

まずゴールイメージです。以下のような構成となります。サイト閲覧者はCloudFront経由でS3に格納されたコンテンツ(WordPressコンテンツを静的HTMLにしたもの)にアクセスすることになります。

使うもの

使用するAWSサービスとWordPressプラグインについて記載します。

AWSサービス

• EC2
  • WordPressをインストールする(DB内包)
• S3
  • Word Pressを静的コンテンツ化したHTMLを格納する
• CloudFront
  • S3のHTMLをCloud Front経由で配信する

Word Pressプラグイン

• StaticPress2019
  • Static Pressを使用してWord PressコンテンツをHTML化する
• StaticPage S3 sync and CloudFront cache clear
  • HTML化したファイルをS3に転送すると同時にCloudFrontのキャッシュを削除する

では、早速構築をしていきます。

まずはS3の作成から始めていきます。

S3バケット作成

任意のバケット名でS3バケットを作成します。

CloudFrontの作成と設定

まず、ディストリビューションを作成し、オリジンの編集からS3に設定するポリシーを取得という流れになります。

CloudFrontとS3間はOACで設定を行います。

OACについて分からなくても以下の通り進めれば大丈夫です。

1. ディストリビューションの作成
   1. AWSコンソール画面からCloudFrontダッシュボードへ行きます
   2. 「ディストリビューションを作成」ボタンを押下します
   3. 以下の設定でディストリビューションを作成します
      • オリジンドメイン：作成したS3バケットを選択
      • S3 バケットアクセス：「Origin access control settings (recommended)」を選択
      • コントローラ設定を作成ボタンを押下して、Create control setting画面が表示されるので設定変更せずに(デフォルト設定のまま)作成ボタン押下
2. S3に設定するポリシーを取得
   1. 作成したディストリビューションのオリジンタブから、S3のオリジンを選択して、編集ボタン押下
   2. オリジン編集画面から「ポリシーをコピー」ボタンを押下して、ポリシーをクリップボードにコピーする
   3. 変更を保存ボタンを押下する

CloudFront+S3でOACを使う

次に、CloudFrontの設定画面(以下の画面)から設定ボタンを押下して、デフォルトルートオブジェクトに「index.html」を設定します。

CloudFront設定

S3のアクセス許可設定

以下の手順でS3の設定を行います

1. バケットのアクセス許可タブを開く
2. バケットポリシーの編集ボタンを押下
3. CloudFront設定時にコピーしたポリシーを貼り付ける
4. 変更の保存ボタンを押下

EC2設定

WordPressインストール方法

EC2へWordPressをインストール

1. AWSコンソールのEC2ダッシュボードからインスタンスを起動を選択
2. インスタンス起動画面で以下の設定をする
   • 名前：wordpress（他の名前でも大丈夫）
   • アプリケーションおよび OS イメージ (Amazon マシンイメージ)：WordPress Certified by Bitnami and Automattic
   • インスタンスタイプ：t3.a.small(もっとスペック高いものを選択しても大丈夫)
   • キーペア (ログイン)：任意の名前で作成または既存キーを選択
   • ファイアウォール (セキュリティグループ)：
     • 「セキュリティグループを作成する」を選択し、「インターネットからの HTTP トラフィックを許可」「からの SSH トラフィックを許可する」のチェックボックスのみチェックする（他は外す）
3. インスタンスを起動ボタンを押下

EC2起動時のインスタンス設定

WordPress管理者アカウントのパスワード確認

1. EC2インスタンス一覧画面から作成したWordPressインスタンスを選択
2. 以下の通りメニューをたどり、システムログを開く
   • アクション->モニタリングとトラブルシューティング->システムログを取得
3. システムログを「Setting Bitnami application password to」で検索し、WordPress管理者のパスワードを調べる

WordPress EC2システムログ

動作確認

1. EC2インスタンス詳細画面を開き、「http://パブリック IPv4 アドレス/wp-admin」をブラウザのアドレスバーに入力する(httpsだとアクセスできないので注意)
2. WordPressログイン画面が表示されるのでユーザ名は「user」、パスワードはシステムログで調べたパスワードを入力し、ログインできれば完了

EC2インスタンス詳細

EC2インスタンスにSSH接続する方法

以下のようなコマンドでSSH接続可能です。ユーザが「bitnami」である点が要注意です。

• ssh -i “{sshキー}” bitnami@{パブリック IPv4 DNS}

ロールの設定

起動したEC2に以下の権限を割り当てます

// EC2に割り当てが必要な権限(ポリシー)
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "cloudfront:CreateInvalidation",
                "s3:ListBucket",
                "s3:PutObject"
            ],
            "Resource": "*"
        }
    ]
}

Word Pressのパーマリンク設定の変更

WordPressの設定->パーマリンク画面を開き、カスタム構造を選択し、「/%postname%.html」を入力する

WordPressのプラグインStaticPress2019の設定

1. WordPress 管理パネルから、「プラグイン」 -> 「新規追加」をクリックします。
2. ブラウザの入力ボックスに「StaticPress2019」と入力します。
3. 「StaticPress2019」プラグインを選択し、「インストール」をクリックします。
4. プラグインを有効にします。
5. メニューの「StaticPress2019 Options」をクリックする
6. 「StaticPress2019 Options」の「Save Dir」に静的ファイルを出力するディレクトリを指定。
7. 「StaticPress2019 Options」の「Static URL」にCloudFrontのディストリビューションドメイン名を設定
8. 「Save Changes」ボタン押下

staticpress2019設定

WordPressのプラグイン「StaticPage S3 sync and CloudFront cache clear」の設定

インストール

1. Githubからプラグインをダウンロードします。
   • StaticPage S3 sync and CloudFront cache clearのダウンロードはこちら
2. zip ファイルをコンピューター上の場所に保存します。
3. WordPress 管理パネルを開き、[プラグイン] -> [新規追加] をクリックします。
4. [アップロード] をクリックし、このページからダウンロードした .zip ファイルを参照します。
5. [インストール] をクリックし、[プラグインを有効にする] をクリックします。
6. 以下３点をStaticPage S3 sync and CloudFront cache clearプラグインに設定します。
   • S3のバケット名
   • StaticPress2019の静的ファイルの出力先ディレクトリパス(Save Dir)
   • CloudFrontのディストリビューションID

動作確認

1. StaticPress2019で「再構築」ボタン押下
2. StaticPage S3 sync and CloudFront cache clearで「S3同期 & キャッシュクリア」ボタン押下
3. CloudFrontのディストリビューションドメインにブラウザでアクセスし、コンテンツが閲覧できればOKです。

まとめ

WordPressコンテンツのサーバレス配信について記載しました。

• ソース修正
• sshしてサーバにログイン

など難しい作業をせずにWordPressコンテンツのサーバレス配信できました。

結構簡単かと思いますので、気になる方は是非★

AWS上に構築する方法は5つのパターンがあり、それぞれ特徴やメリットとデメリットがありますので、この点について記載していきます。

構築パターンの特徴を知って適切な構築方法を選択しよう！という記事です。

まずはどのような構築方法があるかについて記載していきます。

WordPressをAWS上に構築する方法は5つ

構築方法は以下の5つの方法があります。それぞれ特徴と難易度が異なってきます。

WordPress構築方法毎の比較情報

次に、WordPressの構築方法毎の比較を行っていきます。

WordPress構築方法毎の詳細情報

それぞれのWordPress構築方法について詳細を見ていきます。

EC2単体

• 使用するAWSサービス
  • EC2
• 使用するWordPressプラグイン
  • なし

構築方法

EC2での構築方法は以下の記事をご参照ください

AWSマネージメントコンソール画面からの構築方法

https://it.kensan.net/it/aws-ec2-wordpress.html

localhost

Terraformを使った構築方法(Terraformを使い慣れている方向け)

https://it.kensan.net/it/terraform-ec2-wordpress.html

localhost

EC2の代わりにLightsailで構築する場合

https://it.kensan.net/it/amazon-lightsail-wordpress.html

localhost

特徴

最もオーソドックスかつ、簡単な構築方法となります。

この構築方法のメリットとデメリットは以下のような点になります。

• メリット
  • とにかく簡単に構築できる
• デメリット
  • 捌けるアクセル量が少ない(アクセスが多いとサーバダウンなどが懸念される)
  • WordPress(PHP)がコンテンツを生成するため、サイトアクセス時の表示速度が他の方法と比べると遅い

構築が簡単なため、とりあえずこの構築方法を選択し、速度改善や捌けるアクセス数を増やしたくなったら、別の構築方法へ移行するという進め方も良いかと思います。

EC2単体ー静的ページ配信

• 使用するAWSサービス
  • EC2
• 使用するWordPressプラグイン
  • StaticPress

構築方法

EC2単体と同様の方法でEC2上にWordPressを構築します。

Lightsailを使用しても問題ありません。

WordPress構築後はStaticPressをインストールして、WordPressコンテンツの静的ページ化を行います。StaticPressの設定方法の詳細は「StaticPressのインストール方法」をご参照ください。

特徴

WordPressコンテンツを静的ページ化する方法となります。

この構築方法のメリットとデメリットは以下のような点になります。

• メリット
  • サイトの高速化と捌けるアクセス数を増やすことができる
• デメリット
  • StaticPress導入にあたり、PHPのソース修正が発生し、EC2単体の構築方法より難易度が若干高め
  • 動的機能(検索やコメントなど)が使用できない

できるだけ簡単にサイトの高速化と負荷対策(多くのアクセスを捌けるようにする)する際に、有効な手法となります。

EC2＋CloudFront配信

• 使用するAWSサービス
  • EC2
  • CloudFront
• 使用するWordPressプラグイン
  • Clear CloudFront Cahce

構築方法

EC2単体と同様の方法でEC2上にWordPressを構築します。

Lightsailを使用しても問題ありません。

WordPress構築後はCloudFront経由でEC2にアクセスするように設定します。

具体的な構築方法は以下のサイトを参考にさせてもらいましょ

AWSに構築したWordPressをCloudFrontを使ってキャッシュして高速化【CDN】

WordPressを高速化！AWSのCloudFrontを配置し、静的コンテンツをキャッシュして配信する環境構築の手順を紹介しています。 CloudFrontによりキャッシュされているか確認する方法、CloudFrontのキャッシュ削除方法、CloudFrontからしかアクセスを受け付けない、つまりEC2に直接アクセス...

cat-prog.com

WordPressプラグインClear CloudFront Cacheを入れておくと、CloudFrontのキャッシュを簡単に削除できるので便利です。設定方法の詳細は「Clear CloudFront Cache」をご参照ください。

特徴

WordPressコンテンツをCloudFrontでキャッシュする方法となります。

この構築方法のメリットとデメリットは以下のような点になります。

• メリット
  • サイトの高速化と捌けるアクセス数を増やすことができる
  • 高速化を図りつつ動的機能(検索やコメントなど)を利用できる
• デメリット
  • CloudFrontの設定で、キャッシュするページとキャッシュしないページを分けて設定する必要があり、難易度が高め

サイトの高速化と負荷対策(多くのアクセスを捌けるようにする)を図りつつ、動的機能をしようしたい場合に有効な手法となります。

EC2ー静的ページ＋CloudFront配信

• 使用するAWSサービス
  • EC2
  • CloudFront
• 使用するWordPressプラグイン
  • StaticPress
  • Clear CloudFront Cahce

構築方法

EC2(Lightsailでも可)上にWordPress構築後に、StaticPressで静的ページ化し、静的ページをCloudFrontで配信します。

構築方法の詳細は以下の記事をご参照ください。

https://it.kensan.net/it/aws_ec2_wordpress_cloudfront.html

localhost

特徴

WordPressコンテンツを静的ページ化し、静的ページをCloudFrontでキャッシュする方法となります。

この構築方法のメリットとデメリットは以下のような点になります。

• メリット
  • サイトの高速化と捌けるアクセス数を増やすことができる
• デメリット
  • CloudFrontの設定が必要であり、CloudFrontを使ったことがない場合、難易度が高め
  • StaticPress導入にあたり、PHPのソース修正が発生し、EC2単体の構築方法より難易度が若干高め
  • 動的機能(検索やコメント)が使用できない

サイトの高速化と負荷対策(多くのアクセスを捌けるようにする)を図りたい場合に有効な手法となります。

EC2ー静的ページ＋S3+CloudFront配信

• 使用するAWSサービス
  • EC2
  • S3
  • CloudFront
• 使用するWordPressプラグイン
  • StaticPress
  • StaticPress S3
  • Clear CloudFront Cahce

構築方法

EC2上にWordPress構築後に、StaticPressで静的ページ化し、静的ページをS3に転送し、CloudFrontで配信します。

構築方法の詳細は以下の記事をご参照ください。

https://it.kensan.net/it/staticpresss3.html

localhost

特徴

WordPressコンテンツを静的ページ化し、静的ページをS3に転送し、S3の静的ページをCloudFrontでキャッシュする方法となります。

この構築方法のメリットとデメリットは以下のような点になります。

• メリット
  • サイトの高速化と捌けるアクセス数を増やすことができる
  • コンテンツ配信はS3＋CloudFrontとなるため、急激なアクセス増にも耐えられる
  • WordPress(EC2)を配信サーバとして使わないため、WordPressにIP制限をかけることが可能で、セキュリティ的に優れている
    • 関連記事：WordPressのセキュリティリスクとセキュリティ対策-セキュリティ大全
• デメリット
  • CloudFrontの設定が必要であり、CloudFrontを使ったことがない場合、難易度が高め
  • StaticPress導入にあたり、PHPのソース修正が発生し、EC2単体の構築方法より難易度が若干高め
  • 動的機能(検索やコメント)が使用できない

構築の難易度は最も高いが、サイトの高速化と負荷対策(多くのアクセスを捌けるようにする)を図れ、セキュリティにも優れている手法となります。

StaticPressのインストール方法

インストール

1. WordPress 管理パネルから、「プラグイン」 -> 「新規追加」をクリックします。
2. ブラウザの入力ボックスに「StaticPress」と入力します。
3. 「StaticPress」プラグインを選択し、「インストール」をクリックします。
4. プラグインを有効にします。

ソース修正

StaticPressのソース修正をします。

修正ソース：wp-content/plugins/staticpress/includes/class-static_press_admin.php

bitnamiを使用している場合のパス：/home/bitnami/stack/wordpress/wp-content/plugins/staticpress/includes/class-static_press_admin.php

// 以下のコードを追加する
「if( !($('li:last-child', ul).offset() === void 0) )」を追加する


修正後ソース　312行目辺り
if( !($('li:last-child', ul).offset() === void 0) )//追加

$('html,body').animate({scrollTop: $('li:last-child', ul).offset().top},'slow');

Word Pressのパーマリンク設定の変更

WordPressの設定->パーマリンク画面を開き、カスタム構造を選択し、「/%postname%.html」を入力する

まとめ

AWS上にWordPressを構築する方法は5つのパターンがあり、それぞれ特徴やメリットとデメリットを見てきました。用途にあった方法で構築していきましょー

静的ページ化するところはWordPressのプラグインStaticPressを使用します。

CloudFrontのキャッシュクリアはClear CloudFront Cacheプラグインを使用します。

また、WordPressURLにBasic認証をかけるということもやっていきます！

WordPressのインストールは終わっている前提での記載になりますので、インストールが終わっていない場合は、以下の記事をご参照いただきEC2にWodPressをインストールください。

https://it.kensan.net/it/aws-ec2-wordpress.html

localhost

それでは、StaticPressを使用して、WordPressコンテンツの静的ページ化をしていきます！

StaticPressを使用してWordPressコンテンツを静的ページ化する

以下の手順で静的ページ化します。手順に記載のパスはAMI「WordPress Certified by Bitnami and Automattic」を使用時の例ですので、環境に応じて読み替えてください

1. 以下のコマンドのようにWordPressが動いているEC2にSSH接続します

   • ssh -i “{sshキー}” bitnami@{パブリック IPv4 DNS}

2. WordPress管理画面からStaticPressプラグインをインストールして、有効化します
3. StaticPressの設定を以下の通り行います
   • サイトURL：http://{パブリック IPv4 アドレス}/static/
   • ドキュメントルート：/opt/bitnami/wordpress/
4. StaticPressプラグインの再構築ボタンを押下し、静的ファイルを生成します
   • フェッチが進まない場合はソース修正をします

     • /home/bitnami/stack/wordpress/wp-content/plugins/staticpress/includes/class-static_press_admin.php

       // 以下のコードを追加する
       「if( !($('li:last-child', ul).offset() === void 0) )」を追加する

       
       修正後ソース　312行目辺り
       if( !($('li:last-child', ul).offset() === void 0) )//追加

       $('html,body').animate({scrollTop: $('li:last-child', ul).offset().top},'slow');

   • ファイルが生成されずに終了する場合はドキュメントルートの権限を確認します
     • 権限がなければ付与します
       • 「chown -R daemon:daemon /opt/bitnami/wordpress」を実行すると、権限に問題がある場合は問題解消できます
5. 以下のURLにアクセスし画面表示されればOKです。
   • http://{パブリック IPv4 アドレス}/static/

CloudFrontの設定

1. ディストリビューションを以下の設定で新規作成します(他の項目は変更しなくて大丈夫)
   • オリジンドメイン：EC2のパブリック IPv4 DNS
   • オリジンパス ：static
2. 以下のURLにアクセスし画面表示されればOK
   • http://ディストリビューションドメイン名
     • httpsでも大丈夫

次に、Clear CloudFront Cacheプラグインをインストールして、CloudFrontのキャッシュを簡単にクリアできるようにしておきます！

Clear CloudFront Cacheプラグインをインストールする

Clear CloudFront Cacheは、WordPress管理画面からインストール可能です。

インストール方法の詳細は、以下の記事をご参照ください。

https://it.kensan.net/it/cloudfront-cache-clear.html

localhost

WordPressURLにBasic認証をかける

WordPressURLはBasic認証をかけましょ！

Basic認証をかけることで、以下のメリットがあります。

Basic認証のかけ方は以下記事をご参照ください

https://it.kensan.net/it/staticpress-basic-auth.html

localhost

以上で「StaticPressを使ってEC2上のWordPressコンテンツをCloudFront経由で配信」できるようになりましたー

AWS上でWordPressコンテンツを静的ファイルにしてCloudFront＋S3で配信したい方向けの記事です。

以下の記事ではStaticPress S3を使用していますが、「StaticPage S3 sync and CloudFront cache clear」を使うともっと簡単にCloudFront＋S3で配信できるようになるよーという記事です。

https://it.kensan.net/it/staticpresss3.html

localhost

WordPressをインストールする

まずはWordPressのインストールです。

以下の記事を参考に簡単にインストールできますので、インストール作業は以下の記事をみて進めてくださいー

https://it.kensan.net/it/aws-ec2-wordpress.html

localhost

WordPressコンテンツを静的ファイルにする方法

プラグインを使用します。代表的なプラグインは以下の2つを紹介します。

この記事の本題は静的ファイル生成後のS3＋CloudFrontでの配信についてですので、詳細は省略します。

• Simply Static
  • 詳細は以下のサイトを参考にさせてもらうといいです。

ワードプレスで静的HTMLを出力するプラグイン「Simply Static」

ワードプレスで静的HTMLを出力するプラグイン「Simply Static」を試してみました。機能が限定的で設定も少なく使いやすいです。

akmemo.info

• StaticPress
  • こちらは以下のサイトを参考にさせてもらいましょう

WordPressを静的なサイトに変換するプラグイン「StaticPress」

今回はWordPressプラグイン「StaticPress」のご紹介です。WPで組んだサイトを静的なサイトに簡単に変換することができます。クライアントの意向により使用できない場面や使用するサーバーによってはPHPバージョンが対応していない場合などに便利です。

blog.universe-web.jp

CloudFront+S3に静的ファイルを配信する

「StaticPage S3 sync and CloudFront cache clear」のインストール方法

1. Githubからプラグインをダウンロードします。
   • StaticPage S3 sync and CloudFront cache clearのダウンロードはこちら
2. zip ファイルをコンピューター上の場所に保存します。
3. WordPress 管理パネルを開き、[プラグイン] -> [新規追加] をクリックします。
4. [アップロード] をクリックし、このページからダウンロードした .zip ファイルを参照します。
5. [インストール] をクリックし、[プラグインを有効にする] をクリックします。
6. 以下３点をStaticPage S3 sync and CloudFront cache clearプラグインに設定します。
   • S3のバケット名
   • 静的ファイルの出力先ディレクトリパス
   • CloudFrontのディストリビューションID
7. WordPressが動いているEC2に以下の権限を追加します。

//IAMポリシーの設定例
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "cloudfront:CreateInvalidation",
                "s3:ListBucket",
                "s3:PutObject"
            ],
            "Resource": "*"
        }
    ]
}

「StaticPage S3 sync and CloudFront cache clear」の使い方

WordPressのコンテンツを更新して、静的ページを生成後、S3＋CloudFrontに反映したいタイミングで「StaticPage S3 sync and CloudFront cache clear」プラグインの「S3同期 & キャッシュクリア」ボタンを押下します。

これだけで、静的ファイルのS3への同期とCloudFrontのキャッシュクリアが実行され、最新のコンテンツが反映されます。

「StaticPage S3 sync and CloudFront cache clear」の画面イメージ

StaticPage S3 sync and CloudFront cache clear

以下の3つを入力して保存すれば準備完了。

あとは記事を公開・更新したいタイミングで「S3同期 & キャッシュクリア」ボタンを押下します。

「StaticPage S3 sync and CloudFront cache clear」を使うメリット

• 入力項目は3つのみで設定が簡単
  • S3バケット名
  • 静的ファイルの出力先ディレクトリパス
  • CloudFrontのディストリビューションID
• 操作が簡単
  • 記事を公開・更新したいタイミングで「S3同期 & キャッシュクリア」ボタンを押すだけ
• 権限はEC2のロールに付与する
  • 「アクセスキー」「シークレットキー」が不要なのでとってもセキュア
  • EC2に付与する必要があるポリシーも最低限でいいので安心

WordPressのStaticPressの導入については以下の記事をご参照ください。

StaticPress S3を使用してS3+CloudFrontでコンテンツ配信するケースの導入例

https://it.kensan.net/it/staticpresss3.html

localhost

StaticPressを使用してEC2＋CloudFrontでコンテンツ配信するケースの導入例

https://it.kensan.net/it/aws_ec2_wordpress_cloudfront.html

localhost

本題のStaticPress導入時にサイトマップ(sitemap.xml)を使えるようにする方法ですが、2つの対応をすることで可能となります。

サイトマップとは、検索エンジンにWebサイトのページ更新内容を知らせるため(インデックスさせるため)に必要なものです。SEO対策では必須になってきますので、この記事を参考に、ちゃんとサイトマップ出力されるように対策しちゃいましょ！

まずは、StaticPressのソース修正方法から記載していきます！

StaticPressのソース修正

StaticPressのソース修正を行います。

修正ファイル：wp-content/plugins/staticpress/includes/class-static_press.php

377行目あたりを修正

// 修正前
                switch ($file_type) {
                case 'front_page':
                case 'single':
                case 'term_archive':
                case 'author_archive':
                case 'other_page':

// 修正後
                switch ($file_type) {
                case 'front_page':
                case 'single':
                case 'term_archive':
                case 'author_archive':
                case 'seo_files':          // ここを追加
                case 'other_page':

次にサイトマップ作成プラグインを入れます。

サイトマップ作成プラグインを入れる

以下のプラグインをWordPressにインストールします。他のプラグインをいくつか試してみましたが、StaticPressとの相性が悪いようで正しく出力されないようでしたので、以下のプラグインがオススメです。

プラグイン：Google XML Sitemaps

動作確認

動作確認をして問題なければ、Google search consoleにサイトマップをお知らせして終了です。

動作確認〜Google search consoleにサイトマップを送るまでの手順は以下の4ステップです。

1. 「{サイトアドレス (URL)}/sitemap.xml」にアクセスしてサイトマップが正しく表示されることを確認
2. StaticPressで再構築する
3. 「{静的サイト URL}/sitemap.xml」にアクセスして、サイトマップ表示を確認する
4. Google search consoleに以下のURLでサイトマップを送ります
   • 「{静的サイト URL}/sitemap.xml」

まとめ

サイトマップが正常に表示され、Google search consoleに送れたかと思います。

Google search consoleに送った後は、正常に処理されたかを確認しておきしょ！

正常に処理されたかの確認は、Google search console画面から可能です。

Google search consoleに正しく送れたら、Bingにも送っておきましょー

• WordPressのプラグインStaticPressを使用している
  • StaticPressで生成された静的ファイルのリンクURLが、StaticPressで設定した「静的サイト URL」に置き換わらないことがある
    • SNS拡散用ボタンのリンクURLが「静的サイトURL」に置き換わらないなど

WordPressのStaticPressの導入については以下の記事をご参照ください。

StaticPress S3を使用してS3+CloudFrontでコンテンツ配信するケースの導入例

https://it.kensan.net/it/staticpresss3.html

localhost

StaticPressを使用してEC2＋CloudFrontでコンテンツ配信するケースの導入例

https://it.kensan.net/it/aws_ec2_wordpress_cloudfront.html

localhost

早速、解決方法を記載します！

解決方法

この問題の解決にはStaticPressのソースコードを修正が必要となります。

以下のソースコード修正を行います。

修正ファイル：staticpress/includes/class-static_press.php



                // 修正前ソース
                if ( $home_url !== $static_url ) {
                        $pattern  = array(
                                '# (href|src|action)="'.preg_quote($home_url).'([^"]*)"#ism',
                                "# (href|src|action)='".preg_quote($home_url)."([^']*)'#ism",
                        );
                        $content  = preg_replace($pattern, ' $1="$2"', $content);
                }



                // 修正後ソース
                if ( $home_url !== $static_url ) {
                        $pattern  = array(
                                '# (href|src|action)="'.preg_quote($home_url).'([^"]*)"#ism',
                                "# (href|src|action)='".preg_quote($home_url)."([^']*)'#ism",
                        );
                        $content  = preg_replace($pattern, ' $1="$2"', $content);
                        $content  = preg_replace('/{WordPressのドメイン}/', '{静的ファイルドメイン}', $content); // ここを追加
                }

上記修正を行います。「WordPressのドメイン」「静的ファイルドメイン」の部分はそれぞれ以下の値を設定してください。

WordPressのドメイン：WordPressの管理画面が動いているドメイン

静的ファイルドメイン：静的ファイルを配信しているサーバのドメイン

なぜ置換されないのか

SNS拡散用ボタンのリンクURLなどは、URLエンコードされていることが原因で、静的ファイルURLの置換対象とならず、置換されない(WordPressの管理画面が動いているドメインのままとなる)ようです。

上記対応ではURLエンコードされているリンクURLも置換対象となるため、SSN拡散用ボタンのリンクURLも正常に動作するようになります。

まとめ

簡単なソース修正で、URLが置き換わるようになったと思います。

今回、URLを書き換える処理を追加したことで、StaticPressの再構築の処理が少し遅くなりそうですが、許容範囲かと思います。

Clear CloudFront CacheはWordPressのプラグインです。

StaticPress S3で、CloudFront＋S3でWordPressコンテンツ配信している際に、CloudFrontのキャッシュを簡単に削除できる便利プラグインです。

どんな時に使えるプラグインか

• WordPressコンテンツをCloudFront経由で配信している場合に使えます
  • WordPress管理画面でボタンをポチりすればCloudFrontのキャッシュが消えてくれます
  • 以下の記事のようにStaticPress/StaticPress S3を使用している場合に使えます。

StaticPress S3を使用してS3+CloudFrontでコンテンツ配信するケースの導入例

https://it.kensan.net/it/staticpresss3.html

localhost

StaticPressを使用してEC2＋CloudFrontでコンテンツ配信するケースの導入例

https://it.kensan.net/it/aws_ec2_wordpress_cloudfront.html

localhost

なぜCloudFrontのキャッシュを消す必要があるの？という方は以下の記事をご参照ください。

https://it.kensan.net/it/wordpress_cloudfront_cache_delete.html

localhost

ざっくりプラグインの紹介が終わったので、インストール方法について記載していきます！

インストール方法

以下の2つの方法がありますので、それぞれご紹介します。

WordPressのプラグイン追加画面からプラグインを検索してインストール

WordPress管理画面からClear CloudFront Cacheをインストールする方法を記載します。

// IAM設定例
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "cloudfront:CreateInvalidation",
            "Resource": "*"
        }
    ]
}

Githubからダウンロードしてインストール

Githubからダウンロードして、Clear CloudFront Cacheをインストールする方法を記載します。

//IAM 設定例
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "cloudfront:CreateInvalidation",
            "Resource": "*"
        }
    ]
}

次に、Clear CloudFront Cacheの使い方について、記載します。

使い方

CloudFrontのキャッシュを削除したいタイミングで、プラグインの「キャッシュクリア」ボタンを押下するだけで、CloudFrontのキャッシュが消えてくれます。

画面イメージ

以下、Clear CloudFront Cacheの画面です。

Clear CloudFront Cache

CloudFrontのディストリビューションIDを入力して保存すれば準備完了。

あとはキャッシュ削除が必要な時にキャッシュクリアボタンを押すだけで、CloudFrontのキャッシュを削除できます。

次に、Clear CloudFront Cacheの特徴について、記載します。

特徴

Clear CloudFront Cacheの特徴は以下の通りです。

まとめ

WordPressプラグイン「Clear CloudFront Cache」を紹介させていただきました！

WordPressのStaticPress S3の導入については以下の記事をご参照ください。

https://it.kensan.net/it/staticpresss3.html

localhost

本記事は上記の構築をした後など、StaticPress S3プラグインを使ってS3+CloudFrontでWordPressコンテンツ配信時に、固定記事などが表示されない場合の対処法を記載します。

なぜ固定記事が表示されないか

固定記事は

{固定記事名}/index.html

上記の形式でS3に転送されます。

しかし、固定記事のリンクURLは

{固定記事名}/

となります。

「index.html」がリンクURLにないため表示されないため、

S3上でファイルが見つからず403エラーとなっています。

対処方法

StaticPressのPHPプログラムを修正する方法もありますが、今回は、CloudFrontの関数を使用して、URLの書き換えを行います。

せっかくCloudFrontで配信してるのだから、CloudFrontの便利機能を使っちゃおうという考えです。

CloudFront関数の作成

AWSコンソール画面からCloudFrontの関数の作成をします。

以下のように、AWSマネージメントコンソール画面を操作し、CloudFrontの関数作成画面にいきます。

CloudFont->関数->関数を作成

以下の設定でCloudFrontの関数を作成します。

• 関数の名前：適切なもの
• 関数のコード：以下参照

function handler(event) {
    var request = event.request
    var uri = request.uri;
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    } else if (!uri.includes('.')) {
        request.uri += '/index.html';
    }
    return request;
}

関数を保存後に、発行タブから「関数を発行」ボタンを押します。

CloudFront関数とディストリビューションの紐付け

関数を発行後に、発行タブにある「関連付けを追加」ボタンを押下します。

上記設定後に「関連付けを追加」ボタンを押下して、実際に関数とCloudFrontの紐付けを行います。

動作確認

固定記事等の403エラーが発生していたリンクを押下し、ページが表示されればOKです。

まとめ

StaticPress使用時の403エラーが簡単に解決できたとおもいます。

CloudFrontの関数、便利ですね。

CloudFrontの関数については以下の記事も参考になるかと思いますので、よろしければご覧ください。

AWS S3 + CloudFrontでhtaccessのような「URL書き換え」や「Basic認証」をする方法

CloudFront関数の公式記事も載せておきます！！

チュートリアル: CloudFront Functions を使用した単純な関数の作成 - Amazon CloudFront

このチュートリアルを完了すると、簡単な関数を作成して CloudFront Functions を使用できるようになります。

docs.aws.amazon.com

WordPressのStaticPressの導入については以下の記事をご参照ください！

StaticPress S3を使用してS3+CloudFrontでコンテンツ配信するケースの導入例

https://it.kensan.net/it/staticpresss3.html

localhost

StaticPressを使用してEC2＋CloudFrontでコンテンツ配信するケースの導入例

https://it.kensan.net/it/aws_ec2_wordpress_cloudfront.html

localhost

本記事はStaticPressを導入後に、不要な静的ファイルが出力されないようにする方法を記載します。

不要な静的ファイルとは配信サーバに不要なページであるWordPressの管理画面などのHTMLを指します。

不要なファイルを生成されないようにすることで、以下のメリットがあります。

配信に不要なページについて

配信サーバに不要なページについて、具体的には以下のフォルダを不要と考えています。

なぜ対応が必要なのか

改めて、不要なページを出力しないようにする理由について、記載していきます。

配信に不要なページについて、静的HTMLを出力しないようにすることで、以下のメリットがあります。

それでは、不要な静的ファイルが生成されないようにする方法を記載します。

不要な静的ファイルが生成されないようにする方法

生成対象外とする対象のフォルダによって対応方法が異なります。

まずは、wp-admin、wp-includesフォルダを除外する方法を記載します。

wp-admin、wp-includesを静的ファイル生成対象外とする

修正対象ソース：/wp-content/plugins/staticpress/includes/class-static_press.php

869行目辺りを以下のように修正する

//修正後ソース
//869行目辺り
private function static_files_url($url_type = 'static_file'){
$urls = array();
 
$static_files_filter = apply_filters('StaticPress::static_files_filter', $this->static_files_ext);
foreach ($static_files_filter as &$file_ext) {
$file_ext = '*.'.$file_ext;
}
$static_files = array_merge(
$this->scan_file(trailingslashit(ABSPATH), '{'.implode(',',$static_files_filter).'}', false),
//$this->scan_file(trailingslashit(ABSPATH).'wp-admin/', '{'.implode(',',$static_files_filter).'}', true),←コメントアウト
//$this->scan_file(trailingslashit(ABSPATH).'wp-includes/', '{'.implode(',',$static_files_filter).'}', true),←コメントアウト
$this->scan_file(trailingslashit(WP_CONTENT_DIR), '{'.implode(',',$static_files_filter).'}', true)
);

次に、以下の静的ファイルを生成されないように対応します。

・/wp-content/plugins/*

・/wp-json/*

・/author/*

/wp-content/plugins/*と/wp-json/*と/author/*を静的ファイル生成対象外とする

修正対象ソース：/wp-content/plugins/staticpress/plugin.php

//以下のソースを追加
add_action('StaticPress::file_put', 'static_rm', 1, 2);
function static_rm($file_dest, $url){
  if(strstr($file_dest, '/author/')
    or strstr($file_dest, '/wp-content/plugins/')
    or strstr($file_dest, '/wp-json/')){
		unlink($file_dest);
  }
}