↓Value-Authとは↓

本人認証とは、ログイン時にSMS・メールで認証番号を送信し、 その番号によって本人であることを確認するサービスです。
この本人認証が、Value-Authでは0円で簡単に始められます。

Value-Authで本人認証を始めるまでの流れ

1. 申込会員登録
2. Value-Authのアカウント作成
3. Value-Authにログイン
4. APIキー発行
   1. APIキーはどこかにメモしておく
5. サイト登録
6. 以下のWordPressプラグインをインストール
   1. https://www.value-domain.com/security/value-auth/flow/#cms
7. WordPress プラグインの設定
   1. APIキー、認証コードを設定
   2. 2段階認証をONにする
   3. 電話番号かメールアドレスを設定する

Value-Authでの本人認証をWordPresに設定してみる

Step1　申込会員登録

以下のリンクから会員登録します。

Step2　Value-Authのアカウント作成

以下のメニューからアカウントを作成します。

Step3　Value-Authにログイン

アカウントを作成するとログインボタンが表示されますので、クリックしてログインします。

Step4　APIキー発行

Value-Authのログイン後の画面でAPIキーを発行し、発行されたAPIキーをメモしておきます。

APIキーはWordPress設定時に使用します。

Step5　サイト登録

Value-Authのログイン後の画面で、サイト名とホスト名を指定してサイト登録します。

これで、Value-Auth側の設定は完了です。残りはWordPressの設定です。

Step6　WordPressプラグインをインストール

以下のURLからWordPressプラグインをダウンロードします。

ご利用の流れ | Value-Auth（バリューオース）

Value-Authのご利用の流れページです。Value-Authは、SMSなど複数の本人認証を無料で導入でき、お客様のサービスやアプリへの設置も簡単なサービスです。

www.value-domain.com

ダウンロードしたプラグインをアップロードします。

↓プラグイン画面の新規プラグインを追加を押下↓

プラグインのアップロードボタンを押下すると↓アップロード画面↓が表示されます。

Step7　プラグインの設定

追加したプラグインの設定画面を開き以下を設定します。

1. 1. APIキー、認証コードを設定（Value-Authから発行される値）
   2. 2段階認証をONにする
   3. 電話番号かメールアドレスを設定する

動作確認

ログインすると、以下の画面が表示されます！

メールアドレスまたはSMSで通知された認証コードを入力すると、ログイン成功します！

まとめ

WordPressセキュリティ対策として、Value-Authを使用して、WordPress管理画面にログイン際に本人認証を追加してみました！

↓Value-Authはこちらから始められます！↓

無料でWordPressを使えるということです！

↓スターレンタルサーバーの申し込みはこちらから↓

スターレンタルサーバー(Star Server)のフリープランの特徴

スターレンタルサーバーはこんなサーバーだよというのを記載していきます。

• 容量
  • ３GB
• 初期費用
  • 0円
• 月額費用
  • 0円
• WordPressが使える
  • しかも複数のWordPressをインストールできる（複数のサイト構築ができる）
• 無料独自SSLも使える

要するに、0円でWordPressが使えてSSL（httpsでのアクセス）に対応しています。

しかも複数サイトの構築ができます！！

スターレンタルサーバー(Star Server)のフリープランの注意点

スターレンタルサーバーの注意点を記載していきます。

• 容量が3GBと少し少なめ
• 3ヶ月ごとに契約更新の手続きが必要となる

容量は少し少なめなものの、試しに初めてみるという方には十分かと思います。

また、3ヶ月ごとに更新が必要となるので、忘れずに更新しましょ！

実際にスターレンタルサーバーを使ってみる

まずは契約からです。

スターレンタルサーバーのフリープラン契約

以下からフリープランの契約が可能です。

WordPressのインストール

スターレンタルサーバーのサーバーパネルからWordPressをインストールできます。

以下の画面の赤線の上をクリックすればインストール画面に進めます。

次にWordPressを追加ボタンを押下します。

WordPress簡単インストール画面が出てくるので、ブログ名/ユーザ名/パスワード/メールアドレスは必須なので入力します。それ以外の項目は、お好みの設定をして「インストールする」ボタンを押下します。(ブログ名/ユーザ名/パスワード/メールアドレス以外は特に変更なしでもOKです。)

