XAMPPをインストールしWordPressテスト環境を構築する

 本記事は、Widows11にXAMPPをインストールし、その上にWordPressを構築する手順のメモとなります。

 XAMPPはWebアプリケーションの実行に必要なフリーソフトをまとめたソフトウェアとなります。XAMPPという名前について、Xはクロスプラットフォーム(Windows、macOS、Linuxの複数OSに提供)、AはApache HTTP Server(Webサーバーソフトウェア)、MはMySQLまたはMariaDB(データベースソフトウェア)、PPはPerlとPHP(アプリケーション実行環境)を表しています。

 WordPressの実行にはアクセスの入り口となるWebサーバーソフトウェア、WordPressプログラムの実行環境としてPHP、WordPressのデータを格納するデータベースとしてMySQLまたはMariaDB(MySQL)が必要となります。XAMPPを利用することでこれらの必要なソフトをまとめて用意することができます。

今回の手順は、以下の4つの流れで進んでいきます。
 Ⅰ. XAMPPのインストール
 Ⅱ. XAMPPでWebサーバ(Apache HTTP Server)の起動
 Ⅲ. XAMPPでデータベースサーバ(MySQL)にデータベースの作成
 Ⅳ. XAMPP上にWordPressの設定


◆ XAMPPでのWordPressテスト環境構築手順 (2023年8月時点)

Ⅰ.XAMPPインストール

