1. WordPressを自分のPCにインストール
2. WordPressのstaticpress2019プラグインを設定
3. staticpress2019でWordPressのコンテンツをHTMLファイルとして出力
4. HTMLファイルを配信サーバーにアップロードする

という具合に、WordPressのコンテンツをHTMLファイルとして出力して、HTMLファイルを配信することで、安くて高速なサイトを簡単に構築できます。

WordPressを自分のPCにインストールする方法

「Local」を使用するとこで簡単に自分のPCにWordPressをインストールできます。

WindowsでもmacOSでも使えます。

以下のURLから「Local」をダウンロードしてインストールします。

Local

localwp.com

インストールが完了したら、Word Pressの管理画面からパーマリンク設定をします。

Word Pressのパーマリンク設定の変更

WordPress管理画面の設定->パーマリンク画面を開き、カスタム構造を選択し、「/%postname%.html」を入力します。

次に、staticpress2019プラグインの設定に進みます。

WordPressのstaticpress2019プラグインを設定

WordPress の管理画面［プラグイン］-［新規追加］から「staticpress2019」をインストールして有効化します。これだけです。

staticpress2019でWordPressのコンテンツをHTMLファイルとして出力

インストールした「staticpress2019」の画面で「再構築」ボタンを押下します。これだけです。

HTMLファイルを配信サーバーにアップロードする

あとはHTMLファイルを配信サーバーにアップロードします。

サーバーは別途契約する必要があります。

おすすめのサーバなどなど以下に記載します。

• • AWSのS3を使う
    • 費用はS3料金のみとなります
  • スターサーバーを使う
    • • 安価なプランがありおすすめです。

    
    

  • ロリポップサーバもおすすめです。

• • ドメインの取得をしていない方におすすめ

  
  

なるべくお金をかけずに、かつ、高速なWordPressを構築したいので、CPUはArm、WEBサーバはNginxを使っていきます

まずは具体的な構成を記載していきます！

構成

• EC2を使用
  • インスタンスはt4g.mediumを使用
    • t4gは、Arm ベースの AWS Graviton2 のインスタンスです
    • T3 インスタンスよりも価格パフォーマンスが最大で 40% 高いようです

Amazon EC2 T4g インスタンス – Amazon Web Services

AWS Graviton2 プロセッサを搭載した T4g インスタンスは、Amazon EC2 のバースト可能な汎用ワークロードとしては最高のコストパフォーマンスを提供します。

aws.amazon.com

• OS
  • Amazon Linux 2023
•  Webサーバ
  • Nginxを使用
  • Apacheより高速
• PHP
  • バージョン：8.2.15
  • WordPressを動かすのに必要なもの
• MySQL
  • バージョン：8.0.37
  • WordPressを動かすのに必要なもの
• Webサーバで動かすもの
  • WordPress

では実際にEC2起動からWordPressインストールまでやっていきます！

EC2起動

• 以下の設定でEC2を起動します
  • Amazon マシンイメージ (AMI)でAmazon Linux 2023を指定する
  • アーキテクチャで64ビット(Arm)を指定する
  • インスタンスタイプでt4g.mediumを指定する
  • ネットワーク設定で「からの SSH トラフィックを許可」「インターネットからの HTTP トラフィックを許可」を指定する
    • セキュリティを考慮して、アクセス元は絞った方がいい
  • EC2へはEC2 Instance Connectで接続するため、キーペアはなしでOK

EC2の中に入る

• 諸々設定するため、以下の流れで起動したEC2の中に入ります
  • AWSコンソールのEC2の一覧で、該当のEC2を選択して、接続を押下
    • EC2 Instance Connectタブの接続を押下

もろもろインストール

パッケージ最新化

• パッケージ最新化

sudo dnf update -y

Nginxインストール〜設定

• Nginxインストール

sudo dnf -y install nginx

• Nginx設定変更

sudo vi /etc/nginx/nginx.conf

serverの箇所を以下通り修正

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location ~ \.php$ {
            root         /usr/share/nginx/html;
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_param  SCRIPT_FILENAME  /usr/share/nginx/html$fastcgi_script_name;
            include        fastcgi_params;

        }
    }

• Nginx起動

sudo systemctl start nginx

• Nginx自動起動をON

sudo systemctl enable nginx

• ブラウザでNginxが正常に動作していることを確認
  • EC2に割り当てられているパブリックIPにhttpでアクセスする
    • 「Welcome to nginx!」が出れば、Nginxが起動できているので問題なし

