CloudFront | さゆフィクション http://it.kensan.net/it aws wordpress などなどゆるーく書いてます Sat, 13 May 2023 03:16:58 +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 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にアクセスし、サイトが正常に表示される

      ]]>
      【日本語URL対応版】WordPressのコンテンツを StaticPress S3プラグインを使用して配信する方法 https://it.kensan.net/staticpresss3.html https://it.kensan.net/staticpresss3.html#respond Sat, 04 Feb 2023 02:22:53 +0000 http://ec2-13-112-80-120.ap-northeast-1.compute.amazonaws.com/it/?p=7 WordPressコンテンツをStaticPress S3プラグインを使用してS3+CloudFrontで配信する方法を記載します。自力で構築するとエラーなどではまることも多いですが、本記事の通りに環境構築することで、ほとんどのエラーを回避できます。

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

      回避できるエラー

      静的ファイルが正しく出力されない
      S3に静的ファイルが転送されない
      記事URLに日本語が含まれる場合、日本語が文字化けする

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

      メリット

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

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

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

      デメリット

      セットアップが難しい
      →StaticPress S3のセットアップは、一般的なWordPressプラグインよりも複雑です
      →本記事を参照し、構築すればきっと大丈夫です
      静的ファイルに変換する(HTMLに変換する)処理に時間がかかる
      →大量の記事を持つサイトほど、変換に時間がかかります。

       

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

      ゴールイメージ

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

      StaticPress S3+S3+CloudFront

      StaticPress S3+S3+CloudFront

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

      使うもの

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

      AWSリソース

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

      使用するAWSリソース

      EC2
      →EC2にWordPressをインストールします
      S3
      →S3にWord Pressを静的コンテンツ化したHTMLを格納します
      CloudFront
      →S3に格納した静的コンテンツ化したHTMLをCloud Front経由で配信します

      Word Pressプラグイン

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

      使用するWord Pressプラグイン/span>

      Static Press
      →Static Pressを使用してWord PressコンテンツをHTML化する
      StaticPress S3
      →StaticPress S3を使用してHTMLをS3に転送する

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

      構築作業

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

      環境構築

      S3バケット作成
      CloudFrontディストリビューション作成
      CloudFrontとS3の接続設定
      EC2作成&設定
      →ロール設定
      →WordPress起動に必要なミドルウェアのインストール
      →WordPressインストール
      →WordPressプラグインインストール&設定

      S3

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

      Cloud Front

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

      CloudFrontとS3の設定の詳細

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

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

      EC2

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

      EC2インスタンス起動設定

      OS:AmazonLinux2
      スペック:t2.micro(もっと性能が良いインスタンスタイプを選択しても大丈夫です)
      ロール:以下に記載のS3にアクセス可能なロールを割り当てる。

      
      // 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!!";
      • 動作確認

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

      ブラウザで動作確認する

      http://ドメイン/index.phpアクセスする
      →ブラウザに「test!!」と表示されればOK!

       

      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設定画面で以下の設定を行う

      StaticPress設定

      静的サイト URLCloud Frontのドメインを入力
      出力先ディレクトリ
      (ドキュメントルート):「/wordpress_home/」を入力
      S3 Bucket
      :作成したバケットを選択
      AWS Access Key:EC2のロールを使用するため、未入力とする
      AWS Secret Key:EC2のロールを使用するため、未入力とする
      AWS Region:「AP_NORTHEAST_1(東京リージョン)」を選択

       

      次に以下のコマンドで静的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が正常に動作しない場合の対処方法を記載します。

      StaticPressが動作しない時の対処法

      EC2の出力先ディレクトリにコンテンツが生成されない
      S3にコンテンツがコピーされない
      固定記事などが表示されない(403エラーとなる)ケースがある
      画像メディアのみS3にコピーされない
      ドメインが静的サイトURLに置き換わらない
      サイトマップが出力されない

      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の関数を使用する方法を記載しています

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

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

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

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

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

      • 以下の記事をご参照ください
      さゆフィクション | aws wordpress などなどゆるーく書いてます

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

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

      オススメの追加設定

      WordPressの置いてあるEC2サーバでBasic認証をかける
      不要なページの出力を止める
      CloudFrontのキャッシュを簡単に消せるようにする

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

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

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

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

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

      • 以下の記事をご参照ください
      StaticPress S3と共存できるWordPressプラグインClear CloudFront Cacheを公開!
      StaticPress S3と共存できるWordPressプラグイン「Clear CloudFront Cache」を公開! WordPressコンテンツをCloudFront経由で配信している場合に使えるプラグイン。公開したプラグイン「Clear CloudFront Cache」はWP管理画面からインストール可能
      ]]>
      https://it.kensan.net/staticpresss3.html/feed 0