Ⅰ-1.
XAMPPのサイト(https://www.apachefriends.org/jp/index.html)にアクセスし、「Windows向け XAMPP x.x.x (PHP x.x.x)」ボタンをクリックします。

Ⅰ-2.
インストーラーのexeファイルがダウンロードされますので、完了したら実行します。

Ⅰ-3.
以下のような警告が表示されます。UACによってXAMPPが正常に動作しない可能性があるので、 ”C:¥Program Files¥” 以下へのインストールを避けるか、UACを無効化せよとのことです。「OK」をクリックします。

Ⅰ-4.
「Next」をクリックします。

Ⅰ-5.
必要に応じてインストールするコンポーネントを選択します。WordPressを構築するためには最低限『MySQL』『phpMyAdmin』はチェックを入れたままにしてください。ここではデフォルトのままとし、「Next」をクリックします。

Ⅰ-6.
インストール先を選択します。Ⅰ-3の警告を考慮しましょう。ここではデフォルトの
”C:¥xampp” のまま「Next」をクリックします。

Ⅰ-7.
言語を選択します。英語かドイツ語しか選択できないようなので、デフォルトの『English』のまま「Next」をクリックします。

Ⅰ-8.
「Next」をクリックします。

Ⅰ-9.
インストール完了までしばらく待ちます。

Ⅰ-10.
以下の警告が出た場合は、「アクセスを許可する」をクリックします。

Ⅰ-11.
「Finish」をクリックします。

Ⅰ-12.
以下の画面が出ればXAMPPのインストールは完了です。

Ⅱ.Apache HTTP Server起動確認

Ⅱ-1.
Apacheの行にある「Start」ボタンをクリックします。

Ⅱ-2.
左側の「Apache」の背景が緑色になれば起動は成功です。

Ⅱ-3.
Webブラウザを開き、URLバーに ”localhost” と入力して、以下の画面が出れば成功です。

Ⅲ.MySQLの起動とWordPress用データベース作成

Ⅲ-1.
MySQLの行にある「Start」ボタンをクリックします。

Ⅲ-2
以下の警告が出た場合は、「アクセスを許可する」をクリックします。

Ⅲ-3.
左側の「MySQL」の背景が緑色になれば起動は成功です。「Admin」ボタンをクリックします。

Ⅲ-4.
Webブラウザが立ち上がり、「phpMyAdmin」の画面が開きます。画面上部の「データベース」をクリックし、データベース名に『wordpress』、照合順序に『utf8_general_ci』を選択して「作成」ボタンをクリックします。

Ⅲ-5.
画面左側に「wordpress」ができていれば成功です。
通常はデータベースに接続するユーザーを作成しパスワードを設定しますが、今回は作成せずにデフォルトのrootユーザーを使用します。またパスワードも指定しません。
こちらのphpMyAdmin画面は閉じて構いません。

Ⅳ.WordPressのインストール

Ⅳ-1.
WordPress日本語サイト(https://ja.wordpress.org/)にアクセスし、右上の「WordPressを入手」をクリックします。

Ⅳ-2.
「ダウンロードしてインストール」をクリックします。

Ⅳ-3.
「WordPress x.x をダウンロード」をクリックします。

Ⅳ-4.
WordPressのzipファイルがダウンロードされます。

Ⅳ-5.
zipファイルを解凍し、出てきた「wordpress」フォルダをXAMPPインストールフォルダ(デフォルトでは C:¥xampp)以下の「htdocs」フォルダ内にコピーします。
この場合、URLは http://localhost/wordpress になります。URL部分のwordpress を変更したい場合は、フォルダ名をwordpressから任意の名前に変更しましょう。

Ⅳ-6.
Webブラウザを開き、URL欄に ”localhost/wordpress” と入力します。
以下の画面が開くので、「さあ、始めましょう!」リンクをクリックします。

Ⅳ-7.
データベース名は、Ⅲ-4で作成した通り「wordpress」とします。
データベース接続ユーザーは今回WordPress用に作成していないので、デフォルトの「root」ユーザーを指定します。
データベース接続パスワードも設定していないので空欄とします。
データベースのホスト名について、このコンピュータ自身にデータベースが存在するので「localhost」とします。
テーブル接頭辞はデフォルトの「_wp」とします。

「送信」ボタンをクリックします。

Ⅳ-8.
「インストール実行」をクリックします。

Ⅳ-9.
サイトのタイトルは任意のタイトルを入力します。
ユーザー名とパスワードは、WordPressの管理者画面にログインする際のユーザー名/パスワードになりますので任意で設定します。
メールアドレスを設定します。外部公開しないサイトであっても設定が必要になります。

「WordPressをインストール」をクリックします。

Ⅳ-10.
「ログイン」リンクをクリックします。

Ⅳ-11.
本手順 Ⅳ-9 で設定したユーザー名/パスワードを入力すれば管理者画面に遷移できます。
また下部の 「← {設定したサイトのタイトル} へ移動」リンクをクリックします。

Ⅳ-12.
WordPressのサイトトップが出れば成功です。お疲れ様でした。


◆ 参考文献

XAMPP – Wikipedia
XAMPPを使ってWordPressローカル環境を構築する全手順 (lucy.ne.jp)
【Windows】XAMPPとWordPressのインストール | チグサウェブ (chigusa-web.com)

AWS LightsailのWordPressのApacheでIPアドレスによるアクセス制限

 本記事は、AWS LightsailのWordPressにて、IPアドレスによるアクセス制限をApache HTTP Serverの設定ファイル『httpd.conf』で行う手順のメモになります。

 IPアドレス制限は、アクセス元のIPアドレスによってアクセスを許可/拒否することをいいます。全てのアクセス元からの通信を拒否してから指定したIPアドレスからのみ接続を許可するパターン(ホワイトリスト方式)と、原則全てのアクセス元からの通信を許可しつつ、指定したIPアドレスからの接続は拒否するパターン(ブラックリスト方式)に分けられます。今回は後者のパターンで行います。

 今回はIP制限をApache HTTP Serverで実現します。Apache HTTP Server(以下、Apacheと表記)はWebサーバソフトウェアで、クライアントからの要求をアプリケーションに渡し、アプリケーションからの応答をクライアントに返す役割を担います。このWebサーバにて設定ファイルを編集し、IPアドレス制限を実現します。


こちらのサイト様によるとLightsailのWordPressに含まれるApacheは2023年7月現在でバージョン2.4となり、Requireディレクティブを使うのが良いようですが、本サイトでは2.2の方式(Allow,Denyディレクティブ)で行っています。

※ 本記事ではApache HTTP ServerをApacheと表記していますが、ApacheはHTTP Server以外にも様々なソフトウェアが存在するのでご注意ください。


◆ LightsailのWordPressのApacheでIPアドレス制限 (2023年7月時点)

1.
AWS Lightsail管理コンソールにアクセスし、対象インスタンスのコンソールアイコンをクリックします。

2.
以下のようにコピーコマンド “cp” を管理者で実行 “sudo” して、Apacheの設定ファイル『httpd.conf』のコピーを取得してバックアップとします(バックアップファイル名は任意で構いません)。
 sudo cp -ip /opt/bitnami/apache/conf/httpd.conf /opt/bitnami/apache/conf/httpd.conf_[日付].bak
 (sudo cp [オプション] [コピー元] [コピー先])
 ※ 以下、オプションの説明
  -i : コピー先が既に存在する場合、上書きするかどうかを確認する。
  -p : コピー元のパーミッション、所有者、タイムスタンプを保持する。

3.
以下の “vi” コマンドを管理者で実行 “sudo” して、Apacheの設定ファイル『httpd.conf』を標準テキストエディタで開きます。
 sudo vi /opt/bitnami/apache/conf/httpd.conf
 (sudo vi [開きたいファイル])

4.
『httpd.conf』が開くので、末尾まで移動します。

5.
末尾まで移動したら、キーボードの[i]キーを押してInsertモードに入ります。

6.
以下の内容を挿入します。
今回はWordPressに対してIPアクセス制限をかけるので、対象ディレクトリは ”/opt/bitnami/wordpress” となります。
基本的にはどのIPアドレスからもアクセスを受け付けつつ、一部IPアドレスからのアクセスは拒否するような流れの記載となります。

7.
記載が完了したらキーボードの[esc]キーを押してInsertモードを終了し、 ”:wq” と入力することで編集した内容を保存してテキストエディタを終了します。

8.
apachectl configtest” コマンドを管理者で実行 “sudo” して、Apacheの設定ファイル『httpd.conf』の構文に問題がないかのチェックを行います。
”Syntax OK” と出れば構文エラーはありません。
 sudo apachectl configtest

9.
apachectl graceful” コマンドを管理者で実行 “sudo” して、Apacheの設定ファイルを再読み込みすることで、設定ファイルにきさいされたIPアクセス制限を有効化します。
gracefulはそれまでにApacheに来たリクエストを処理してから再読み込みをするので、Webサイトへのアクセスへの影響をなくすことができます。
本コマンド実行後にもWordPressへのアクセスが正常にできれば問題ございません、お疲れさまでした。
 sudo apachectl graceful


◆ 参考文献

Apacheでip制限をする方法|httpd.confとhtaccessでのやり方を解説する (code-bug.net)
【 cp 】コマンド――ファイルをコピーする:Linux基本コマンドTips(17) – @IT (itmedia.co.jp)
viコマンドについて詳しくまとめました 【Linuxコマンド集】 (eng-entrance.com)
Apacheのrestartやgraceful、stopなどの違い | ⬢ Appirits spirits

AWS LightsailでWordPress起動 (4:WordPressでSSL対応の設定)

 本手順では、AWS Lightsailで動作しているWordPressにて、SSLに対応するための設定を行う手順です。SSL証明書の設定は、Lightsail用CDNと合わせてこちらの記事で設定していますが、WordPress側でSSL通信に対応しないと、たとえばWordPressの管理者ログイン画面が以下のような画面となってしまいます。

SSL通信においても画面を正常に表示させるために、WordPressの設定ファイルにてSSL通信に対応する設定を行います。こちらのサイト様の手順に則っています。


◆ LightsailのWordPressでSSL対応設定 (2023年2月時点)

1.
AWS Lightsail管理コンソールにアクセスします。Lightsailインスタンスのターミナルアイコンをクリックします。

2.
ターミナルが開きます。以下のコマンドを実行し、カレントディレクトリをWordPressの設定ファイルがあるディレクトリに移動します。

cd /bitnami/wordpress/

3.
続いて以下のコマンドを実行し、所有グループへWordPressの設定ファイル (wp-config.php) に対する書き込み権限を与えます。

chmod g+w wp-config.php

4.
No.3の手順で書き込み権限が与えられたことを確認するには、以下コマンドを実行します。

ls -l wp-config.php

実行結果の最初にて、「-rw-rw—-」となっていればよいです。最初の「-」はファイルを表し、2~4文字目がファイル所有者、5~7文字目がファイル所有グループ、8~10文字目がその他グループが持つ権限を表します。「r」が読み取り、「w」が書き込み、ここにはありませんが「x」が実行を表します。そのためこの場合は、ファイル所有者とファイル所有グループに読み取りと書き込みの権限があることになります。

5.
それでは設定ファイルに対して、SSL設定の追記・変更を行います。ファイル内容の編集のため下記コマンドを入力し、Vimテキストエディタで設定ファイルをを開きます。

vim /bitnami/wordpress/wp-config.php

6.
まずは赤枠内の部分を探します。Vimテキストエディタでは [/] を押すことで検索モードに入ることができます。「/{検索したい文字列}」で対象個所を見つけたら [i] を押してインサートモードに入ります。『http』となっている部分を『https』に変更したら、 [esc] キーを押してインサートモードを抜けます。

7.
続いて、以下赤枠部分を追記します。追記には [i] を押してインサートモードに入ります。追記が完了したら [esc] キーを押してインサートモードを抜け、「:wq」と入力して [Enter] キーを押すことで変更を保存してVimテキストエディタを終了します。

8.
設定ファイルを変更したら、設定読み込みのためにWordPressの入り口となるWebサーバの再起動を、以下のコマンドで行います。

sudo /opt/bitnami/ctlscript.sh restart apache

実行結果に「Restarted apache」と出たら、WordPressを開きなおしてみてください。本記事冒頭のような画面ではなく正常にWordPressが表示されたら成功です。お疲れさまでした。


◆ 参考文献

Lightsail WordPressを常時SSL(https)にする方法 | たこぼ〜log (takoboolog.com)
【 chmod 】 ファイルやディレクトリのアクセス権を変更する | 日経クロステック(xTECH) (nikkei.com)
Linuxの権限確認と変更(chmod)(超初心者向け) – Qiita
【初心者必見】最強エディタVimの使い方/コマンド30種まとめ | 侍エンジニアブログ (sejuku.net)

AWS LightsailでWordPress起動 (1:Lightsail起動からIPアドレスでのアクセスまで)

 本記事では、あらかじめWordPressが設定されたAWS Lightsailを起動して、IPアドレス指定によるアクセスまでを行います。

 AWS LightsailはAWSが提供する仮想のプライベートサーバー(VPS)です。仮想サーバーサービスのEC2とは異なり、従量課金ではなく月額固定の料金で利用できます。WordPressやLAMP、Redmineなどがあらかじめ設定されたインスタンスを利用することもできます。
 今回はAWSの東京リージョン・アベイラビリティゾーンA上に、WordPressがあらかじめ設定されたLightsailを起動し、IPアドレスを指定してアクセスするところまでを行います。図示すると以下のような構成になると思います。


◆ AWS LightsailでのWordPress起動手順 (2023年1月時点)

1.
① AWSマネジメントコンソールの右上でリージョンを選択します。
② 検索ボックスで「lightsail」と検索します。
③ 表示されるサービス「Lightsail」をクリックします。

2.
「Let’s get started」をクリックします。

3.
右下でLightsail用コンソールの表示言語を変更できます。
※ 以降の手順も参考画像はEnglishのままでした、ご了承ください。

4.
画面を下にスクロールし、Select a platform欄にて利用するOSを選択します。今回は「Linux/Unix」を選択しました。

5.
画面を下にスクロールし、Select a blueprint欄にて「Apps + OS」を選択し、アプリについては「WordPress」を選択します。

6.
黄緑色背景の部分の文章はWordPressを構成するBitnami・Automatticのライセンスに関する説明書きのようです。
Optional欄の「+ Add launch script」を開いてみます。

7.
先の「+ Add launch script」をクリックして展開された① 欄にシェルスクリプトを記載することで、インスタンスの初回起動時にシェルスクリプトが実行されるようです。インスタンス起動時に必ず入れる設定があるようなプロジェクトでは、インスタンス複製時に役に立つと思われます。今回は特に何も入れないこととします。
② 「Change SSH key pair」をクリックしてみます。

8.
① インスタンスに接続する際のSSH Keyをデフォルトのものから本画面で新たに作成するもの、または自分であらかじめ用意したものへ変更できるようです。今回はDefault keyのままとします。
② 「Enable Automatic Snapshots」のチェックを入れてみます。

9.
スナップショットの取得時間とタイムゾーンを選択します。毎日指定した時刻にスナップショットが取得され、最大7日間保存されます。

10.
金額とスペックを参考に、インスタンスプランを選択します。今回は最も安い「$3.5」のプランを選択します。

11.
① インスタンスの名前を設定し、作成するインスタンス数を入力します。
② 「+ Add key-only tags」をクリックすることで、マネジメントコンソール上でのソートに利用可能なキー値のみのタグを追加できます。また「+ Add key-value tag」をクリックすることで、金額請求にてプロジェクトごとの金額を出したり、アクセス制御に利用可能なキーと値のタグを追加できます。

12.
① Key-only tagsの入力欄、Key-value tagsの入力欄は以下のようになります。Key-value tags の方は複数のKey-valueタグを追加できます。
② 「Create instance」ボタンをクリックします。

13.
インスタンスが作成されます。「Pending」となっている間は起動中ですのでしばらく待ちます。

14.
① 「Running」となれば起動しており、インスタンスにアクセス可能な状態となります。
② コンソールアイコンをクリックするとコンソールが開き、インスタンスを操作できます。
③ グローバルIPアドレスが表示されます。本アドレスでインスタンス(今回はWordPress)にアクセスができます。なおこのIPアドレスは動的IPアドレスとなり、Lightsailインスタンスを再起動するたびにアドレスが変わります。固定IPアドレスの割り当ては、こちらの記事にて行います。

15.
WordPressの管理ページにアクセスするための初期パスワードを確認します。手順No.14の②でコンソールアイコンをクリックすると以下のコンソール画面が開きます。こちらにて以下コマンドを実行します。

cat $HOME/bitnami_application_password

実行して表示される文字列がWordPress管理ページのパスワードとなります。

16.
Microsoft EdgeやGoogle Chromeのブラウザにて

http://{LightsailのグローバルIPアドレス}

を入力してアクセスします。以下のようなページが表示されるはずです。

17.
Microsoft EdgeやGoogle Chromeのブラウザにて

http://{LightsailのグローバルIPアドレス}/wp-login.php

を入力してアクセスします。以下のようなページがでれば成功です。Username of Email Address欄に「user」、Password欄に手順No.15で確認したパスワードを入力し、「Log In」ボタンをクリックします。

18.
以下の通り管理ページが表示されれば成功です、お疲れさまでした!
次回はドメインを取得、DNS設定を行いドメイン名でWordPressにアクセスできるように設定を実施していきましょう。