PHPインストール

• PHPをインストールする

sudo dnf install -y php-fpm php-mysqli php-json php php-devel

MySQLインストール〜設定

• MySQLをインストールする

sudo dnf -y localinstall https://dev.mysql.com/get/mysql80-community-release-el9-1.noarch.rpm

sudo rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2023

→これを実行しないと「Error: GPG check FAILED」エラーになる

sudo dnf install -y mysql-community-server mysql-community-client mysql-community-devel

• 起動

sudo systemctl enable mysqld.service

sudo systemctl start mysqld.service

• 初期パスワード確認

sudo less /var/log/mysqld.log

• MySQL接続

mysql -uroot -p
# パスワード更新
ALTER USER 'root'@'localhost' IDENTIFIED BY '新しいパスワード';

# wordpress用のDBを作成
create database wordpress_db default character set utf8 collate utf8_general_ci;

WordPressインストール

• WordPressインストール

wget https://ja.wordpress.org/latest-ja.tar.gz

tar -zxvf latest-ja.tar.gz

rm latest-ja.tar.gz

sudo mv wordpress/* /usr/share/nginx/html/

sudo chmod -R 777 /usr/share/nginx/html #実際はもっと制限かけたほうがいいけど、今回はとりあえず動けばOKということで...

sudo systemctl start php-fpm.service

sudo systemctl restart nginx.service

動作確認

• 動作確認
  • 以下のアドレスにアクセスして、WordPressの画面表示されればOK

http://{EC2のIPアドレス}/wp-login.php

この記事でのサーバレスとはS3＋CloudFrontでコンテンツ配信をすることを指しています。

サーバーレスにすることで以下のようなメリットがあります。

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

WordPressのセキュリティリスクとセキュリティ対策

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

it.kensan.net

2023.02.12

では、構築手順を記載していきます。

まずゴールイメージです。以下のような構成となります。サイト閲覧者はCloudFront経由でS3に格納されたコンテンツ(WordPressコンテンツを静的HTMLにしたもの)にアクセスすることになります。

使うもの

使用するAWSサービスとWordPressプラグインについて記載します。

AWSサービス

• EC2
  • WordPressをインストールする(DB内包)
• S3
  • Word Pressを静的コンテンツ化したHTMLを格納する
• CloudFront
  • S3のHTMLをCloud Front経由で配信する

Word Pressプラグイン

• StaticPress2019
  • Static Pressを使用してWord PressコンテンツをHTML化する
• StaticPage S3 sync and CloudFront cache clear
  • HTML化したファイルをS3に転送すると同時にCloudFrontのキャッシュを削除する

では、早速構築をしていきます。

まずはS3の作成から始めていきます。

S3バケット作成

任意のバケット名でS3バケットを作成します。

CloudFrontの作成と設定

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

CloudFrontとS3間はOACで設定を行います。

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の設定画面(以下の画面)から設定ボタンを押下して、デフォルトルートオブジェクトに「index.html」を設定します。

CloudFront設定

S3のアクセス許可設定

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

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

EC2設定

WordPressインストール方法

EC2へWordPressをインストール

1. AWSコンソールのEC2ダッシュボードからインスタンスを起動を選択
2. インスタンス起動画面で以下の設定をする
   • 名前：wordpress（他の名前でも大丈夫）
   • アプリケーションおよび OS イメージ (Amazon マシンイメージ)：WordPress Certified by Bitnami and Automattic
   • インスタンスタイプ：t3.a.small(もっとスペック高いものを選択しても大丈夫)
   • キーペア (ログイン)：任意の名前で作成または既存キーを選択
   • ファイアウォール (セキュリティグループ)：
     • 「セキュリティグループを作成する」を選択し、「インターネットからの HTTP トラフィックを許可」「からの SSH トラフィックを許可する」のチェックボックスのみチェックする（他は外す）
3. インスタンスを起動ボタンを押下

EC2起動時のインスタンス設定

WordPress管理者アカウントのパスワード確認

1. EC2インスタンス一覧画面から作成したWordPressインスタンスを選択
2. 以下の通りメニューをたどり、システムログを開く
   • アクション->モニタリングとトラブルシューティング->システムログを取得
3. システムログを「Setting Bitnami application password to」で検索し、WordPress管理者のパスワードを調べる

WordPress EC2システムログ

動作確認

1. EC2インスタンス詳細画面を開き、「http://パブリック IPv4 アドレス/wp-admin」をブラウザのアドレスバーに入力する(httpsだとアクセスできないので注意)
2. WordPressログイン画面が表示されるのでユーザ名は「user」、パスワードはシステムログで調べたパスワードを入力し、ログインできれば完了

EC2インスタンス詳細

EC2インスタンスにSSH接続する方法

以下のようなコマンドでSSH接続可能です。ユーザが「bitnami」である点が要注意です。

• ssh -i “{sshキー}” bitnami@{パブリック IPv4 DNS}

ロールの設定

起動したEC2に以下の権限を割り当てます

// EC2に割り当てが必要な権限(ポリシー)
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "cloudfront:CreateInvalidation",
                "s3:ListBucket",
                "s3:PutObject"
            ],
            "Resource": "*"
        }
    ]
}

Word Pressのパーマリンク設定の変更

WordPressの設定->パーマリンク画面を開き、カスタム構造を選択し、「/%postname%.html」を入力する

WordPressのプラグインStaticPress2019の設定

1. WordPress 管理パネルから、「プラグイン」 -> 「新規追加」をクリックします。
2. ブラウザの入力ボックスに「StaticPress2019」と入力します。
3. 「StaticPress2019」プラグインを選択し、「インストール」をクリックします。
4. プラグインを有効にします。
5. メニューの「StaticPress2019 Options」をクリックする
6. 「StaticPress2019 Options」の「Save Dir」に静的ファイルを出力するディレクトリを指定。
7. 「StaticPress2019 Options」の「Static URL」にCloudFrontのディストリビューションドメイン名を設定
8. 「Save Changes」ボタン押下

staticpress2019設定

WordPressのプラグイン「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のバケット名
   • StaticPress2019の静的ファイルの出力先ディレクトリパス(Save Dir)
   • CloudFrontのディストリビューションID

動作確認

1. StaticPress2019で「再構築」ボタン押下
2. StaticPage S3 sync and CloudFront cache clearで「S3同期 & キャッシュクリア」ボタン押下
3. CloudFrontのディストリビューションドメインにブラウザでアクセスし、コンテンツが閲覧できればOKです。

まとめ

WordPressコンテンツのサーバレス配信について記載しました。

• ソース修正
• sshしてサーバにログイン

など難しい作業をせずにWordPressコンテンツのサーバレス配信できました。

結構簡単かと思いますので、気になる方は是非★

コピペでEC2上にTerrafromでWordPressを構築できるように記載しています。

EC2のAMIでは「WordPress Certified by Bitnami and Automattic」を指定してWordPressを構築します。

Terraformとは？という方は以下の記事をご参照ください。

Terraformとはーインフラストラクチャを安全に管理できるTerraformの使い方について理解する

「Terraformとは？」「Terraformを触ったみたい」というような方向けの記事です。「Terraformとは？について」「Terraformのインストール」「AWSのリソースをTerraformで管理してみる」の構成でTerraformについて記載していきます。

it.kensan.net

2023.03.04

AWSマネージメントコンソール画面から構築したい場合は以下の記事をご参照ください。

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

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

it.kensan.net

2023.02.18

それではWordPressを構築するTerraformのソースコードを書いていきます。

Terraformのソースコード

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

• provider.tf
  • 以下のような情報を記載します。
    • terraformバージョン
    • AWSプロバイダーの定義
    • tfstateファイルを管理する場所の定義
• variables.tf
  • ローカル変数の管理
• aws_ec2.tf
  • EC2/セキュリティグループ/VPCを管理

ファイル名：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 {
  ec2 = {
    instance_type = "t3.micro",
    ami           = "ami-0cf92f9f22d78344c"
  }
}

AMIは「WordPress Certified by Bitnami and Automattic」を指定してます。

ファイル名：aws_ec2.tf

# EC2インスタンス作成
resource "aws_instance" "wordpress" {
  ami                         = local.ec2.ami
  instance_type               = local.ec2.instance_type
  subnet_id                   = aws_subnet.public_1a.id
  vpc_security_group_ids      = [aws_security_group.wordpress.id]
  associate_public_ip_address = "true"
}
# VPC作成
resource "aws_vpc" "wordpress" {
  cidr_block = "10.0.0.0/16"
}
# サブネット作成
resource "aws_subnet" "public_1a" {
  vpc_id = aws_vpc.wordpress.id

  # Subnetを作成するAZ
  availability_zone = "ap-northeast-1a"

  cidr_block = "10.0.1.0/24"

}
# ルートテーブル作成
resource "aws_route_table" "public_rt" {
  vpc_id = aws_vpc.wordpress.id
  route {
    cidr_block = "0.0.0.0/0"
    gateway_id = aws_internet_gateway.igw.id
  }
}
# インターネットゲートウェイ作成
resource "aws_internet_gateway" "igw" {
  vpc_id = aws_vpc.wordpress.id
}
# ルーティングテーブル作成
resource "aws_route_table_association" "public_rt_associate" {
  subnet_id      = aws_subnet.public_1a.id
  route_table_id = aws_route_table.public_rt.id
}

# セキュリティグループ作成
resource "aws_security_group" "wordpress" {
  name   = "wordpress"
  vpc_id = aws_vpc.wordpress.id

  ingress {
    description = "allow http"
    from_port   = "80"
    to_port     = "80"
    protocol    = "tcp"
    cidr_blocks = ["0.0.0.0/0"]
  }
  ingress {
    description = "allow ssh"
    from_port   = "22"
    to_port     = "22"
    protocol    = "tcp"
    cidr_blocks = ["0.0.0.0/0"]
  }

  egress {
    from_port   = "0"
    to_port     = "0"
    protocol    = "-1"
    cidr_blocks = ["0.0.0.0/0"]
  }
}

次に、Terraformを実行して、WordPressを構築していきます。

Terraformの実行

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

// tfstateファイルを管理するS3バケット作成
aws s3 mb s3://{tfstateファイルを管理するS3バケット}

//ワークスペースを初期化する
terraform init

// コードフォーマット
terraform fmt

// バリデーション
terraform validate

// 不正なコードを検出
tflint

// 実行計画を確認
terraform plan

// リソース作成
terraform apply

WordPress管理者アカウントのパスワード確認

1. EC2インスタンス一覧画面から作成したWordPressインスタンスを選択
2. 以下の通りメニューをたどり、システムログを開く
   • アクション->モニタリングとトラブルシューティング->システムログを取得
3. システムログを「Setting Bitnami application password to」で検索し、WordPress管理者のパスワードを調べる

動作確認

1. EC2インスタンス詳細画面を開き、「http://パブリック IPv4 アドレス/wp-admin」をブラウザのアドレスバーに入力する(httpsだとアクセスできないので注意)
2. WordPressログイン画面が表示されるのでユーザ名は「user」、パスワードはシステムログで調べたパスワードを入力し、ログインできれば完了

あと片付け

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

terraform destroy

まとめ

EC2上にWordPressを構築する手段として、コピペでTerrafromで構築する方法を記載しました。

画面操作に慣れている方はとっつきづらいかもしれませんが、Terraformに慣れている方にとっては本記事に記載のTerraformでの構築の方が楽かもと思ってます！

静的ページ化するところは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を使用します

it.kensan.net

2023.02.18

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

it.kensan.net

2023.02.11

WordPressURLにBasic認証をかける

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

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

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

WordPressのプラグインStaticPressでBasic認証を使う

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

it.kensan.net

2023.02.05

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

5分で動作確認までできます。ハマるポイントとしては、WordPressログイン時のパスワードの確認くらいです。

構築のポイントとしてはEC2起動時に指定するAMIで「WordPress Certified by Bitnami and Automattic」を指定することです。

Terraformを使って簡単に立ち上げる方法もあります！以下の記事をご参照ください。

TerraformでEC2上にWordPressを簡単に構築するーコピペでTerraformでWordPress構築

TerrafromでEC2上にWordPressを構築します。コピペで簡単にTerraformでEC2上にWordPressを構築できるように記載しています。TerraformソースコードとTerrafromの実行方法、最後に作成したリソースの削除方法を記載しています。

it.kensan.net

2023.03.05

本記事ではAWSコンソール画面からインストールしていきます。

早速インストール(EC2起動)方法から見ていきます。

インストール(EC2起動)方法

1. AWSコンソールのEC2ダッシュボードからインスタンスを起動を選択
2. インスタンス起動画面で以下の設定をする
   • 名前：wordpress（他の名前でも大丈夫）
   • アプリケーションおよび OS イメージ (Amazon マシンイメージ)：WordPress Certified by Bitnami and Automattic
   • インスタンスタイプ：t3.a.small(もっとスペック高いものを選択しても大丈夫)
   • キーペア (ログイン)：任意の名前で作成または既存キーを選択
   • ファイアウォール (セキュリティグループ)：
     • 「セキュリティグループを作成する」を選択し、「インターネットからの HTTP トラフィックを許可」「からの SSH トラフィックを許可する」のチェックボックスのみチェックする（他は外す）
3. インスタンスを起動ボタンを押下

EC2起動時のインスタンス設定

これで、WordPressインストール済みのEC2を立ち上げが終わった状態になります。

 

次に、WordPress管理者アカウントのパスワードの確認方法を記載します。

WordPress管理者アカウントのパスワード確認

1. EC2インスタンス一覧画面から作成したWordPressインスタンスを選択
2. 以下の通りメニューをたどり、システムログを開く
   • アクション->モニタリングとトラブルシューティング->システムログを取得
3. システムログを「Setting Bitnami application password to」で検索し、WordPress管理者のパスワードを調べる

WordPress EC2システムログ

WordPress管理者アカウントのパスワードの確認が終わりました！

次は、実際にWordPressにアクセスして管理画面にログインしてみます！

動作確認

1. EC2インスタンス詳細画面を開き、「http://パブリック IPv4 アドレス/wp-admin」をブラウザのアドレスバーに入力する(httpsだとアクセスできないので注意)
2. WordPressログイン画面が表示されるのでユーザ名は「user」、パスワードはシステムログで調べたパスワードを入力し、ログインできれば完了

EC2インスタンス詳細

EC2インスタンスにSSH接続する方法

以下のようなコマンドでSSH接続可能です。ユーザが「bitnami」である点が要注意です。

• ssh -i “{sshキー}” bitnami@{パブリック IPv4 DNS}

WordPressコンテンツをCloudFrontで簡単に配信したい場合

以下の記事をご参照ください

StaticPressを使ってEC2上のWordPressコンテンツをCloudFront経由で簡単に配信する方法

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

it.kensan.net

2023.02.18

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の導入については以下の記事をご参照ください。

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導入時にサイトマップ(sitemap.xml)を使えるようにする方法ですが、2つの対応をすることで可能となります。

サイトマップとは、検索エンジンにWebサイトのページ更新内容を知らせるため(インデックスさせるため)に必要なものです。SEO対策では必須になってきますので、この記事を参考に、ちゃんとサイトマップ出力されるように対策しちゃいましょ！

まずは、StaticPressのソース修正方法から記載していきます！

StaticPressのソース修正

StaticPressのソース修正を行います。

修正ファイル：wp-content/plugins/staticpress/includes/class-static_press.php

377行目あたりを修正

// 修正前
                switch ($file_type) {
                case 'front_page':
                case 'single':
                case 'term_archive':
                case 'author_archive':
                case 'other_page':

// 修正後
                switch ($file_type) {
                case 'front_page':
                case 'single':
                case 'term_archive':
                case 'author_archive':
                case 'seo_files':          // ここを追加
                case 'other_page':

次にサイトマップ作成プラグインを入れます。

サイトマップ作成プラグインを入れる

以下のプラグインをWordPressにインストールします。他のプラグインをいくつか試してみましたが、StaticPressとの相性が悪いようで正しく出力されないようでしたので、以下のプラグインがオススメです。

プラグイン：Google XML Sitemaps

動作確認

動作確認をして問題なければ、Google search consoleにサイトマップをお知らせして終了です。

動作確認〜Google search consoleにサイトマップを送るまでの手順は以下の4ステップです。

1. 「{サイトアドレス (URL)}/sitemap.xml」にアクセスしてサイトマップが正しく表示されることを確認
2. StaticPressで再構築する
3. 「{静的サイト URL}/sitemap.xml」にアクセスして、サイトマップ表示を確認する
4. Google search consoleに以下のURLでサイトマップを送ります
   • 「{静的サイト URL}/sitemap.xml」

まとめ

サイトマップが正常に表示され、Google search consoleに送れたかと思います。

Google search consoleに送った後は、正常に処理されたかを確認しておきしょ！

正常に処理されたかの確認は、Google search console画面から可能です。

Google search consoleに正しく送れたら、Bingにも送っておきましょー

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

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

対応方法

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

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

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

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

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管理画面からインストール可能

it.kensan.net

2023.02.11

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

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

[AWS] Amazon CloudFrontのキャッシュ削除(Invalidation) | DevelopersIO

おばんです、来週はお世話になっているSwift 愛好会さんで開催される開発合宿が楽しみな田中です。 なにをやろうかな、ライブラリ作ろうかな、個人アプリ開発を進めようかな、参加者の方々と設計を語るのも良さそうだな…。楽 …

dev.classmethod.jp

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

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

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

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

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

まとめ

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

WordPressはセキュリティ対策を取らないとリスクが高いと思っていますが、使いやすくて便利で優れたツールであるとも考えています。

要は「セキュリティ対応しておけばいい」です！

具体的にWordPressにどんなリスクがあるかについて見ていきます。

WordPressのセキュリティに弱いところ

• オープンソースである
  • 誰でもソースを確認でき、脆弱性を見つけた悪い人が悪用する可能性がある
• 使っている人が多い
  • 使っている人が多いため、狙われやすいです
    • 攻撃者もメジャーなものを狙ってくる
      • CMSにおいて世界シェアNo.1のユーザー数があるそうです
        • インターネット上に数多くの情報があります
• プラグイン
  • 不特定多数の人が作成しているため、セキュリティが不十分なものが多々ある
  • 誰でも野良プラグインを作成・公開できる
    • 野良プラグイン：WordPressに認証されていないプラグイン
      • ユーザは簡単に野良プラグインをインストールできる
        • インストールされたプラグインは、DBにアクセス可能な状態となり情報の改ざんや不正入手が可能
• 野良テーマ
  • 野良プラグインと同様のリスク
• 管理画面がインターネット上にある
  • 管理画面のログイン画面へは容易にたどり着ける
    • ログインIDとパスワードがわかってしまえば、サイトを乗っ取られる

WordPress本体と運用で使うプラグインやテーマにもセキュリティリスクが多く、狙われやすい感じです。標的にされたらと考えると怖いですね。

WordPressのメリットである以下の点と表裏一体な気がします。

• 使い勝手が良い
• 気軽に使い始められる

具体的にどんなリスクがあるか（どんな被害があるか）

•  不正アクセス
  • WordPressの管理画面やデータベースへ不正にアクセスする
    • 情報の改ざんや情報漏洩のリスク
    • WordPressの管理画面にアクセスされたらやりたい放題です
• サイト改ざん
  • サイトの情報を不正に改ざんされるリスク改ざんされ、訪問者を不正なサイトに転送するといったこともできてしまう
• 意図せぬ犯罪への加担
  • DDoS攻撃の踏み台にされるリスク
  • 不正メール送信の踏み台サーバにされるリスク
• 情報漏洩
  • Webサーバーに個人情報や機密情報などが存在する場合、それらが漏えいするリスク

対応策

対応策として以下の2つが考えられます。

①WordPressを最新の状態に保つなど、地道に頑張る方法

以下のような対応をすることでセキュリティを高めることができます。

•  WordPressを最新の状態に保つ
  • WordPress本体・プラグイン・テーマを最新に保つ
• 予測しにくいパスワードとユーザー名を設定する
• 不要なプラグインは削除する
• WAFを導入する
• プラグイン「All In One WP Security & Firewall」を入れる
• バックアップを取る
  • 定期的にバックアップを取ることで、ウェブサイトが攻撃を受けた場合でも、ウェブサイトのデータを復元することができます。

②WordPressコンテンツを静的ページ化して配信するという方法

次に紹介するのは、配信したいコンテンツをWordPressのプラグインStaticPressで静的ページとして出力し、静的ページのみを公開し(StaticPress S3でS3に転送して、S3+CloudFrontで公開)、WordPressは隠してしまう方法です。

具体的な構成は以下の記事で記載しています。

WordPressコンテンツを静的ファイル化してAWS上でサーバレス配信してみる

今回はWordPressコンテンツをサーバレス配信してみます。結構簡単で、30分ほどあればサーバレス配信できるところまで確認できるかと思いまーす。 この記事でのサーバレスとはS3＋CloudFrontでコンテンツ配信をすることを指しています...

it.kensan.net

2023.04.02

WordPressの動いているEC2のセキュリティグループでIP制限をして、自分以外はEC2(WordPress)にアクセスできないようにしておきます。そうすることで例えばWordPressのID・パスワードを知っていてもアクセスできないくらいセキュアになります。

StaticPressで静的ページにすることでサイト表示のレスポンスが向上し、SEO的にも有利といったメリットもあります。

静的サイトじゃないよと言う場合は、動的な部分をJavaScriptでサーバ(API Gateway + Lambda)とやりとりするなどの改修が必要となり、なかなか大変そうですが、、、

静的サイトの場合は、上記構成で十分に安全に運用できると思います。

まとめ

WordPressを安全に快適に使おうの記事でした。