ただメモができるだけのブラウザアプリ「TextArea」はこちらw

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

WordPressのプラグインStaticPress S3で、CloudFront + S3でコンテンツ配信しているケースで、固定記事などが表示されない(403エラーになる)場合の対処法について記載します。

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

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

本記事は上記の構築をした後など、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のディストリビューションを指定
イベントタイプ:Viewer Request
キャッシュビヘイビア:環境にあったものを選択
(特別な設定をしていなければ、Defaultを選択)

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

動作確認

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

まとめ

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

CloudFrontの関数、便利ですね。

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

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

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

チュートリアル: CloudFront Functions を使用した単純な関数の作成 - Amazon CloudFront
このチュートリアルを完了すると、簡単な関数を作成して CloudFront Functions を使用できるようになります。
スポンサーリンク
AWSWordPress
フォローする
さゆフィクション