本稿では、”テスト環境”を作成する流れを解説いたします。
”テスト環境”とは、一般社会には公開せず、誰もアクセス出来ない非公開な状態で下書きをしたりテストしたりするWEBサイトの環境のことを指しています。
”デベロッパー環境”や”デブ環境”とも言われることがありますよね。
この呼び方は各社違いがあると思いますので、総じて”テスト環境”くらいに思っていただければと思います。
ですので、今後、ご自身で勉強をしたり新しい記述を試してみたい場合は、テスト環境を作成し、そこで好きなことをしていただければと思います。
あと、実際の仕事でのお話でいいますと、どんなWEBサイトでも大抵テスト環境は存在しています。
テスト環境で動作確認までしてから、本番環境に反映をするのが定石です。
時にはテスト環境を複数作成するケースもあります。
”社内で下書き用”、”クライアントに見ていただく用”、”本番環境”、”本番環境のバックアップ用”などなど。
これに関してはケースによって変わりますが、およそ何かが起きてもすぐにリカバリーをすることが出来るようにしている感じですね。
で、今回は、そこまで大仰なテスト環境の話がしたいわけではなく、コーポレートサイトを作る時くらいの規模感の時によく使うテスト環境の作り方をご紹介いたします。
というのも、どのような規模のテスト環境においても SSL を実装するか否か・・・のようなお話が出てきます。
テスト環境のSSLと本番環境のSSLをあわせるということは、費用のお話に繋がってきますね。
本番環境のSSLは有料で、テスト環境のSSLは無料で・・・というのは状況によっては厳しいこともあります。
通販サイト（EC）サイトの場合、クレジット決済のための通信のテストをすることもあります。
テスト環境を別のサーバーに設置する場合、色んな差分が出てくるかもしれません。
Githubのようなバージョン管理プログラムを使う場合、また話が変わってきます。
ですので、一言にテストと言っても、プログラムや環境の数だけテストが存在しますので、大仰なテスト環境の話がしたいわけではない・・・というのは、同じレンタルサーバー内にテスト環境をつくる・・・という初歩的なテスト環境のお話です。
SSLは無料の「Let’s Encrypt」でいいですし、サブドメインを使って、basic認証（ベーシックにんしょう）をかけるだけ、、、という、初歩的なテスト環境ですね。
basic認証については難しいことではありませんので、後ほど解説いたします。
ひとまず、取り立てて難しくない、レンタルサーバーを活用してテスト環境をつくっていきましょう・・・というくらいの感覚でよろしくお願いいたします。
目次
写真で見るレンタルサーバーでテスト環境の作成
サブドメインを作成
まず、レンタルサーバーにログインして、サブドメインを作成します。
昨今のレンタルサーバーでは、ドメインを幾つも設定出来るサービスが多いです。
独自ドメインを5つ取得して、5サイト分の本番環境設定が出来たり、その5サイト分のテスト環境を設定する・・・ということもできます。
サブドメインの「新規作成」をクリックします。
この作業の流れは独自ドメインで設定した時に、設定した流れですね。
今回、「www」の部分を「ahaha」にしてテスト環境ドメインを作成していこうと思います。
見ていただいたように文字列を入力してください。
「公開（アップロード）フォルダ」はサブドメインの文字列をそのまま入力してください。
今回ですと、「ahaha.semlaboratory.company」です。
入力した内容を確認して間違えていたら修正して、正しければ「設定」ボタンをクリックしてください。
その後、正しくサブドメインが設定されたか確認するようにしてくださいね。
そして、独自ドメインの時も確認しましたが、ここでも同じようにFTP上で正しくフォルダが作成されたか確認するようにしてください。
レンタルサーバーによっては、自分でフォルダを作成しなければいけないことがありますので、その場合、ご自身でFTP上でフォルダを作成し、作成したフォルダに対してドメインを紐づけるようにしてください。
そして、改めてご自身のパソコンのFTPのフォルダを、サーバー上のフォルダ構成と同じようにするためにファイル一式をダウンロードしてください。
つまり、これもバックアップになっていくわけですね。
サブドメインにSSLを設定
サブドメインの設定が完了して、バックアップもしたならば、次はSSLですね。
今回は、独自ドメインでも設定いたしました「Let’s Encrypt」の設定をいたします。
設定したドメインを選んで「設定する」ボタンをクリックしてください。
設定が進むと以下のような表示になります。
これで、SSLの設定操作はひとまず完了しました。
まだ、この時点では、SSLは設定が反映されないため、数時間程待って、SSLの設定が反映されるまで待ちましょう。
テキストエディタを準備する
で、その間に、次の作業に進みます。
ここで、サーバーにアップロードするためのファイルをつくるためのテキストエディタをインストールしておきます。
今回、当方では「mi」というテキストエディタを選びました。
本番（現場）の時には基本的に有料のテキストエディタを使っている方が多いと思いますが、ここでは敢えて無料のソフトを選んでいます。
テキストエディタは構文をすぐに呼び出せたりプロジェクト管理出来たりする方が、何かと都合がいいことが多いんですが、ここでのレベルはまだテキストエディタに慣れる段階のことだと考えています。
そのため、無料のエディタでファイルを触っていくようにいたします。
さて、以下の画面は、テキストエディタを開いた時の画面です。
細かいことは置いといて、今後、ご自身でエディタを使ってファイルを作成する時には、必ず、文字コードは「UTF-8」で、改行コードは「LF」にしてからファイルを保存するようにしましょう。
ここでは、文字コードと改行コードについての説明は割愛いたします。
そして、既に作成されてるファイルを開いた時には文字コードと改行コードを確認してください。
文字化けなどをしてる場合、この文字コードや改行コードと、ファイルに記述された言語やプログラムの文字コードの指定があってないということがあります・・・という話はまた別で取り上げます。
ここではひとまず、文字コードは「UTF-8」、改行コードは「LF」が一般的ということで覚えておいてください。
「.htaccess」を作成する
さて、次は、以下のコードを開いたてテキストエディタにコピペしてください。
AuthType Basic
AuthName "Access to the staging site"
AuthUserFile /home/users/0/weblike.jp-semlaboratory/web/ahaha.semlaboratory.company/.htpasswd
Require valid-user
以下の部分については、レンタルサーバーによって変わる記述になりますので、レンタルサーバーに確認を取るようにしてください。
（AuthUserFile の横に記述されているパスです）
/home/users/0/weblike.jp-semlaboratory/web/ahaha.semlaboratory.company/.htpasswd
ロリポップの場合、以下の箇所で確認いたします。
左側のメニューにある「ユーザー設定」の「アカウント情報」をクリックしてください。
そうしましたら、そのページの中の表の中に「フルパス」という記述がありますので、「フルパス」という記述のあるところからパスをコピペしてください。
このフルパスはレンタルサーバーやサービスによって構成が大きく変わってきますので、全部が同じものだとは思わないでください。
さて、フルパスを記述いたしましたら、先ほどのファイルを保存します。
この時、「.htaccess」というファイル名をつけてください。
そうしますと、以下のような確認のウィンドウが出てきますが、そのまま保存してください。
.htacessを保存する場所は、
/home/users/0/weblike.jp-semlaboratory/web/ahaha.semlaboratory.company/
です。
サブドメインを作成した時に作成したフォルダに保存してください。
作成したフォルダ名 : ahaha.semlaboratory.company
保存した後に当該フォルダをご確認ください。
あれっ？ファイルが見当たらない・・・と思いますが、これは正常な状態です。
「.htaccess」とは、「.」（ドット）からファイル名が始まり、「htaccess」（エイチティーアクセス）と言われる拡張子がついている状態でして、一般的なパソコンは見覚えのない拡張子ファイルという認識となり表示してくれなくなります。
いわゆる”隠しファイル”になるわけですね。
ここで、Mac、Winともに以下のようにして隠しファイルを表示するコマンドを打ってみてください。
- Mac : shift + command + .（ドット）
- Windows : フォルダーオプションの「表示」タブ >「隠しファイル、隠しフォルダー、および隠しドライブを表示する」を選択
そうしますと、以下のようにうっすらしたファイルが表示されます。
フォルダでも同様の動作を行います。
余談ですが、隠しファイルを隠さないようにするコマンドもあるんですが、winではコマンドプロンプト、Macだとターミナルを立ち上げてコマンドしなければいけないため、普段は都度都度隠しファイルは適宜操作を行い表示するようにしてください。
「.htpasswd」を作成する
さて、今度はIDとパスワードを設定するための手順に入っていきます。
「.htpasswd」に設定するIDとパスワードを準備してくれる以下のサイトにアクセスしてください。
類似したサイトは多いので「htaccess パスワード」など検索して適宜準備してください。
そして、以下の赤枠に半角英数字一部記号などを打ち込んで先に進めてください。
そうしますと、IDと暗号化されたパスワードが書き出されますので、以下の赤枠の部分をコピーしてください。
そして、次に、エディタで新規ページを立ち上げまして、コピーした内容をそのままペーストしてください。
そして、今度は「.htpasswd」とファイル名をつけて保存してください。
ファイルの扱いは「.htaccess」と同様の扱いとなりますので隠しファイルになります。
保存場所は、、、基本的には非公開領域に設置すべきなんですが、今回は、「.htaccess」と同じ場所に保存してください。
念の為ですが、今回は分かりやすくするために公開された領域に基礎的な設定ファイル（.htpasswd）を置いていますが、実際の現場ではドメイン設定された場所以外のところに置くことが多いです。
例えばですが、今回の弊社の環境で言えば、以下のパスのところに設置するのが妥当なところです。
/home/users/0/weblike.jp-semlaboratory/web/
若しくは
/home/users/0/weblike.jp-semlaboratory/web/_setfile/
のような適当なファイル名をつけ、管理するためだけのフォルダを作成するなどです。
「.htaccess」はルートフォルダにアップし、「.htpasswd」に関しては未公開領域にアップするのが通例です。
（ルートフォルダとは、ここではドメインの起点となる階層フォルダのことだと思っておいてください。
状況によって”ルート”が指すフォルダや場所は変わりますが、基本的には起点となる階層フォルダのことになります。）
上記の領域は基本的なドメイン設定をしない限り目につきにくいところですので、セキュリティに（ちょっとだけ）配慮した・・・ということになります。
システムになってきますと、設定ファイルなどは基本的には外に出すのが通例ですので、それが当たり前だと思っていただければと思います。
「.htaccess」と「.htpasswd」をサーバーにアップする
「.htaccess」と「.htpasswd」を作成しましたら、ftpを使いサーバーにアップしてください。
アップする場所は、テスト環境のドメインとなるフォルダにアップし、ドメインのルートフォルダとなるフォルダにアップしてください。
アップロードする操作は、ftpの左側（自分のPCのフォルダ内容が表示されている領域）でファイルを選択した状態にして右クリックで「アップロード」コマンドを選択してクリックしてください。
アップロードが完了いたしましたら、ページにアクセスしてみてください。
状態が正しければ、ページに遷移したらIDとパスワードの入力を求められ、正しく入力すればページにアクセスできますし、間違えて入力すれば延々ページにアクセスできないまま・・・という感じになります。
締め
以上で、基本的なテスト環境の設定は完了です。
ただ、セキュリティへの配慮という点において、例えば「basic認証」ではなく「digest認証」を使ったり、ftp接続も必ずftps接続にするであったり色んなことがあります。
また、バージョン管理システムを利用しますと、公開アップはコマンドで打ちこまなければいけないなど、サイトの規模が大きくなればなるほどルールや規則が出てきます。
そして、相応の技術を身に付けていくことになるわけですね。
大きな案件にも対応するためには、まず基礎を押さえて慣れていかないといけないといけません。
今後、このテスト環境にテスト内容をアップし、テスト環境で上手く動けば本番環境にもアップして本番環境でも動作確認します。
その後、日が経ち、手元で作業をする際には本番環境からファイルをダウンロードしてきて、手元で作業を行いテスト環境にアップします。
そこで上手く動けば、本番環境にアップします・・・という作業の流れが出来ていきます。
次は、htmlファイルを作成してアップしていく・・・という作業になる流れになります。
ひとまず、ファイルがどこにいったか分からなくなったということがないように、ファイルの整理に気をつけてくださいね。
| Profile | |
|---|---|
 |
SEM LABORATORY»書いた記事一覧 株式会社SEMラボラトリーの管理者アカウントです。公式の発表については管理者アカウントから配信しています。 |
この記事へのコメントはありません。