有料のレンタルサーバを借りてみた その6 ~WordPressのテスト環境を作る~

2020年7月16日サーバ借りてみたシリーズBasic認証,XREA,サイト,サブドメイン,テスト環境,ワードプレスサーバ借りてみたシリーズ,Basic認証,XREA,サイト,サブドメイン,テスト環境,ワードプレス

サーバー借りてみたその6です。

前回までで、一般公開用の WordPress 環境は準備できました。

本当はこの回で WordPress の設定周りを見ていこうと思ったんですが、余談として書き始めたテスト用サイトの作り方が思いのほか長くなってしまったので、今回は、WordPress のテスト用サイトを作ってみる記事になります。

テスト用WordPressの準備

ん~まぁ、当たり前なんですが、公開中の WordPress 上でバリバリ CSS のテストや、テーマのカスタマイズをやりたくはないので、このタイミングでテスト用の WordPress も準備しちゃいます。

それで、テスト用の環境なんですが、サブドメインを作り、そこに各種サービスをインストールしていこうと思います。

サブドメイン作成

というわけで、まずはサブドメインの準備から…

ドメイン設定の新規作成

おなじみ、XREA コントロールパネルのメニューから「ドメイン設定」を選択し、「ドメイン設定の新規作成」をクリックします

ドメイン一覧
ドメイン一覧

サブドメインの作成

ドメイン設定の新規作成が表示されたら、「test.mydomain.shop」のように、サブドメイン形式で、任意の名前をドメインに付け足し「ドメイン設定を新規作成する」をクリックします。

(ちなみに、「サブドメインを使う」は、XREAドメインのサブドメイン(myname.xrea.jp な感じのやつ)を使う場合になります)

ドメイン設定の新規作成 - サブドメインを使う
ドメイン設定の新規作成 – サブドメインを使う

次の画面が出れば作成成功です。

ドメイン設定の新規作成 - 作成成功
ドメイン設定の新規作成 – 作成成功

サイトの作成

今度はサイトの作成になるんですが、メニューから「サイト設定」を選び、「サイト設定の新規作成」をクリックします

サイト一覧
サイト一覧

ドメイン名に先程作成したサブドメインを選び、他は初期値のままで「サイト設定を新規作成する」をクリック

サイト設定の新規作成
サイト設定の新規作成

これも次のような画面が出れば成功です。

サイト設定の新規作成成功
サイト設定の新規作成成功

あとは、テスト環境用のデータベースを作成し、WordPressを新たに作成したこのサイトインストールするだけです。

これらの手順は以前の回で書いてますので、割愛します。

WordPressのインストールに関して補足

WordPress インストールで指定できる「インストールパス」と「サイト」なんですが、前回チラッと書いたとおり、DocumentRootの指定は出来ないようです。

今回のように、サブドメインを作ってインストールする場合は 「/public_html/subdomainname」が DocumentRoot となるようです。

WordPress をインストール際、インストールパスにはサブドメイン名が初期値で入力されてるんですが、例えばこのサブドメイン名の部分を変えちゃうと、メインのサイトの DocumentRoot にディレクトリを作ってインストールした…みたいな解釈になるようです。

書いてみたけど分かりづらいので、幾つか例を書き残しておきます。

メインのサイトが「www.ushiblo.com」、サブのサイトが「test.ushiblo.shop」として、サブのサイトにワードプレスをインストールするとします…

インストールパスWP URLDocumentRoot
test.ushiblo.shophttp://test.ushiblo.shop//public_html/test.ushiblo.shop
ushiblo-test.shophttps://www.ushiblo.com/ushiblo-test.shop//public_html
test.ushiblo.shop/wphttp://test.ushiblo.shop/wp//public_html/test.ushiblo.shop

このルールを把握しておかないと、「インストールしたけど WordPress にアクセスできねぇぇ…!?」ってなりそうなので注意ですね。

Basic認証の設定

テスト環境は一般に公開するわけではないので、Basic認証をかけちゃいます。

.htpasswd生成

コントロールパネルのメニューから「サイト設定」→「ツール/セキュリティー」を選び、「.htpasswdの生成」をクリックします。

ツール/セキュリティー
ツール/セキュリティー

Basic認証用の「ID」と「パスワード」を入力し、「.htpasswd生成」をクリックします。

.htpasswdの作成
.htpasswdの作成

すると、Basic認証を設定するために必要となる .htpasswd と .htaccess が生成されます。

生成されたhtpasswdとhtaccess
生成されたhtpasswdとhtaccess

あとは、この内容で .htpasswd と .htaccess を作り、サーバに配置するだけです。

.htpasswd ファイルの作成

SSHで接続して、サーバ上で直接作っちゃってもいいんですが、FTPが使えますのでね、パソコンでファイルを作成して、FTP経由で設置してみたいと思います。

まずメモ帳あたりを起動しまして、.htpasswd の内容をコピペします。

htpasswd の作成1
htpasswd の作成1

そうしたら、「.htpasswd」という名前で保存するんですが、ファイルの種類を「すべてのファイル」文字コードを「UTF-8」が選ばれてる状態で保存します

htpasswd の作成2
htpasswd の作成2

.htaccess ファイルの作成

.htpasswd と同様に .htaccess も作成します

このとき、AuthUserFile で指定するパスを修正する必要があるので注意。

AuthUserFile には .htpasswd の位置を指定するんですが、生成された状態だと メインサイトの DocumentRoot が基準となってますので、サブドメインの DocumentRoot を指すよう修正します。

/public_html/subdomainname/.htpasswd (今回だと /public_html/test.xxxx.shop/.htpasswd といった感じですね)

.htaccess の作成1
.htaccess の作成1

.htpasswd と同様に、.htaccess というファイル名で保存します

.htaccess の作成2
.htaccess の作成2

サーバーに配置

ファイルの準備は出来たので、サーバーに配置します。

配置には その2 で接続設定をした WinSCP を使います。

WinSCP を起動し、ローカル(左側)のパスを、.htaccess と .htpasswd が保存されたフォルダに合わせ、リモート(右側)のパスは、サブドメインのドキュメントルート(/public_html/subdomainname)に合わせます。

そして、2つのファイルをドラッグ&ドロップでリモート側にポイ

WinSCP
WinSCP

アップロード画面が表示されますので、そのままOKをクリック

WinSCP - アップロード
WinSCP – アップロード

リモート側にファイルが表示されれば、アップロードは成功です。( . (ドット)から始まるファイルは隠しファイル扱いなので、WinSCPの設定を変更しないと見えないかもしれません)

WinSCP - アップロード成功
WinSCP – アップロード成功

Basic認証のテスト

さて、ようやくBasic認証の設定が終わりましたので、こんどはブラウザからサブドメインにアクセスしてちゃんと機能するかチェックします。

ちっさめのログイン画面が表示されるので、ここに .htpasswd 生成のとき入力した「ID」と「パスワード」を入力し「ログイン」すれば…

Basic認証
Basic認証

テスト環境の WordPress サイトにアクセスすることができました。

Basic認証成功
Basic認証成功

さいごに

無くてもなんとかなる、でもあると便利なテスト環境を今回作ってみましたが、まっ更なサーバーに作るときとは違って、サービス類をメニューから作ることができちゃうと、こういうテスト環境なんかも手間なく準備することができますね。

でも、これに慣れちゃうと、Linux系サーバー上でWordPressをソースからコンパイルして作る、、、なーんてやり方を忘れそうでちょっと怖い。(ノ∀`)

といったところで今回はここまで、、、また次回!