CloudFront | さゆフィクション http://it.kensan.net/it aws wordpress などなどゆるーく書いてます Sun, 30 Jun 2024 07:47:03 +0000 ja hourly 1 https://wordpress.org/?v=6.5.2 https://it.kensan.net/wp-content/uploads/2023/03/cropped-icon-32x32.png CloudFront | さゆフィクション http://it.kensan.net/it 32 32 ALB(ロードバランサー)でCloudFront経由のアクセスに絞るときは、カスタム HTTP ヘッダーとマネージドプレフィックスリストを併用する https://it.kensan.net/alb-cloudfront-accesss.html Sun, 30 Jun 2024 07:40:39 +0000 http://35.77.216.202/it/?p=2095 ALB(ロードバランサー)でCloudFront経由のアクセスに絞る方法として、以下の方法があると思います。

  • マネージドプレフィックスリスト(managed prefix list)によりアクセスを絞る
  • カスタム HTTP ヘッダーによりアクセスを絞る

    上記はよく知られた方法かと思いますので、詳細は割愛します。

    本記事で記載したいことは、上記2つを併用した方が安心だよということです。

    まずは、用語の説明からです。

    用語の説明

    マネージドプレフィックスリスト(managed prefix list)とは

    AWS Managed Prefix Listは、AWSによって管理されるIPアドレスのプレフィックスリストです。特定のAWSサービス(例えばCloudFrontやAmazon S3など)のIPアドレス範囲を含んでおり、ネットワーク設定やセキュリティ設定を簡素化するために使用されます。

    本記事では、「マネージドプレフィックスリスト=CloudFrontのIP」として記載します。

    カスタム HTTP ヘッダー

    カスタム HTTP ヘッダーは、HTTP リクエストやレスポンスに含まれるユーザー定義のヘッダーであり、標準の HTTP ヘッダーではカバーされない追加の情報を送信するために使用されるものです。

    なぜ併用した方がいいのか

    ALB(ロードバランサー)でCloudFront経由のアクセスに絞る際に、マネージドプレフィックスリストとカスタム HTTP ヘッダーを併用する場合、以下のようになります。

    • マネージドプレフィックスリスト(managed prefix list)によるアクセス制限
      • IP制限により、CloudFront経由のアクセスを絞る
        • CloudFront経由であれば、別アカウントのものでも許可してしまう
    • カスタム HTTP ヘッダーによるアクセス制限
      • カスタムHTTPヘッダーにより、CloudFront経由にアクセスを絞る
        • 自分が作成したCloudFrontのみにアクセスを絞ることができる
    • →マネージドプレフィックスリストとカスタム HTTP ヘッダーを併用することで、自分が作成したCloudFrontのみにアクセスを絞ることができる

    マネージドプレフィックスリスト(managed prefix list)だけでは、CloudFrontのIP制限のため、CloudFrontからの接続であれば、別アカウントのものでも許可してしまいます。

    そのため、カスタム HTTP ヘッダーも併用が必要となります。カスタム HTTP ヘッダーにより、自分が作成したCloudFrontのみにアクセスを絞ることができます。

    2段階で網をかけておいた方が安心ですね。

    カスタム HTTP ヘッダーとマネージドプレフィックスリストの設定方法

    公式記事に詳しく書いてあるので、以下の公式の記事をご参照ください。

    Application Load Balancer へのアクセスを制限する - Amazon CloudFront
    Amazon CloudFront でカスタムオリジンヘッダーを使用して、ユーザー(閲覧者)が Application Load Balancer に直接アクセスできないようにします。

    まとめ

    ALB(ロードバランサー)でCloudFront経由のアクセスに絞るときは、カスタム HTTP ヘッダーとマネージドプレフィックスリストを併用するのが良いです。

    マネージドプレフィックスリスト単体でも、https(443)の通信にしているから問題とならないケースもあると思いますが、基本的にはカスタム HTTP ヘッダーとマネージドプレフィックスリストを併用した方が安心かと思います。

    ]]>
    CloudFrontログのHTTP ステータスコード000について調べてみた https://it.kensan.net/cloudfront000.html Sat, 13 May 2023 03:11:24 +0000 http://3.113.9.194/it/?p=1697 CloudFrontログのHTTP ステータスコード000について、どのような場合に発生するか調べてみました。

    CloudFrontログでHTTP ステータスコードが000のモノをよく見るけど、これはどういった時に発生するのか、無視していいモノなのか分かりませんでしたので、調べましたーという内容になります!

    公式ガイドでは、以下の記載があります。

    • 000。この値は、サーバーがリクエストに応答する前に、ビューワーが接続を閉じたことを示します。サーバーがレスポンスの送信を開始した後にビューワーが接続を閉じた場合、このフィールドには、サーバーが送信を開始したレスポンスの HTTP ステータスコードが含まれます。
    標準ログ (アクセスログ) の設定および使用 - Amazon CloudFront
    ログファイルを使用してオブジェクトに対するユーザーリクエストに関する情報を取得します。

    「ビューワーが接続を閉じたこと = ブラウザを閉じた」と考えていいものかという疑問です。

    Lambda@Edgeを使ってSleepを入れながら確認した結果、HTTP ステータスコードが000は、ブラウザを閉じた場合など接続が切れた場合に発生することが分かりました!

    接続が切れた場合なので、基本的に無視して良い(どうしようも無い)ログということです。

    ポイント

    <疑問>
    CloudFrontログでHTTP ステータスコードが000のものは何者?
    <調査方法>
    Lambda@Edgeを使ってSleepを入れながら確認
    <調査結果>
    ブラウザを閉じた場合など接続が切れた場合に発生する

     

    調査方法の詳細と調査結果を書いていきます!

    調査方法

    CloudFrontのオリジンをS3にして作成し、Lambda@Edgeを使ってSleepを入れながら確認しました。

    まずは、調査の準備について記載します。

    調査準備

    CloudFrontとS3の作成

    1. S3バケットを作成
    2. CloudFrontのディストリビューションをオリジン:S3に設定して作成

    次にSleepを入れるLambda@Edgeを作成します!

    リクエスト時のLambda@Edge

    以下のものを作成しておきます。

    const sleep = (m) => {
      return new Promise((resolve) => setTimeout(resolve, m));
    };
    export const handler = async(event) => {
        await sleep(2000);
        return event['Records'][0]['cf']['request'];
    };
    

    レスポンス時のLambda@Edge

    以下のものを作成しておきます。

    const sleep = (m) => {
      return new Promise((resolve) => setTimeout(resolve, m));
    };
    export const handler = async(event, context, callback) => {
        await sleep(2000);
        callback(null, event.Records[0].cf.response);
    };

    調査実施

    以下のイベントのタイミングで、上記で用意したLambda@Edgeを実行し、Sleepするようにします。Sleepしている間に接続を切ったら、どのようになるか確認していきます。

    • ビューワーリクエスト
    • オリジンリクエスト
    • ビューワーレスポンス
    • オリジンレスポンス

    各イベントの詳細は以下をご参照ください。

    Lambda@Edge 関数をトリガーできる CloudFront イベント - Amazon CloudFront
    特定の CloudFront イベントを使用して、Lambda 関数の実行をトリガーできます。

    ビューワーリクエスト

    ビューワーリクエストに「リクエスト時のLambda@Edge」を設定して、CloudFrontにアクセスし、Sleep中に通信を切断します。

    動作確認には「ブラウザ」と「curlコマンド」を使用しました。

    アクセス中にブラウザのタブを閉じた場合の結果

    HTTP ステータスコード(sc-status):000

    x-edge-detailed-result-type:ClientCommError

    curlコマンドのタイムアウトを1秒に設定して実行した場合の結果

    <実行したコマンド>

    curl --max-time 1 {url}

    <結果>

    HTTP ステータスコード(sc-status):000

    x-edge-detailed-result-type:ClientCommError

    次はオリジンリクエストです。

    オリジンリクエスト

    オリジンリクエストに「リクエスト時のLambda@Edge」を設定して、CloudFrontにアクセスし、Sleep中に通信を切断します。

    アクセス中にブラウザのタブを閉じた場合の結果

    HTTP ステータスコード(sc-status):000

    x-edge-detailed-result-type:ClientCommError

    curlコマンドのタイムアウトを1秒に設定して実行した場合の結果

    <実行したコマンド>

    curl --max-time 1 {url}

    <結果>

    HTTP ステータスコード(sc-status):000

    x-edge-detailed-result-type:ClientCommError

    次は、ビューワーレスポンスです。

    ビューワーレスポンス

    ビューワーレスポンスに「レスポンス時のLambda@Edge」を設定して、CloudFrontにアクセスし、Sleep中に通信を切断します。

    アクセス中にブラウザのタブを閉じた場合の結果

    HTTP ステータスコード(sc-status):000

    x-edge-detailed-result-type:ClientCommError

    curlコマンドのタイムアウトを1秒に設定して実行した場合の結果

    <実行したコマンド>

    curl --max-time 1 {url}

    <結果>

    HTTP ステータスコード(sc-status):000

    x-edge-detailed-result-type:ClientCommError

    次は、オリジンレスポンスです。

    オリジンレスポンス

    オリジンレスポンスに「レスポンス時のLambda@Edge」を設定して、CloudFrontにアクセスし、Sleep中に通信を切断します。

    アクセス中にブラウザのタブを閉じた場合の結果

    HTTP ステータスコード(sc-status):000

    x-edge-detailed-result-type:ClientCommError

    curlコマンドのタイムアウトを1秒に設定して実行した場合の結果

    <実行したコマンド>

    curl --max-time 1 {url}

    <結果>

    HTTP ステータスコード(sc-status):000

    x-edge-detailed-result-type:ClientCommError

    調査結果

    以下のイベントのタイミングで接続を切った場合、結果は同じで、全てのケースで「HTTP ステータスコード000」が発生しました。

    • ビューワーリクエスト
    • オリジンリクエスト
    • ビューワーレスポンス
    • オリジンレスポンス

    HTTP ステータスコード000の正体は、ブラウザの接続が切れたケースという結果となります。

    ついでに、オリジンにALBを指定して、接続を切った場合、ALBのログがどうなるかについても調査しました!

    オリジンにALBを指定して、接続を切った場合のALBログ調査

    CloudFrontの調査と同様Lambda@EdgeでSleepを入れて調査しました。

    ビューワーリクエスト中に接続が切れた場合

    ログ出力されない

    →オリジン(ALB)にリクエストが届いていない

    オリジンリクエスト中に接続が切れた場合

    ログ出力されない

    →オリジン(ALB)にリクエストが届いていない

    ビューワーレスポンス中に接続が切れた場合

    HTTP ステータスコード200でログ出力

    →ALB自体は正常終了

    オリジンレスポンス中に接続が切れた場合

    200

    →ALB自体は正常終了

    まとめ

    以下の結果となりましたー!

    CloudFrontログのHTTP ステータスコード000は何者?の疑問が解消されましたー!

    まとめ

    <疑問>
    CloudFrontログでHTTP ステータスコードが000のものは何者?
    <調査方法>
    Lambda@Edgeを使ってSleepを入れながら確認
    <調査結果>
    ブラウザを閉じた場合など接続が切れた場合に発生する

    ]]>
    Terraformを実践的な使い方ーCloudFrontからS3へのアクセス制御をOACを使って正しく設定する編 https://it.kensan.net/terraform-cloudfront-oac.html Sat, 04 Mar 2023 08:51:25 +0000 http://3.113.9.194/it/?p=674 Terraformを使ってS3+CloudFront構成の静的サイトを構築してみます。

    • やること
      • S3+CloudFrontで静的サイト構築
      • Origin access control settings(OAC)を使ってアクセス制御(AWS推奨のやつ)
    • どうやってやるか
      • Terraformを使います
        • Terraformの使い方は以下の点に注意し、実践的な方法で記載
          • Terraformバージョンを固定する
          • プロバイダーバージョンを指定する
          • tfstateファイルはS3で管理するようにする
          • インフラリソースは簡単に削除できないように、削除保護設定をしておく
          •  tfstateファイルを管理するS3バケットの作成
            • tfstateを管理するS3バケットは手動で作成する
          •  実行前に以下のコマンドを実行し、安全にインフラ構築する
            • terraform fmt
            • terraform validate
            • tflint
            • terraform plan

    AWSマネージメントコンソール画面から、S3+CloudFrontでOAC使う方法は以下の記事をご参照ください。

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

    Terraformの基本的な使い方は以下の記事をご参照ください

    [入門編]Terraformを実践で使う際のポイント
    Terraformを実践で使う際のポイントについて記載します。 チームで安全にTerraformを扱うには、tfstateの管理やリソース保護も必要になってきますので、この点にも触れています。 具体的には「ファイル構成」「実行手順」の順に、記載していきます。

    本記事では「TerraformでCloudFrontからS3へのアクセス制御をOrigin access control settings(OAC)を使って正しく設定する方法」を題材に、実践でTerraformを使う際のポイントを記載しています。色々な環境構築の基礎知識となり、応用可能な情報となります。

    まずは、Terraformソースコードを作成していきます。

    Terraformソースコード

    4つのファイルを使用します。

    • provider.tf
      • 以下のような情報を記載します。
        • terraformバージョン
        • AWSプロバイダーの定義
        • tfstateファイルを管理する場所の定義
    • variables.tf
      • ローカル変数の管理
    • aws_s3_bucket.tf
      • S3バケットを管理
    • aws_cloudfront_distribution.tf
      • CloudFrontを管理

    次に、4つのファイルに記載する内容について記載していきます。

    ファイル名:provider.tf

    
    # terraformバージョンを固定
    terraform {
      required_version = "1.3.9"
    }
    
    # AWSプロバイダーの定義
    terraform {
      required_providers {
        aws = {
          source  = "hashicorp/aws"
          version = "~> 4.0"
        }
      }
    }
    
    
    #tfstateファイルを管理するS3バケットを定義
    terraform {
      backend "s3" {
        bucket = "{tfstateファイルを管理するS3バケット名}"                #バケット名
        key    = "terraform-test/terraform.tfstate" #tfstateファイルごとに異なる任意の値
        region = "ap-northeast-1"
      }
    }
    

    ファイル名:variables.tf

    
    locals {
      s3_bucket_name = {
        public = "{作成するバケット名}"
      }
    }
    

    ファイル名:aws_s3_bucket.tf

    
    # S3バケット作成
    resource "aws_s3_bucket" "terraform_develop" {
      bucket = local.s3_bucket_name.public
      # 削除保護
      lifecycle {
        prevent_destroy = true
      }
    }
    # バケットポリシー
    resource "aws_s3_bucket_policy" "terraform_develop" {
      bucket = aws_s3_bucket.terraform_develop.id
      policy = data.aws_iam_policy_document.s3_develop_policy.json
    }
    
    # CloudFrontからのアクセスのみを許可
    data "aws_iam_policy_document" "s3_develop_policy" {
      statement {
        principals {
          type        = "Service"
          identifiers = ["cloudfront.amazonaws.com"]
        }
        actions   = ["s3:GetObject"]
        resources = ["${aws_s3_bucket.terraform_develop.arn}/*"]
        condition {
          test     = "StringEquals"
          variable = "aws:SourceArn"
          values   = [aws_cloudfront_distribution.terraform_develop.arn]
        }
      }
    }
    

    ファイル名:aws_cloudfront_distribution.tf

    
    # OAC作成
    resource "aws_cloudfront_origin_access_control" "terraform_develop" {
      name                              = "terraform_develop"
      origin_access_control_origin_type = "s3"
      signing_behavior                  = "always"
      signing_protocol                  = "sigv4"
    }
    # ディストリビューション作成
    resource "aws_cloudfront_distribution" "terraform_develop" {
      enabled = true
      # オリジン設定
      origin {
        origin_id   = aws_s3_bucket.terraform_develop.id
        domain_name = aws_s3_bucket.terraform_develop.bucket_regional_domain_name
        // OACを設定
        origin_access_control_id = aws_cloudfront_origin_access_control.terraform_develop.id
      }
      # 削除保護
      lifecycle {
        prevent_destroy = true
      }
      # ビヘイビア設定
      default_cache_behavior {
        target_origin_id       = aws_s3_bucket.terraform_develop.id
        viewer_protocol_policy = "redirect-to-https"
        cached_methods         = ["GET", "HEAD"]
        allowed_methods        = ["GET", "HEAD"]
        forwarded_values {
          query_string = false
          headers      = []
          cookies {
            forward = "none"
          }
        }
      }
      restrictions {
        geo_restriction {
          restriction_type = "none"
        }
      }
      viewer_certificate {
        cloudfront_default_certificate = true
      }
    }
    

    Terraformを実行して環境構築していきます!

    Terraformの実行

    以下のコマンドを実行していきます。

    // tfstateファイルを管理するS3バケット作成
    aws s3 mb s3://{tfstateファイルを管理するS3バケット}
    
    //ワークスペースを初期化する
    terraform init
    
    // コードフォーマット
    terraform fmt
    
    // バリデーション
    terraform validate
    
    // 不正なコードを検出
    tflint
    
    // 実行計画を確認
    terraform plan
    
    // リソース作成
    terraform apply

    動作確認

    以下の2点確認できればOKです。

    • S3にindex.htmlファイルを作成して、「https://ディストリビューションドメイン名/index.html」でアクセスできる
    • S3のオブジェクト URLでアクセスできないこと

    あと片付け

    Terraformファイル(.tfファイル)での、S3とCloudFrontの設定について、「prevent_destroy」を以下の通り変更します

    • 変更前:prevent_destroy = true
    • 変更後:prevent_destroy = false

    削除不可の状態(削除保護されている状態)から削除可能に変更後、削除を行うイメージです。

    以下のコマンドで作成したリソースを削除します。

    terraform apply
    
    terraform destroy
    

    まとめ

    「CloudFrontからS3へのアクセス制御をOrigin access control settings(OAC)を使って正しく設定する」方法を、Terraformの実践的な使い方で記載しました。

    色々な環境構築に応用できるかと思います。Terraformの実践的な使い方のポイントを再度あげておきます

    • Terraformバージョンを固定する
    • プロバイダーバージョンを指定する
    • tfstateファイルはS3で管理するようにする
    • インフラリソースは簡単に削除できないように、削除保護設定をしておく
    •  tfstateファイルを管理するS3バケットの作成
      • tfstateを管理するS3バケットは手動で作成する
    • 実行前に以下のコマンドを実行し、安全にインフラ構築する
      • terraform fmt
      • terraform validate
      • tflint
      • terraform plan

     

    最後にCloudFrontのOACに関する公式記事を載せておきます。

    Amazon CloudFront オリジンアクセスコントロール(OAC)のご紹介 | Amazon Web Services
    本記事は、「Amazon CloudFront introduces Origin Access Contro
    ]]>
    AWS CloudFrontからS3へのアクセス制御をOACを使って正しく設定する https://it.kensan.net/aws-cloudfront-s3-oac.html Wed, 22 Feb 2023 21:25:20 +0000 http://3.113.9.194/it/?p=520 S3のコンテンツをCloudFront経由で配信するケースにおいて、CloudFrontからS3へのアクセス制御をOAC(Origin access control settings)を使って正しく設定する方法について記載します。

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

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

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

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

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

    設定方法

    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を使う

    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 オリジンへのアクセスを制限します。
    ]]>
    AWS S3 + CloudFrontでhtaccessのような「URL書き換え」や「Basic認証」をする方法 https://it.kensan.net/aws-s3-cloudfront-htaccess.html Wed, 22 Feb 2023 13:38:29 +0000 http://3.113.9.194/it/?p=513 本記事ではS3 + CloudFrontでWEBサイトを公開できる状態であることを前提に記載します。S3 + CloudFrontでWEBサイトを公開する方法は以下の記事をご参照ください

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

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

    やりたいこと

    URLの書き換え
    Basic認証

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

    2つの対応方法

    Lambda@Edgeを使用する
    CloudFrontの関数を使用する

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

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

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

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

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

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

    CloudFront関数の設定方法

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

    大まかな流れ

    関数作成
    関数を発行し、ディストリビューションのViewer Requestと紐付ける

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

    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 を使用できるようになります。
    ]]>
    StaticPressを使ってEC2上のWordPressコンテンツをCloudFront経由で簡単に配信する方法 https://it.kensan.net/aws_ec2_wordpress_cloudfront.html Fri, 17 Feb 2023 21:46:32 +0000 http://3.113.9.194/it/?p=454

    WordPressのコンテンツを静的ページ化し、CloudFrontで配信できるようする!ということをやっていきます。

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

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

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

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

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

    ①WordPressコンテンツを静的ページ化
    ②静的ページ化をCloudFrontで配信
    ③WordPressURLにはBasic認証をかける

    使用するプラグイン

    StaticPress
    →静的ページ化で使用
    Clear CloudFront Cache
    →CloudFrontキャッシュの削除で使用

    それでは、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管理画面からインストール可能です。

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

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

    WordPressURLにBasic認証をかける

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

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

    メリット
    • WordPress管理画面へのアクセスにはBasic認証が必要
      • セキュリティ向上
    • 「WordPressを静的ファイル化して配信するURL」と「WordPressのURL」で、同一の記事が配信されていると、Google等のクローラーにみなされないようにする
      • SEO対策になる

     

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

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

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

    ]]>
    WordPressプラグインStaticPage S3 sync CloudFront cache clear利用方法 https://it.kensan.net/static-s3-sync-cloudfront-cache-clear.html Fri, 17 Feb 2023 13:00:17 +0000 http://3.113.9.194/it/?p=446 WordPressのプラグイン「StaticPage S3 sync and CloudFront cache clear」でStaticPressなどを使用して生成した静的ファイルをCloudFront+S3で配信する方法を記載します。

    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で配信することで「 低コストで安定したサイト運用ができる」「高速なサイトを構築できる」「セキュリティ的に安全」というメリットがあります。

    WordPressをインストールする

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

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

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

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

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

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

    • Simply Static
      • 詳細は以下のサイトを参考にさせてもらうといいです。
    ワードプレスで静的HTMLを出力するプラグイン「Simply Static」
    ワードプレスで静的HTMLを出力するプラグイン「Simply Static」を試してみました。機能が限定的で設定も少なく使いやすいです。
    • StaticPress
      • こちらは以下のサイトを参考にさせてもらいましょう
    WordPressを静的なサイトに変換するプラグイン「StaticPress」
    今回はWordPressプラグイン「StaticPress」のご紹介です。WPで組んだサイトを静的なサイトに簡単に変換することができます。クライアントの意向により使用できない場面や使用するサーバーによってはPHPバージョンが対応していない場合などに便利です。

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

    StaticPage S3 sync and CloudFront cache clearを使うにあたって、WordPressが動作しているサーバにAWS CLIがインストールされている必要があります。
    AWS CLIがインストールされていない場合はインストールします。

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

    1. Githubからプラグインをダウンロードします。
    2. zip ファイルをコンピューター上の場所に保存します。
    3. WordPress 管理パネルを開き、[プラグイン] -> [新規追加] をクリックします。
    4. [アップロード] をクリックし、このページからダウンロードした .zip ファイルを参照します。
    5. [インストール] をクリックし、[プラグインを有効にする] をクリックします。
    6. 以下3点を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

    StaticPage S3 sync and CloudFront cache clear

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

    設定項目

    S3のバケット名
    静的ファイルの出力先ディレクトリパス
    CloudFrontのディストリビューションID

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

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

    • 入力項目は3つのみで設定が簡単
      • S3バケット名
      • 静的ファイルの出力先ディレクトリパス
      • CloudFrontのディストリビューションID
    • 操作が簡単
      • 記事を公開・更新したいタイミングで「S3同期 & キャッシュクリア」ボタンを押すだけ
    • 権限はEC2のロールに付与する
      • 「アクセスキー」「シークレットキー」が不要なのでとってもセキュア
      • EC2に付与する必要があるポリシーも最低限でいいので安心
    ]]>
    WordPressのコンテンツをCloudFrontを使って配信しているケースで、更新した内容がサイトに反映されない原因 https://it.kensan.net/wordpress_cloudfront_cache_delete.html Sun, 12 Feb 2023 23:04:29 +0000 http://ec2-13-112-80-120.ap-northeast-1.compute.amazonaws.com/it/?p=36 以下のような方向けの記事です。

    • WordPressのコンテンツをCloudFrontを使用して配信している
      • 更新内容が反映されない原因と対処法を知りたい
      • 原因と対処法は知っているけど、もっと簡単に対処したい

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

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

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

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

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

    対応方法

    CloudFrontのキャッシュを削除することで、更新内容がすぐに更新されます。

    対応方法には、以下の2つがあります。

    対応方法

    WordPressのプラグインを使用する方法
    AWSコンソール画面から対応する方法

      それぞれの対応方法について、紹介していきます。

      簡単に削除したい場合はプラグインを使用する方法がオススメです。

      WordPressのプラグインを使用する方法(Clear CloudFront Cacheプラグインを使用)

      WordPressプラグインClear CloudFront Cacheを使用することで簡単にキャッシュクリア可能です。簡単にインストール・設定できて、かつ、セキュアなプラグインです。導入方法は以下の記事をご参照ください。

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

      AWSコンソール画面から対応する方法

      AWSのコンソール画面から削除できます。以下の記事を参考にさせて頂き、削除できます。

      [AWS] Amazon CloudFrontのキャッシュ削除(Invalidation) | DevelopersIO
      おばんです、来週はお世話になっているSwift 愛好会さんで開催される開発合宿が楽しみな田中です。 なにをやろうかな、ライブラリ作ろうかな、個人アプリ開発を進めようかな、参加者の方々と設計を語るのも良さそうだな…。楽 …

      更新した内容がサイトに反映されない原因

      CloudFrontを使用している場合、CloudFrontがサイトの内容をキャッシュします。

      これによってサイトの表示が高速化されるというメリットがあります。

      ただし、WordPressで記事を更新した際には、このキャッシュを削除しないと、更新した内容がサイトに即時反映されないという現象が発生することとなります。

      上記の方法でキャッシュを削除することで、最新の内容を即時公開できるようになります。

      まとめ

      CloudFrontを使用している場合のサイトが更新されない原因と対応方法について、記載しました!

      まとめ

      更新されない原因
      →CloudFrontがサイトの内容をキャッシュしているため、キャッシュを削除する必要がある
      キャッシュを削除には、2つの対応方法がある
      WordPressのプラグインを使用する方法
      AWSコンソール画面から対応する方法

      ]]>
      WordPressのプラグインStaticPress S3で固定記事などが表示されない(403エラー) https://it.kensan.net/staticpress_fix_contents.html Mon, 06 Feb 2023 00:07:19 +0000 http://ec2-13-112-80-120.ap-northeast-1.compute.amazonaws.com/it/?p=32 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 を使用できるようになります。
      ]]>
      WordPressのプラグインStaticPressで不要な静的ファイルが生成されないようにする https://it.kensan.net/staticpress_-unnecessary_file.html Sun, 05 Feb 2023 21:58:54 +0000 http://ec2-13-112-80-120.ap-northeast-1.compute.amazonaws.com/it/?p=43 WordPressのプラグインStaticPressで不要な静的ファイルが生成されないようにする方法を記載します。

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

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

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

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

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

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

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

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

      2つのメリット

      ディスク容量の削減
      StaticPressでの再構築時間の短縮

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

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

      配信に不要なフォルダ
      • 配信に不要なフォルダ
        • /wp-admin/*
          • 管理画面。配信不要ページ。
        • /wp-content/plugins/*
          • pluginを管理しているフォルダ。配信時にプラグインは不要(動かさない)。
        • /wp-includes/*
          • API、クラス、関数などのプログラムファイルを管理しているフォルダ。配信時は不要
        • /wp-json/*
          • WordPressのAPIレスポンスを保存するフォルダ。配信サーバ時は不要。
        • /author/*
          • 投稿者ごとのページ。必要な場合は残す。

      なぜ対応が必要なのか

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

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

      メリット詳細

      <WordPressサーバ(EC2)からみたメリット>
      メリット1:EC2ディスク容量の節約できる
      メリット2:再構築(HTML生成)時間の短縮


      <配信サーバ(S3)からみたメリット>
      ※WordPressサーバ(EC2)で配信している場合は対象外です。配信サーバにS3を使用している場合、以下のようになります。
      WordPressサーバで不要なページについては静的ファイル(HTMLファイル)の生成対象外となるため、StaticPress S3でS3に同期(コピー)対象から不要なページが含まれないようになります。これにより以下のメリットがあります
      メリット1:S3 APIの節約に役立ちます
      メリット2:S3 ストレージの節約に役立ちます

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

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

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

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

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

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

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

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

        ・/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で再構築をします。

        動作確認準備

        WordPressサーバの静的ファイル出力フォルダをカラにする
        (S3を使用している場合)S3にコピーされたファイルを全て削除する

        StaticPressで再構築後に以下の確認ができればOKです。

        動作確認内容

        WordPressサーバの静的ファイル出力フォルダにファイルが出力されている
        配信用URLにアクセスし、サイトが正常に表示される

        ]]>