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

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

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

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

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

WordPress構築方法毎の比較情報

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

WordPress構築方法毎の詳細情報

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

EC2単体

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

構築方法

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

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

AWSのEC2に簡単にWordPressをインストールする方法(AMIでWordPressを使用)

簡単にAWSのEC2にWordPressをインストールする方法です。5分で動作確認までできます。 ハマるポイントとしては、WordPressログイン時のパスワードの確認くらいです。 AMIはWordPress Certified by Bitnami and Automatticを使用します

it.kensan.net

2023.02.18

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

TerraformでEC2上にWordPressを簡単に構築するーコピペでTerraformでWordPress構築

TerrafromでEC2上にWordPressを構築します。コピペで簡単にTerraformでEC2上にWordPressを構築できるように記載しています。TerraformソースコードとTerrafromの実行方法、最後に作成したリソースの削除方法を記載しています。

it.kensan.net

2023.03.05

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

Amazon LightsailでWordPressを構築してみて、EC2との違いについて考えてみた

LightsailでWordPressを構築してみました。 結論としてはEC2と比べて構築作業の難易度はそれほど変わらない印象です。 どちらも簡単。 普段EC2に慣れている人はEC2の方が楽かもしれません。 逆にEC2を触ったことがなければ、Lightsailの方が直感的に作業できて楽かもしれません。

it.kensan.net

2023.02.25

特徴

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

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

• メリット
  • とにかく簡単に構築できる
• デメリット
  • 捌けるアクセル量が少ない(アクセスが多いとサーバダウンなどが懸念される)
  • 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で配信します。

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

StaticPressを使ってEC2上のWordPressコンテンツをCloudFront経由で簡単に配信する方法

WordPressのコンテンツを静的ページ化し、CloudFrontで配信できるようにします。静的ページ化するところはWordPressのプラグインStaticPressを使用します。CloudFrontのキャッシュクリアはClear CloudFront Cacheプラグインを使用します

it.kensan.net

2023.02.18

特徴

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で配信します。

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

【日本語URL対応版】WordPressのコンテンツを StaticPress S3プラグインを使用して配信する方法

WordPressコンテンツをStaticPressS3を使用してS3+CloudFrontで配信する方法を記載。 コピペで環境構築できます。S3+CloudFrontで配信することで「 低コストで安定したサイト運用ができる」「高速なサイトを構築できる」「セキュリティ的に安全」というメリットがあります。

it.kensan.net

2023.02.04

特徴

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つのパターンがあり、それぞれ特徴やメリットとデメリットを見てきました。用途にあった方法で構築していきましょー

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

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

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

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

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

【日本語URL対応版】WordPressのコンテンツを StaticPress S3プラグインを使用して配信する方法

WordPressコンテンツをStaticPressS3を使用してS3+CloudFrontで配信する方法を記載。 コピペで環境構築できます。S3+CloudFrontで配信することで「 低コストで安定したサイト運用ができる」「高速なサイトを構築できる」「セキュリティ的に安全」というメリットがあります。

it.kensan.net

2023.02.04

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

StaticPressを使ってEC2上のWordPressコンテンツをCloudFront経由で簡単に配信する方法

WordPressのコンテンツを静的ページ化し、CloudFrontで配信できるようにします。静的ページ化するところはWordPressのプラグインStaticPressを使用します。CloudFrontのキャッシュクリアはClear CloudFront Cacheプラグインを使用します

it.kensan.net

2023.02.18

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

WordPressのコンテンツをCloudFrontを使って配信しているケースで、更新した内容がサイトに反映されない原因

WordPressのコンテンツをCloudFrontで配信しているケースで、更新内容が反映されない原因と対処法を知りたい、原因と対処法は知っているけど、もっと簡単に対処したいという悩みを抱えた方向けの記事です。WordPressのプラグイン「Clear CloudFront Cache」を使用することで簡単に対処可能。

it.kensan.net

2023.02.13

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

インストール方法

以下の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の導入については以下の記事をご参照ください。

【日本語URL対応版】WordPressのコンテンツを StaticPress S3プラグインを使用して配信する方法