「インストールする」ボタンを押下後、しばらくすると出来上がったWordPress画面にアクセスできます。

サイトアクセスして以下の表示がされた場合には、しばらく待ってから再度アクセスするとWordPress画面にアクセスできます。

無効なURLです。
プログラム設定の反映待ちである可能性があります。
しばらく時間をおいて再度アクセスをお試しください。

作成したサイトにアクセスしてみる

作成したサイトにアクセスして、以下のようにWordPressの画面が表示されれば成功です。

SSL化してみる

サーバーパネルからSSL設定を押下して、SSL設定状況をONにするとSSL化完了です！

これでhttpsで作成したサイトにアクセスできます。

使ってみてよかったこと

簡単な画面操作のみで、複数サイト作成できて、SSL化できるというのがかなり便利かと思いました！！初心者でも簡単にサイト作成が可能で、しかも無料です。

また、WordPressで有名な（よく使われている）テーマのCocoonをスターレンタルサーバー管理画面から簡単にインストールできます。

まとめ

スターレンタルサーバー(Star Server)のフリープランを試してみました。

無料で複数サイト作成できて（複数WordPressをインストールできて）、SSL化まで無料でできました！！

素晴らしいスターレンタルサーバー！！

↓申し込みはこちらから↓

ライトではWordPressを簡単にインストールできるのですが、エコノミープランではWordPressをインストールできないため、ひと手間かけて配信することになります。

できるだけ安くということで、エコノミープランを使いたい方向けの記事です。

実現方法ですが、以下の流れで「ロリポップ！」レンタルサーバーのエコノミープランで配信していきます。

1. 自分のPCでWordPressのコンテンツを作成
2. 作成したコンテンツをHTML形式でエクスポート
3. エクスポートしたHTMLを「ロリポップ！」レンタルサーバーのエコノミープランで配信

↓「ロリポップ！」レンタルサーバーの申し込みはこちらから↓

では早速WordPressコンテンツを「ロリポップ！」レンタルサーバーのエコノミープランで配信していきます。

自分のPCでWordPressのコンテンツを作成

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

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

WindowsでもmacOSでも使えます。

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

Local

localwp.com

次はWordPress管理画面にアクセスして、WordPressの設定をします。

WordPressの設定

まずは、パーマリンク設定から行います。

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

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

次は、staticpress2019プラグインの設定をします。

WordPressのstaticpress2019プラグインを設定

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

「staticpress2019」設定画面を開き、以下の2点設定します。

• Static URLに「ロリポップ！」から払い出されたドメインを入力
• Save DIRに作成したコンテンツをエクスポートするディレクトリを指定

次はHTML形式でエクスポートします！

作成したコンテンツをHTML形式でエクスポート

StaticPress2019を使ってエクスポートします。

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

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

では、ロリポップサーバーで配信してみます！

エクスポートしたHTMLを「ロリポップ！」レンタルサーバーのエコノミープランで配信

まずFTPでロリポップサーバにHTMLをアップロードします。

ロリポップサーバーにHTMLをアップロード

以下のロリポップメニューからFTPを起動します。

エクスポートされたファイルを全てアップロードします。

結構ファイル数多いと思うので、以下を参考にFTPソフトを使う方がいいかもです！

各種FTPソフトの設定方法 - ロリポップ！レンタルサーバー

ロリポップ！レンタルサーバーのご利用マニュアル FTPソフトの設定を説明したマニュアルページです。

lolipop.jp

動作確認

「ロリポップ！」から払い出されたドメインにアクセスして以下のように画面表示できれば成功です。

↓「ロリポップ！」レンタルサーバーの申し込みはこちらから↓

まとめ

「ロリポップ！」レンタルサーバーのエコノミープランでWordPressのコンテンツを配信してみました。

少しでも安くwordpressコンテンツを配信したい方のお役に立てば….!

↓「ロリポップ！」レンタルサーバーの申し込みはこちらから↓

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のセキュリティリスクについては以下の記事をご参照ください

https://it.kensan.net/it/wordpress_security.html

localhost

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

まずゴールイメージです。以下のような構成となります。サイト閲覧者は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コンテンツのサーバレス配信できました。

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

AWS上に構築する方法は5つのパターンがあり、それぞれ特徴やメリットとデメリットがありますので、この点について記載していきます。

