WEBサイトの『テスト環境』の作り方
テスト環境を構築するメリット
プロの方がプログラミングを伴う製作物を作る際は、いきなり本番環境にアップロードしたり、いきなりリリースしたりといった行為は絶対に行いません。
どんなに熟練した技術を持った方でも必ず『ミス』はするもので、裏ではしっかりとテストを行っています。
プログラミングを必要としない、WEBサイトを作成する際はいきなり本番環境にアップロードしてしまう方もいらっしゃるのではないでしょうか。
HTMLファイルの編集を行うだけのページの場合、確かに表示がおかしくなるだけでそれ程大きな問題を生まないケースも多いです。
それでも、やはり『作りかけのページ』や『間違いのあるページ』を第三者の方が見る事のできる状態にするのは好ましくありません。
『TEST』を行うのはプロの方だけでなく、個人でサイトを運営している方にも必要な作業です。
もちろん手間はかかりますが、メリットもあるので是非『TEST環境の構築』に挑戦してみて下さい。
01練習になる
まず、テスト環境を使うメリットはサイト制作を初めて行う『初心者の方』にあると思います。
テスト環境は、他者に見られる事がないため、どれだけ間違えても問題ありません。
『他者』に見られないというのは、『人』はもちろん、サイトのページを巡回する『クローラー』にもあてはまります。
初めのうちは、わからない事や失敗も多いため、何も気にせず練習できるテスト環境は初心者の方におすすめです。
02ミスや表示確認ができる
WEBサイトの作成や編集はPCで作業される方が多いかと思います。
HTMLファイル上での『デザイン』や『文言』の間違いの確認は、テスト環境を作らずとも、ローカルPC内で確認する事ができます。
しかし、何らかの『サーバー側で動く処理』を組み込んでいる場合は、ローカル環境では確認が難しくなります。
もちろん、PC内にサーバーと同じ環境を作ってしまえば確認はできますが、正直、PC内にサーバーと同じ環境を構築するのは、テスト環境を作るよりもはるかに難しいですし、手間もかかります。
また、サーバーと全く同じ環境とは言い切れないため、確認が不十分になります。
また、テスト環境と言っても、WEB上に作られるため、PCからだけでなく、スマホやタブレットなどの『他のデバイスでの表示確認』がテスト環境を作る事で可能になります。
03編集中に確認できる
新しいデザインを作る場合など、場合によってはちょこちょこアップロードしながら確認する作業もあるかと思います。
作成中のページを他人に見られる事なく、何度もアップロードして変更・修正する作業が行えるためとても便利です。
04環境変更時の損害を防げる
『ページの編集』以外にも、『css』の変更や、phpなどの様々な『バージョン変更』など、サイト全体に影響を与える作業を行う際に、テスト環境があればリスク無く確認を行う事ができます。
商売をしているサイトであれば、サイト全体に何らかの不具合が発生してしまうと機会損失が発生する可能性があります。
何か影響の大きな変更を行う際、テスト環境があれば、ゆっくり落ち着いて確認する事ができるため便利です。
テスト環境を作る際のポイント
01本番と同じ環境・構成でつくる
確実にテストを行うためには、本番環境と『同じ環境』『構成』で作る必要があります。
テストを行う際は、1ファイルの内容を確認するだけでなく、全体としての動作も確認する事が重要です。
そのため、必ず同じ構成で作成しましょう。
また、よくあるのがphpのバージョンによる動作不良です。
私もレンタスサーバーの引っ越しを行った際にphpのバージョンの違いにより表示がおかしくなった経験があります。
環境が同じかどうか必ず確認しましょう。
02他者が見れないようにする
テスト環境を使うという事は、『編集中のページ』『確認前のページ』『公開前のページ』などをアップロードするという事になります。
それらのページを他の人に見られるというのは好ましくありません。
特定の方だけが見れるような状況を作りましょう。
今回ご紹介する『Basic認証』を使えば、ユーザーIDとパスワードを知る特定の人物のみ観覧する事が可能な状態を作る事が可能です。
03重複コンテンツを避ける
『テスト環境』と『本番環境』に同じ内容のページが存在する状態となった場合、クローラーに『重複コンテンツ』と認識され、ペナルティを受けてしまう可能性もあります。
ペナルティを受けてしまった場合、検索順位が下がるなどの影響を受ける可能性もあります。
『noindex』をつけて評価対象から除外する事でテストを行う方法もありますが、noindexの設定を削除し忘れると、せっかく作成したページがインデックスされなくなってしまうため、ミスを防ぐためにもあまりおすすめできません。
『Basic認証』であれば、クローラーはBasic認証をかけたページをクロールする事ができないため、重複コンテンツと見なされる事はないためおすすめです。
『相対パス』と『絶対パス』に注意
テスト環境を作成し、確認をする際に問題になるのが、内部リンクの記述方法です。
内部リンクを貼る際の『パス』の書き方は、『相対パス』と『絶対パス』の2種類の方法があります。
上図のような階層構造があったとします。
【index.html ⇒ test.html】
相対パス：sample/test.html
絶対パス：https://jun-jun.net/sample/test.html
test.html ⇒ index.html】
相対パス：../index.html
絶対パス：https://jun-jun.net/index.html
といった書き方になります。
『相対パス』のメリットは、パスの文字数が少なくてすむというのがメインですが、『テスト環境』を構築する際も、フォルダ・ファイルの階層構造が同じであれば内部リンクは正しく動作します。
逆に『絶対パス』のメリットは、リンク元のファイルの配置を変えてもリンク切れが起こらないというのがメインですが、『テスト環境』の場合、テスト環境からメイン環境へのリンクになるという動きをするため注意が必要です。
内部リンクはSEO対策に影響を与える非常に重要な役割を持っていますが、『相対パス』であっても『絶対パス』であってもクローラーはリンク先をたどる事ができるため、SEO対策上の効果に違いはありません。
どちらにもメリットとデメリットがあるため、自分にあった方法で内部リンクを貼りましょう。
また、『絶対パス』で内部リンクを記述する際は、テスト環境と本番環境を行き来するようなリンクが発生するという事を忘れないようにして下さい。
テスト環境の作り方
Basic認証とは
前置きが長くなってしまいましたが、テスト環境の作り方をご紹介します。
方法はいくつかあると思いますが、今回は『Basic認証』を使ったテスト環境の作り方をご紹介します。
『Basic認証』はその名の通り、簡易的な必要最低限の認証設定をWEBサイトにかける方法で、ログインIDとパスワードを知る人のみページを観覧する事ができます。
認証画面には誰でもアクセスできてしまうため、認証を突破されてしまうと見られてしまうため、観覧されるとセキュリティ上問題のあるサイトを作成している方にはおすすめできません。
『Basic認証』と併用するのであれば、『IPアドレスの制限』などもかけると良いかもしれません。
先ほどもお話しましたが、人だけではなく、クローラーもクロールする事ができない仕様になっています。
また、複数のサイトをまたぐようなサイトでは利用が困難になるため、注意が必要です。
作業の流れとしては、以下のようになります。
『.htaccess』の作成と設置
『.htpasswd』の作成と設置
ログイン確認
聞きなれない言葉が出てきて難しそうに思うかもしれませんが、作業は簡単なので、是非やってみて下さい。
サブドメインの作成
『Basic認証』はフォルダ単位で行う事ができるため、本番環境のドメインのルート内にテスト環境用のディレクトリを作成しても良いのですが、間違ってテスト環境にアップロードするはずが、本番環境にアップロードしてしまったなどといったミスを防ぐためにも、『サブドメイン』を作ると良いかもしれません。
また、『.htaccess』の置き場所を間違えると意図しないページにも認証がかかってしまうため、サブドメインなど本番環境とは違う所での作成をおすすめします。
サブドメインの作り方は、お使いのレンタルサーバーによって異なるため、今回は説明を省略させていただきます。
難しい作業ではないため、『お使いのレンタルサーバー名 + サブドメイン + 作り方』などで検索し、調べてみて下さい。
『.htaccess』の作成と設置
『.htaccess』を使ってドメイン認証を設定します。
まずは、先ほど作成をおすすめした、サブドメインの『ルートディレクトリ』に『.htaccess』という名前のファイルがないか確認しましょう。
サブドメイン全体にドメイン認証を設定したい場合は、ルートディレクトリにある『.htaccess』ファイルを編集します。
『デイレクトリ単位』でドメイン認証を設定したい場合は、ドメイン認証をかけたいディレクトリ内の一番上の階層に『.htaccess』ファイルを設置します。
今回は、『.htaccess』を1から作成する場合の作成方法をご紹介します。
デスクトップ上の何もないところで『右クリック』し、『新規作成 > テキストドキュメント』をクリックします。
そうすると、『新しいテキスト ドキュメント.txt』というファイルが作成されるので、そのテキストファイルを開きます。
AuthUserFile /home/XXXXX/jun-jun.net/public_html/▲▲▲.jun-jun.net/.htpasswd
AuthGroupFile /dev/null
AuthName "testSite"
AuthType Basic
require valid-user
上記をそのまま、コピーして貼り付けて下さい。
『AuthUserFile』『AuthName』は自分のサイトに合ったものに書き換えて下さい。
1行目の『AuthUserFile』は、この後作成する『.htpasswd』の置き場所のフルパスを記載します。
『フルパス』がわからない方は、お使いのレンタスサーバーのどこかに『ホーム ディレクトリ』の記載があるかと思いますので、そちらを利用します。
また、レンタルサーバーの『ファイルマネージャー』を見ればフルパスがわかるかとと思います。
どうしてもわからない方は、
『aaa.php』など適当な名前の拡張子が『.php』のファイルを作成し、ファイル内に
<?php
echo __FILE__;
?>
上記プログラムを丸々コピーし、サーバーにアップロードし、URLにアクセスみましょう。
上記のプログラムは、『自身のファイルのフルパスを出力しなさい』というプログラムのため、WEBブラウザ上に、ファイルをアップロードした場所のフルパスが表示されます。
『Authname』はBasic認証をかける領域の名前で、【testSite】や【secret】など適当な名前をつけてかまいません。
現在、『新しいテキスト ドキュメント.txt』となっているファイル名を『.htaccess』に変更します。
『.htaccess』というファイル名でなければ動作しないため、1字も間違えないよう注意して下さい。
拡張子が変わるため、
のような警告メッセージが表示されますが変更してかまいません。
『.htaccess』ファイルをサーバーにアップロードします。
アップロード場所はBasic認証をかけたい領域『内』の一番上の階層です。
サブドメイン全体に対してBasic認証をかけるのであれば、サブドメインのルートディレクトリに、ディレクトリの中だけにかけるのであれば、対象ディレクトリ内の一番上の階層に設置します。
誤って対象領域よりも上の階層に設置すると、対象外の領域にもBasic認証がかかり他者がページを見られなくなってしまうため十分に注意して下さい。
『.htpasswd』の作成と設置
『Basic認証』をかけたページを見るためには、『ユーザー名』と『パスワード』の入力が必要になります。
『.htpasswd』ファイルにユーザー名とパスワードの情報を設定します。
先ほどと同じ方法でテキストドキュメントを作成します。
testUser1:abcdfghijklmn
testUser2:opqrstuvwxyz
上記は、認証ユーザーを2人設定した時の例です。
ユーザーが一人で良ければ、1行でかまいませんし、3人、4人と必要な場合は、3行、4行と追加していきます。
『1ユーザー1行』で記述し、『:』の前半に『ユーザー名』、後半に『パスワード』を記述します。
ユーザー名はそのままで良いのですが、パスワードは暗号化しなければいけません。
簡単にパスワードを暗号化してくれるサイトがあるので使わせてもらうと良いでしょう。
作成したテキストドキュメントのファイル名を『.htpasswd』に変更します。
先ほどと同様の手順なためここでは詳しく説明しません。
『.htpasswd』ファイルをサーバーにアップロードします。
先ほどの『.htaccess』ファイル内に、『.htpasswd』ファイルの置き場所のフルパスを記載しました。
そのパス通りの場所にアップロードしましょう。
認証確認
最後に『Basic認証』をかけた領域にアクセスしてみましょう。
以下のような画面が表示されれば、『Basic認証』の設定が上手くできている証拠です。
『.htpasswd』に設定した『ユーザー名』と『パスワード』を入力し、ページを開く事ができればOKです。
他の意図しない領域にBasic認証がかかっていないか確認もしておくと良いかと思います。