OACは現在推奨されている設定なので、S3＋CloudFrontでサイト公開する際のスタンダードな方法を記載していくと考えていただければいいと思います。

以下がゴールイメージです。

• CloudFrontの設定でOACを使用したうえで以下の２点を達成する
  • CloudFront経由でS3へアクセスできる
  • S3へ直接アクセスできない

本記事では、AWSマネージメントコンソール画面から設定をしますが、Terraformを使いたい方は以下の記事をご参照ください

Terraformを実践的な使い方ーCloudFrontからS3へのアクセス制御をOACを使って正しく設定する編

「S3＋CloudFrontで静的サイト構築」をTerraformで構築します。S3へのアクセス制御は「Origin access control settings(OAC AWS推奨のやつ)」を使います。Terraformは実践的な書き方で記載しているので、色々な環境構築の応用できます

it.kensan.net

2023.03.04

設定方法

CloudFrontとS3両方の設定が必要となります

まずはS3のバケットを作成します。

S3バケット作成

任意のバケット名でS3バケットを作成します。(既存のS3を使う場合は、この手順はスキップしてください)

CloudFrontのOAC設定

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

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

既存のディストリビューションを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を使う

S3のアクセス許可設定

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

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

動作確認

以下の点が問題なく動作すればOKです。

• CloudFront経由でS3へアクセスできる
  • 正常にサイト閲覧できればOKです
• S3へ直接アクセスできない
  • S3のオブジェクト URLでアクセス時にエラーとなればOKです

まとめ

S3＋CloudFrontでサイト公開する際のスタンダードな方法である、OAC(Origin access control settings)についてみてきました。結構簡単でしたねーAWSさん素晴らしいー

↓公式記事のURLを載せておきます↓

Amazon Simple Storage Service オリジンへのアクセスの制限 - Amazon CloudFront

Amazon CloudFront オリジンアクセスコントロール (OAC) で、Amazon S3 オリジンへのアクセスを制限します。

docs.aws.amazon.com

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

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

it.kensan.net

2023.02.23

S3 + CloudFrontでWEBサイトを公開する場合、htaccessは使えませんが、htaccessの以下のような動作をさせたい場合の対応方法を記載します。

対応方法は2つあります。

本記事ではCloudFrontの関数を使用して、「URL書き換え」や「Basic認証」をする方法を試してみます。

CloudFrontの関数の特徴として以下のようなことが挙げられます。

• Lambda Edgeより手前で高速に動作する
  • めっちゃ早いということ
• 実行時間は1ms 以内に収める必要がある
  • 簡単な(すぐに終わる)処理にしか向かない
• 言語はJavaScriptのみ対応

めっちゃ早いというメリットがあるが、すぐに終わる処理にしか向かないという制約があります。

「URLの書き換え」や「Basic認証」はすぐに終わる処理なので、CloudFront 関数のメリットをうまく生かすことができます。

それでは、CloudFront関数の設定方法を記載していきます！
「URL書き換え」と「Basic認証」で共通する設定方法になります。
「URL書き換え」や「Basic認証」のソースコードは、設定方法の後に記載します。

CloudFront関数の設定方法

設定の大まかな流れは以下のようになります。

具体的な設定方法は以下の通りです。

1. AWSマネージメントコンソール画面からCloudFrontダッシュボードを開き、関数をクリック
2. 関数を作成ボタン押下
3. 関数の名前を入力し、関数を作成
4. 関数コードを編集する
   • ソースコードの例は以降の章をご参照ください
5. 発行タブから関数を発行する
6. 関連付けられているディストリビューションの「関連付けを追加」ボタン押下
7. ディストリビューションを選択し、イベントタイプはViewer Requestを選択、関数の関連づけをしたいビヘイビアを選択
8. 「関連付けを追加」ボタンを押下

次は、URLの書き換えのソースコードの例を記載します。

URLの書き換えのソースコード

「hoge」のパスが来たら「fuga」に書き換える例です。

「https://ドメイン/hoge」のアクセスを「https://ドメイン/fuga」に書き換えるイメージです。

この際、アクセスするパスが変更になるだけで、リダイレクトは発生しません。

function handler(event) {
  var request = event.request;
  var uri = request.uri;

  if (uri.startsWith("/hoge/")) {
    request.uri = "/fuga/";
  }
  return request;
}

リダイレクトさせたい場合は以下をご参照ください

リダイレクトさせるソースコード

「hoge」のパスが来たら「fuga」にリダイレクトさせる例です。

「https://ドメイン/hoge」のアクセスを「https://ドメイン/fuga」にリダイレクトします。

function handler(event) {
  var request = event.request;
  var host = request.headers.host.value;
  var uri = request.uri;
　var redirect_url;

  // 「hoge」のパスが来たら「fuga」に書き換える
  if (uri.startsWith("/hoge/")) {
    redirect_url = `https://${host}/fuga`;
  } else {
    // 「hoge」のパスはリダイレクトせず、そのままアクセス
    return request;
  } 

 // リダイレクト
 var response = { 
   statusCode: 301,
   statusDescription: 'Moved Permanently',
   headers: 
     { "location": { "value": redirect_url } }
  }
  return response;
}

次は、Basic認証について記載します。

Basic認証のソースコード

まず認証キーを用意します。

echo -n "{ID}:{パスワード}" | base64

{ID}、{パスワード}の部分は、使用するIDとパスワードに書き換えて実行します。

実行した結果は以下のソースの「{認証キー}」の部分と置き換えます。

function handler(event) {
  var request = event.request;
  var headers = request.headers;

  var authString = "Basic {認証キー}";

  if (
    typeof headers.authorization === "undefined" ||
    headers.authorization.value !== authString
  ) {
    return {
      statusCode: 401,
      statusDescription: "Unauthorized",
      headers: { "www-authenticate": { value: "Basic" } }
    };
  }
  return request;
}

まとめ

CloudFront 関数を使うと、S3 + CloudFrontで配信している場合でも、htaccessのような「URL書き換え」や「Basic認証」が簡単にできたと思います。

CloudFront 関数はJavaScriptしか使えませんが、JavaScriptは多くの人が使える言語かと思います。そのため、CloudFront 関数の書き方に慣れてしまえば、htaccessより簡単に設定できるかもしれません

↓公式記事のURLも載せときますねー↓

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

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

docs.aws.amazon.com

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

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

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

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

it.kensan.net

2023.02.04

WordPressをインストールする

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

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

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

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

it.kensan.net

2023.02.18

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 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 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