WordPressコンテンツをStaticPressS3を使用してS3+CloudFrontで配信する方法を記載。 コピペで環境構築できます。S3+CloudFrontで配信することで「 低コストで安定したサイト運用ができる」「高速なサイトを構築できる」「セキュリティ的に安全」というメリットがあります。

it.kensan.net

2023.02.04

本記事は上記の構築をした後など、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でコンテンツ配信するケースの導入例

【日本語URL対応版】WordPressのコンテンツを StaticPress S3プラグインを使用して配信する方法

WordPressコンテンツをStaticPressS3を使用してS3+CloudFrontで配信する方法を記載。 コピペで環境構築できます。S3+CloudFrontで配信することで「 低コストで安定したサイト運用ができる」「高速なサイトを構築できる」「セキュリティ的に安全」というメリットがあります。

it.kensan.net

2023.02.04

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

StaticPressを使ってEC2上のWordPressコンテンツをCloudFront経由で簡単に配信する方法

WordPressのコンテンツを静的ページ化し、CloudFrontで配信できるようにします。静的ページ化するところはWordPressのプラグインStaticPressを使用します。CloudFrontのキャッシュクリアはClear CloudFront Cacheプラグインを使用します

it.kensan.net

2023.02.18

本記事は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);
  }
}

StaticPress使用時は以下の観点からBasic認証を設定しておくことをお勧めします。

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

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

【日本語URL対応版】WordPressのコンテンツを StaticPress S3プラグインを使用して配信する方法

WordPressコンテンツをStaticPressS3を使用してS3+CloudFrontで配信する方法を記載。 コピペで環境構築できます。S3+CloudFrontで配信することで「 低コストで安定したサイト運用ができる」「高速なサイトを構築できる」「セキュリティ的に安全」というメリットがあります。

it.kensan.net

2023.02.04

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

StaticPressを使ってEC2上のWordPressコンテンツをCloudFront経由で簡単に配信する方法

WordPressのコンテンツを静的ページ化し、CloudFrontで配信できるようにします。静的ページ化するところはWordPressのプラグインStaticPressを使用します。CloudFrontのキャッシュクリアはClear CloudFront Cacheプラグインを使用します

it.kensan.net

2023.02.18

Basic認証を設定した方がいい理由を書いていきます！

Basic認証を設定した方が良い理由

配信ケース毎にBasic認証を設定した方が良い理由を記載します

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

AWSのEC2のStaticPressにて静的HTMLを生成し、静的HTMLをStaticPress S3を使用して他のサーバ(S3+CloudFront)に転送して配信するケースでのBasic認証について記載します。

HTMLを生成するサーバ(EC2)には、Basic認証をかけておいた方がSEO的に良いです。

SEO的に良い理由としては、Basic認証をかけないと、

「EC2」と「S3+CloudFront」の両方でコンテンツを配信することになり、

Google等のクローラーから見ると２つのサーバで同一の記事が配信されている（コピー記事配信している）ように見えてしまうためです。

また、WordPress管理画面にアクセスの際に、Basic認証が必要になるため、セキュリティ向上が期待できます。

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

StaticPressを使用して、WordPressが動いているサーバで、静的ファイルの配信を行う場合も、以下の2つのURLが存在することになりますので、「WordPressのURL」の方にはBasic認証をかけた方がSEO的に良いです。

• WordPressのURL
• WordPressを静的ファイル化して配信するURL

また、WordPress管理画面にアクセスの際に、Basic認証が必要になるため、セキュリティ向上が期待できます。

Basic認証を設定するメリットのまとめ

配信ケース毎にBasic認証を設定した方が良い理由を記載しましたが、2つの配信ケースで共通して以下のメリットがあると言えます。

Basic認証のかけ方

それでは、本題のBasic認証のかけ方について記載していきます。

コピペでBasic認証を設定できるよう記載しています。

大きく以下の2ステップの作業となります。

「.htaccess 」/「.htpasswd 」ファイル作成方法

WordPressにBasic認証を設定する方法から書いていきます！

「.htaccess 」ファイル作成方法

ファイルをviで開きます。

vi {WordPressドキュメントルート}/.htaccess

以下のテキストを貼り付けて保存します。

