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