構築パターンの特徴を知って適切な構築方法を選択しよう！という記事です。

まずはどのような構築方法があるかについて記載していきます。

WordPressをAWS上に構築する方法は5つ

構築方法は以下の5つの方法があります。それぞれ特徴と難易度が異なってきます。

WordPress構築方法毎の比較情報

次に、WordPressの構築方法毎の比較を行っていきます。

WordPress構築方法毎の詳細情報

それぞれのWordPress構築方法について詳細を見ていきます。

EC2単体

• 使用するAWSサービス
  • EC2
• 使用するWordPressプラグイン
  • なし

構築方法

EC2での構築方法は以下の記事をご参照ください

AWSマネージメントコンソール画面からの構築方法

https://it.kensan.net/it/aws-ec2-wordpress.html

localhost

Terraformを使った構築方法(Terraformを使い慣れている方向け)

https://it.kensan.net/it/terraform-ec2-wordpress.html

localhost

EC2の代わりにLightsailで構築する場合

https://it.kensan.net/it/amazon-lightsail-wordpress.html

localhost

特徴

最もオーソドックスかつ、簡単な構築方法となります。

この構築方法のメリットとデメリットは以下のような点になります。

• メリット
  • とにかく簡単に構築できる
• デメリット
  • 捌けるアクセル量が少ない(アクセスが多いとサーバダウンなどが懸念される)
  • WordPress(PHP)がコンテンツを生成するため、サイトアクセス時の表示速度が他の方法と比べると遅い

構築が簡単なため、とりあえずこの構築方法を選択し、速度改善や捌けるアクセス数を増やしたくなったら、別の構築方法へ移行するという進め方も良いかと思います。

EC2単体ー静的ページ配信

• 使用するAWSサービス
  • EC2
• 使用するWordPressプラグイン
  • StaticPress

構築方法

EC2単体と同様の方法でEC2上にWordPressを構築します。

Lightsailを使用しても問題ありません。

WordPress構築後はStaticPressをインストールして、WordPressコンテンツの静的ページ化を行います。StaticPressの設定方法の詳細は「StaticPressのインストール方法」をご参照ください。

特徴

WordPressコンテンツを静的ページ化する方法となります。

この構築方法のメリットとデメリットは以下のような点になります。

• メリット
  • サイトの高速化と捌けるアクセス数を増やすことができる
• デメリット
  • StaticPress導入にあたり、PHPのソース修正が発生し、EC2単体の構築方法より難易度が若干高め
  • 動的機能(検索やコメントなど)が使用できない

できるだけ簡単にサイトの高速化と負荷対策(多くのアクセスを捌けるようにする)する際に、有効な手法となります。

EC2＋CloudFront配信

• 使用するAWSサービス
  • EC2
  • CloudFront
• 使用するWordPressプラグイン
  • Clear CloudFront Cahce

構築方法

EC2単体と同様の方法でEC2上にWordPressを構築します。

Lightsailを使用しても問題ありません。

WordPress構築後はCloudFront経由でEC2にアクセスするように設定します。

具体的な構築方法は以下のサイトを参考にさせてもらいましょ

AWSに構築したWordPressをCloudFrontを使ってキャッシュして高速化【CDN】

WordPressを高速化！AWSのCloudFrontを配置し、静的コンテンツをキャッシュして配信する環境構築の手順を紹介しています。 CloudFrontによりキャッシュされているか確認する方法、CloudFrontのキャッシュ削除方法、CloudFrontからしかアクセスを受け付けない、つまりEC2に直接アクセス...

cat-prog.com

WordPressプラグインClear CloudFront Cacheを入れておくと、CloudFrontのキャッシュを簡単に削除できるので便利です。設定方法の詳細は「Clear CloudFront Cache」をご参照ください。

特徴

WordPressコンテンツをCloudFrontでキャッシュする方法となります。

この構築方法のメリットとデメリットは以下のような点になります。

• メリット
  • サイトの高速化と捌けるアクセス数を増やすことができる
  • 高速化を図りつつ動的機能(検索やコメントなど)を利用できる
• デメリット
  • CloudFrontの設定で、キャッシュするページとキャッシュしないページを分けて設定する必要があり、難易度が高め