AuthUserFile {WordPressドキュメントルート}/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user

{WordPressドキュメントルート}の部分は自分の環境のものに書き換える必要があります。

WordPressドキュメントルートは、WordPressがインストールされているフォルダ(「wp-config.php」ファイルなどがあるフォルダ)を指しています。

「.htpasswd 」ファイル作成方法

ファイルをviで開きます。

vi {WordPressドキュメントルート}/.htpasswd

ファイルに記載する内容は以下のサイトのように「.htpasswd」の中身を生成してくれるツールがあるので、

ツールを利用させてもらうなどして、「.htpasswd」の中身をgetしてから、実際に上記で開いたファイルに書き込みをします。

htpasswdファイル生成(作成)

htpasswdファイル生成（htpasswdファイル作成）するweb・ウェブ制作に役立つ便利ツール。htaccessを利用したユーザー認証によるアクセス制限（ベーシック認証）が可能です。

www.luft.co.jp

Basic認証動作確認

WordPressの任意の画面にアクセスして、

Basic認証がかかっていること、Basic認証を突破できることを確認します。

StaticPressのソースコード修正

Basic認証を設定した状態でStaticPressを動かせるように、

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

Basic認証をかけた状態でStaticPressを使用して、静的ファイルを生成する際(再構築する際)には、ソースコードを編集する必要があります。

ソースコードを編集しないと、静的ファイルが正しく生成されないので要注意です。

修正方法は以下をご参照ください。

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

修正前


static public function basic_auth(){

return get_option(self::OPTION_STATIC_BASIC, false);

}

修正後


static public function basic_auth(){

//return get_option(self::OPTION_STATIC_BASIC, false);

return '{「ID:パスワード」をbase64エンコードしたもの}';

}

「{「ID:パスワード」をbase64エンコードしたもの}」の記述内容ついて、

base64エンコードは以下のようなサイトを利用させてもらうのがオススメです。

base64エンコード/デコードツール｜株式会社エン・ＰＣサービス

base64エンコード/デコードをウェブ上で行うためのツールです

www.en-pc.jp

動作確認する

動作確認用の修正をWordPressで行い、

StaticPressで再構築を行ったあと、

配信サイト側に修正内容が反映されていればOKです！

本記事の通りに構築することで、以下のようなエラーを回避できます。

次に、StaticPress S3プラグインを使用してS3+CloudFrontで配信することのメリットについて触れておきます。以下のメリットがあります。

メリット

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

WordPressのセキュリティリスクとセキュリティ対策

WordPressはセキュリティ対策を取らないとリスクが高いと思っています。 セキュリティ対策としてはセキュリティプラグインの導入などがあると思いますが、一番安全なのはStaticPress S3を使用してコンテンツをS3＋CloudFrontで配信し、WordPressが動いているサーバを隠してしまう対策です。

it.kensan.net

2023.02.12

逆にデメリットも上げておきます

まず、ゴールイメージです。

ゴールイメージ

最終的なゴールイメージのAWS構成図は以下の通りです。

StaticPress S3+S3+CloudFront

次に、環境構築で使用するものをリストアップしていきます！

使うもの

まず、使用するものをリストアップしていきます。

AWSリソース

使用するAWSリソースは以下の通りです。

Word Pressプラグイン

使用するWord Pressプラグインは以下の通りです。

それでは、環境構築していきます！

構築作業

具体的には以下の作業をしていきます！

S3

• 適切なバケット名でバケットを新規作成する

Cloud Front

• ディストリビューションを新規作成する
  • オリジンは作成したS3バケットを指定する

CloudFrontとS3の設定の詳細

CloudFrontとS3の設定の詳細は以下の記事をご参照ください

AWS CloudFrontからS3へのアクセス制御をOACを使って正しく設定する

S3のコンテンツをCloudFront経由で配信する際、CloudFrontからS3へのアクセス制御をOAC(Origin access control settings)を使って正しく設定する方法を記載。OACは現在推奨されている設定なので、S3＋CloudFrontでサイト公開する際のスタンダードな方法です。

it.kensan.net

2023.02.23

EC2

次の設定でEC2インスタンスを起動します。

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



• 次にyum updateしておく

