テスト環境を構築しよう

テスト環境

記事関連ワード

テスト環境 確認 サブドメイン ベーシック認証 .htaccess .htpasswd

テスト環境を作るメリット

作業に慣れるための練習になる
テスト環境と聞くと、難しそう。プロの人がやることじゃないの。と思うかもしれませんが、そうではありません。 むしろ、初心者の方には作業に慣れるための練習にもってこいです。

テスト環境ではどれだけ間違えても問題はありません。どんどん間違えて修正していけば良いです。 本番環境ですと、間違いのある状態・作りかけの状態のものを他の人に見られてしまう可能性があるため、好ましくありません。

テスト環境を作らずに、metaデータにnofollow・noindexなんかを設定して、 検索エンジンにページを認識させないようにしてテストしている方もいらっしゃると思いますが、 私は、noindexを外し忘れたことがあってから怖くてその方法は使わなくなりました。

ミスがないか確認できる
もちろん、アップロードしなくてもPCでhtmlファイルを開けば、誤字・脱字その他のミスに気付くこともできますが、 PC以外のデバイス(タブレットやスマホ)での表示確認もテスト環境があれば簡単に行うことができます。

また、PHPを使っていたり、サーバーを必要とするスクリプト等を使用していると、その動作確認はPCローカル上で行うのは難しいです。

編集中に確認できる
先ほどの内容と少し重複しますが、私は記事を書く際、全て書き終わってからアップロードするのではなく、 ちょこちょことアップロードして、PCやタブレット、スマホで表示して見にくくないかチェックしながら書いていきます。 また、CSSをいじる際はあ~でもない、こ~でもないと色やレイアウトをちょこちょこいじります。

本番環境にすごく中途半端な記事が表示されたり、レイアウトが1分ごとにぐちゃぐちゃに変わったりしたら、見ている人には迷惑ですよね。 何も気にせずに本番と似た環境でチェックできるので、テスト環境を作っておくのはおすすめです。

テスト環境の作り方

では、さっそくテスト環境を作りたいと思います。

私がご紹介するテスト環境は、サブドメインを使い、ベーシック認証を使ってアクセス制限をかける方法です。

手順は以下のとおりです。

・ネームサーバーを設定するなどして独自ドメインとレンタルサーバーの紐づけが終わっていることが前提
・サブドメインをつくる
・.htaccessファイルを作成し、サブドメインのフォルダ直下に置く
・.htpasswdファイルを作成し、.htaccessファイルで指定した場所に置く

この作業を行うと、サブドメインへアクセスした際に、ベーシック認証が行われます。

ベーシック認証画面

ベーシック認証を行うと、お使いのブラウザによって多少画面は異なりますが、上記のような認証画面が表示され、ユーザ名とパスワードを求められます。

このベーシック認証をかけたページは、Googleの検索ロボットからクロール・インデックスされないため、本サイトと内容が重複し、ペナルティを受ける心配はありません。

独自ドメインとレンタルサーバーの紐づけ、サブドメインの作成方法はお使いのレンタルサーバーや独自ドメインの取得会社によって異なるため、今回は説明を省略させていただきます。

①【.htaccess.txtというテキストファイルを作る】
最終的には、【.htaccess】というファイルを作成したいのですが、windowsでは、.htaccessという名前のファイルを作成できないため、 一度テキスト形式で作成します。

②【.htaccess.txtの編集】

AuthUserFile /home/XXXXX/jun-jun.net/public_html/▲▲▲.jun-jun.net/.htpasswd

AuthGroupFile /dev/null

AuthName "testSite"

AuthType Basic

require valid-user


上記ソースを、.htaccess.txtに記入してください。赤色で書かれた部分が各個人で編集、設定する場所です。 1つ目の赤字部分で書かれた【AuthUserFile】のパスは、この後に作る【.htpasswd】を置く場所で、フルパスで記入する必要があります。

この記載例は、本ブログの独自ドメイン(jun-jun.net)に対し、▲▲▲.jun-jun.netというサブドメインを作成し、サブドメイン直下に.htpasswdファイルを置いた例です。

他のレンタルサーバーではどのようなルートになるかわかりませんが、私が利用しているミニバードでは、 独自ドメインへのドキュメントルート(http:jun-jun.netの場所)が/home/XXXXX/jun-jun.net/public_htmlで、 サブドメインのフォルダが独自ドメインの直下に作成されるので、上記のようなパスとなりました。

このドキュメントルートのフルパスは、レンタルサーバーのサーバー情報に記載されていると思いますので、皆さんのパスがどうなっているか確認して設定してください。

【AuthName】に関しては、表示されるブラウザとされないブラウザがあるようです。 上キャプチャ写真は、Edgeのキャプチャで、testSiteという文字が表示されていますが、chromeでは表示されませんでした。

③【.htpasswd.txtというテキストファイルを作る】
先ほどと同様、最終的には、【.htpasswd】というファイルを作成したいのですが、windowsでは、.htpasswdという名前のファイルを作成できないため、一度テキスト形式で作成します。

④【.htpasswd.txtの編集】
このファイルには、ベーシック認証画面で求められるユーザー名とパスワードを記載します。

testUser1:abcdfghijklmn

testUser2:opqrstuvwxyz


認証ユーザーが一人であれば1行、2人であれば2行と追加していきます。 上の例は、ユーザー名がtestUser1でパスワードがabcdfghijklmnのユーザーと、ユーザー名がtestUser2でパスワードがopqrstuvwxyzのユーザーの二人の認証ユーザーがいる例です。

ただし、パスワードに関しては暗号化する必要があります。

.htpasswdに記載する行をパスワードを暗号化した状態で簡単に作成してくれるサイトを作ってくださっている方がたくさんいらっしゃいますので、それらを利用すると、簡単に作成できます。

私が利用させていただいたサイトへのリンクを貼っておきます。

基本認証用パスワード暗号化

⑤【作成したファイルのアップロード】
上で作成した2つのファイルをサーバーにアップロードします。 【.htaccess.txt】を作成したサブドメインのフォルダの直下に置いてください。そして、サーバーに置いた【.htaccess.txt】ファイルの名前を、【.htaccess】に変更してください。

くれぐれも、このファイルを置く場所に気を付けてください。置く場所を間違えると、意図していないページにベーシック認証が設定され、インデックスされなくなってしまいます。

次に【.htpasswd.txt】を先ほどの【.htaccess】でフルパスで指定した場所に置きます。 先ほどと同様に、サーバーに置いた【.htpasswd.txt】ファイルの名前を、【.htpasswd】に変更してください。

これで、ベーシック認証されるテスト環境の出来上がりです。テスト環境に実際にファイルをアップロードして、 サイトを開いてみてください。ベーシック認証画面が表示され、自分で設定したユーザー名とパスワードで認証されれば、成功です。

記事作成日:2016.10.18

Facebookへ Twitterへ Feedlyへ RSSへ このエントリーをはてなブックマークに追加