サイトの高速化と負荷対策(多くのアクセスを捌けるようにする)を図りつつ、動的機能をしようしたい場合に有効な手法となります。

EC2ー静的ページ＋CloudFront配信

• 使用するAWSサービス
  • EC2
  • CloudFront
• 使用するWordPressプラグイン
  • StaticPress
  • Clear CloudFront Cahce

構築方法

EC2(Lightsailでも可)上にWordPress構築後に、StaticPressで静的ページ化し、静的ページをCloudFrontで配信します。

構築方法の詳細は以下の記事をご参照ください。

https://it.kensan.net/it/aws_ec2_wordpress_cloudfront.html

localhost

特徴

WordPressコンテンツを静的ページ化し、静的ページをCloudFrontでキャッシュする方法となります。

この構築方法のメリットとデメリットは以下のような点になります。

• メリット
  • サイトの高速化と捌けるアクセス数を増やすことができる
• デメリット
  • CloudFrontの設定が必要であり、CloudFrontを使ったことがない場合、難易度が高め
  • StaticPress導入にあたり、PHPのソース修正が発生し、EC2単体の構築方法より難易度が若干高め
  • 動的機能(検索やコメント)が使用できない

サイトの高速化と負荷対策(多くのアクセスを捌けるようにする)を図りたい場合に有効な手法となります。

EC2ー静的ページ＋S3+CloudFront配信

• 使用するAWSサービス
  • EC2
  • S3
  • CloudFront
• 使用するWordPressプラグイン
  • StaticPress
  • StaticPress S3
  • Clear CloudFront Cahce

構築方法

EC2上にWordPress構築後に、StaticPressで静的ページ化し、静的ページをS3に転送し、CloudFrontで配信します。

構築方法の詳細は以下の記事をご参照ください。

https://it.kensan.net/it/staticpresss3.html

localhost

特徴

WordPressコンテンツを静的ページ化し、静的ページをS3に転送し、S3の静的ページをCloudFrontでキャッシュする方法となります。

この構築方法のメリットとデメリットは以下のような点になります。

• メリット
  • サイトの高速化と捌けるアクセス数を増やすことができる
  • コンテンツ配信はS3＋CloudFrontとなるため、急激なアクセス増にも耐えられる
  • WordPress(EC2)を配信サーバとして使わないため、WordPressにIP制限をかけることが可能で、セキュリティ的に優れている
    • 関連記事：WordPressのセキュリティリスクとセキュリティ対策-セキュリティ大全
• デメリット
  • CloudFrontの設定が必要であり、CloudFrontを使ったことがない場合、難易度が高め
  • StaticPress導入にあたり、PHPのソース修正が発生し、EC2単体の構築方法より難易度が若干高め
  • 動的機能(検索やコメント)が使用できない

構築の難易度は最も高いが、サイトの高速化と負荷対策(多くのアクセスを捌けるようにする)を図れ、セキュリティにも優れている手法となります。

StaticPressのインストール方法

インストール

1. WordPress 管理パネルから、「プラグイン」 -> 「新規追加」をクリックします。
2. ブラウザの入力ボックスに「StaticPress」と入力します。
3. 「StaticPress」プラグインを選択し、「インストール」をクリックします。
4. プラグインを有効にします。

ソース修正

StaticPressのソース修正をします。

修正ソース：wp-content/plugins/staticpress/includes/class-static_press_admin.php

bitnamiを使用している場合のパス：/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');

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

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

まとめ

AWS上にWordPressを構築する方法は5つのパターンがあり、それぞれ特徴やメリットとデメリットを見てきました。用途にあった方法で構築していきましょー

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

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

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

https://it.kensan.net/it/terraform-howto.html

localhost

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

https://it.kensan.net/it/aws-ec2-wordpress.html

localhost

それでは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をインストールください。

https://it.kensan.net/it/aws-ec2-wordpress.html

localhost

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

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

https://it.kensan.net/it/cloudfront-cache-clear.html

localhost

WordPressURLにBasic認証をかける

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

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

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

https://it.kensan.net/it/staticpress-basic-auth.html

localhost

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

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

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

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

https://it.kensan.net/it/terraform-ec2-wordpress.html

localhost

本記事では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で簡単に配信したい場合

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

https://it.kensan.net/it/aws_ec2_wordpress_cloudfront.html

localhost