sudo yum -y update

Apacheインストール & 設定

• Apacheインストール

sudo yum -y install httpd

• Apacheのconfファイルを編集する

Apacheのconfファイルの場所：/etc/httpd/conf/httpd.conf

次の設定をhttpd.confの末尾に追記する

LoadModule 
rewrite_module modules/mod_rewrite.so

<Directory "/var/www/html/">

AllowOverride All

</Directory>

• Apacheを起動する

sudo service httpd start

• 今後自動で立ち上がるように設定する

sudo chkconfig httpd on

PHPインストール

• 管理者権限に切り替えておく

sudo su

• 時間の設定
  • ロンドンの時間になっているので日本時間に修正

ln -sf /usr/share/zoneinfo/Japan /etc/localtime

• dateコマンドで日本時間になっているか確認する

date

• PHPをインストールする

amazon-linux-extras enable php7.4


yum clean metadata

yum install php


yum install php-mbstring

• apacheを再起動

service httpd restart

Apacheとphpの動作確認

• 動作確認用ファイルの作成

 vi /var/www/html/index.php

• 動作確認用ファイルの中身

<?php


echo"test!!";

• 動作確認

以下の動作確認をします！

MySQLインストール

• yumでMySQLをインストールする

yum remove mariadb-libs


rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022


yum localinstall http://dev.mysql.com/get/mysql57-community-release-el7-7.noarch.rpm


yum -y install mysql-community-server


yum install php-xml -y

• phpからMySQLをコントロールするため追加プログラムを入れる

yum install -y php-mysqlnd

• MySQLを起動

service mysqld start

• MySQLの設定

mysql_secure_installation

初期パスワードを聞かれる

初期パスワードは/var/log/mysqld.logに吐かれているので、それを入力する

A temporary password is generated for root@localhost: [初期パスワード]

WordPressインストール

cd /var/www/html/


curl -O https://ja.wordpress.org/latest-ja.tar.gz

tar
xvf latest-ja.tar.gz


chown -R apache:apache wordpress


rm -f latest-ja.tar.gz

MySQLのデータベース作成

mysql -u root -p

CREATE DATABASE wordpress;

StaticPress S3設定

• まずはGitをインストールする

yum install git-all

• StaticPress S3をインストールする

cd wordpress/wp-content/plugins/

git clone https://github.com/megumiteam/staticpress-s3.git

chown -R apache:apache staticpress-s3


• ソース修正が必要なため、修正する

修正①：wp-content/plugins/staticpress-s3/includes/class-S3_helper.php

変更前

$magic_file = '/usr/share/misc/magic';

変更後

$magic_file = '/etc/httpd/conf/magic';

ソース修正②：wp-content/plugins/staticpress-s3/includes/class-S3_helper.php
18行目あたりにある、「__construct」をする
「Access Key」と「Sercret Key」の入力チェックを行っているif文をコメントアウト

修正後ソース

function __construct($access_key = null, $secret_key = null, $region = null) {

// if ($access_key && $secret_key) {

$this->init_s3($access_key, $secret_key, $region);

// }

}

StaticPressをインストールする

「http://ドメイン/wordpress/」にアクセスし、

WordPressの初期設定を行い、

プラグインStaticPressをインストールして有効化する。

ついでにStaticPress S3も有効化しておく。

StaticPressの設定をする

StaticPress設定画面で以下の設定を行う

次に以下のコマンドで静的HTMLファイルの出力先ディレクトリの権限設定をする

mkdir /wordpress_home/

chown -R apache:apache /wordpress_home

• ソース修正が必要なため修正する

修正ソース①：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');

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

// 変更前　以下をコメントアウト

//$permalink = get_permalink($post->ID);

//if (is_wp_error($permalink))

//      continue;

//$count = 1;

// 変更後　コメントアウトした箇所に以下を追記
$permalink = get_permalink($post->ID);
if (is_wp_error($permalink))continue;
if (preg_match('/.*\.html\/.*/', $permalink, $m)) 
{continue;}
$count = 1;

• WordPressのStaticPress画面から「再構築」を実施

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

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

MySQLの再設定をする（日本語文字化け対策）

このままですと投稿名が日本語の場合に文字化けするので、テーブルの文字コードを変更する

• /etc/my.cnfの末尾に以下を追記

character-set-server=utf8


sql_mode=ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION,ALLOW_INVALID_DATES

• MySQL再起動する

service mysqld restart

• MySQLに接続し、wp_urlsテーブルの文字コードを変更する

 mysql -uroot -p

 use wordpress;


ALTER TABLE wp_urls CONVERT TO CHARACTER SET utf8;

S3にHTMLを転送し、Cloud Frontで配信できるようにする

• WordPressのStaticPress画面から「再構築」を実施
• CloudFrontのドメインにアクセスし、WordPressコンテンツが見れれば成功！

StaticPressがうまく動かない場合

StaticPressが正常に動作しない場合の対処方法を記載します。

EC2の出力先ディレクトリにコンテンツが生成されない

• ドキュメントルートの権限を確認する
  • Apacheユーザで書き込み可能である必要がある
    • 以下のコマンドを実行します。


chown -R apache:apache /wordpress_home

S3にコンテンツがコピーされない

• AWSコンソールからS3のバケットを選択
  • アクセス許可タブを開く
    • オブジェクト所有者を編集
      • ACL 無効 (推奨)に更新し、再度、Word PressのStatic Press画面から「再構築」を行う

固定記事などが表示されない(403エラーとなる)ケースがある

• 以下の記事をご参照ください

WordPressのプラグインStaticPress S3で固定記事などが表示されない(403エラー)

WordPressのプラグインStaticPress S3で固定記事などが表示されない(403エラーが発生する)場合の対処法。エラー・表示されない原因と対処法ほうについて記載します。対処方法はStaticPressのPHPプログラムを修正する方法もありますが、CloudFrontの関数を使用する方法を記載しています

it.kensan.net

画像メディアのみS3にコピーされない

• 日本語やスペースが入っていると正常に動作しない模様
  • 画像のファイル名を英語＋スペースなしに変更して再度アップロードしてから、StaticPressで再構築する

ドメインが静的サイトURLに置き換わらない

• 以下の記事をご参照ください

StaticPressでドメインが静的サイト URLに置換されない時の対処法(WordPress)

WordPressのプラグインStaticPressを使用しているが、 StaticPressで生成された静的ファイルのリンクURLが、StaticPressで設定した「静的サイト URL」に置き換わらないことがありますが、これの対処法を記載しています。対処法はStaticPressのソース修正となります。

it.kensan.net

2023.02.12

サイトマップが出力されない

• 以下の記事をご参照ください

さゆフィクション | aws wordpress などなどゆるーく書いてます

it.kensan.net

追加で設定しておくと良いこと

正常に動いているけど、追加で設定しておくと良いことについて記載します！

WordPressの置いてあるEC2サーバでBasic認証をかける

• 以下の記事をご参照ください

WordPressのプラグインStaticPressでBasic認証を使う

StaticPress利用時のBasic認証のかけ方について記載。StaticPressで静的HTMLを生成して、StaticPress S3で静的ファイルをS3に転送して、配信する場合、Basic認証をかけることをお勧めします。Basic認証をかけるにはStaticPressのソース修正も必要となります

it.kensan.net

不要なページの出力を止める

• 以下の記事をご参照ください

WordPressのプラグインStaticPressで不要な静的ファイルが生成されないようにする

WordPressのプラグインStaticPressで不要な静的ファイルが生成されないようにする方法について記載。不要なファイルを生成されないようにすることで、ディスク容量の削減やStaticPressでの再構築時間の短縮が可能。StaticPressのソースコードを修正することで不要なファイルが生成されなくなります。

it.kensan.net

CloudFrontのキャッシュを簡単に消せるようにする

• 以下の記事をご参照ください

StaticPress S3と共存できるWordPressプラグインClear CloudFront Cacheを公開！

StaticPress S3と共存できるWordPressプラグイン「Clear CloudFront Cache」を公開！ WordPressコンテンツをCloudFront経由で配信している場合に使えるプラグイン。公開したプラグイン「Clear CloudFront Cache」はWP管理画面からインストール可能

it.kensan.net

2023.02.11