Web制作の仕事を始めてみたいけど、テストサーバーって必要？設定の仕方や運用方法も知りたいな。
今回はWeb制作におけるテストサーバーの必要性と運用・構築方法について解説していきます。
できるだけ低予算でテストサーバーが立てたい人のためにオススメのサーバーも紹介していますので、これからWeb制作の仕事を始めたいという方は参考にしてみてください。
この記事を書いた人
DoGgy
30歳で大手メーカーの営業マンを辞めて未経験からWeb制作を独学。現在は在宅フリーランスとして月平均50万円稼いでいます。
当ブログでは「在宅ワークの初め方」や「Web制作」について発信中！
Webサイト制作におけるテストサーバーとは？
テストサーバーは、作成したサイトをクライアントにWeb上で確認して貰う（この作業を「プレビューする」と言います）ために必要となるサーバーです。
テストサーバーの必要性
テストサーバーを立てなくたって、クライアントが用意したサーバーにWebサイトをアップロードして確認して貰えば良いんじゃないの？
勿論それでOKな場合もありますが、案件によってはクライアントがまだサーバーを用意していない事もあります。
また既存のサイトのリニューアル案件の場合は、既に公開されているWebサイトのデータがサーバー上に存在しているので、新規に作成したWebサイトのデータを上書きするわけにはいきません。
どのような案件でもプレビューの環境を用意するために、Webサイト制作のお仕事を行う際にはテストサーバーを事前に用意しておくのが理想です。
テストサーバーのメリット
他にもテストサーバーには以下のようなメリットがあります。
- Webサーバーの扱いに慣れる
- ブラウザチェックがやり易い
- WordPressのプレビューが行える
順番に解説していきます。
① Webサーバーの扱いに慣れる
Webサイト制作案件では、クライアントのサーバーを操作する機会が意外と多いです。
サーバーの操作に慣れていないと、クライアントの大切なデータを消去してしまう、アップロードしたWebサイトが正しく表示されないといった、トラブルの原因となる恐れがあります。
一方で、自前のテストサーバー上で何らかのトラブルが起きたとしても、クライアントの大切なデータを損失する心配はありませんし、自分で好き勝手に弄ることができるので、Webサーバーの扱いに慣れることができます。
② ブラウザチェックがやり易い
テストサーバーはWebサイトが各種ブラウザで正しく表示されるか確認（ブラウザチェック）する際にも便利です。
テストサーバーにWebサイトをアップロードしておき、各種端末からURLにアクセスするだけでプレビューすることが出来ます。
特にスマホでの見え方を確認したい場合はサーバーにアップしなければ確認ができないため、レスポンシブサイトを作成する際には必須です。
③ WordPressのプレビューが行える
WebサイトにWordpressを組み込む案件は高単価の物が多く、これから習得を目指している方も多いと思います。
しかし、Wordpressで使用されているPHPという言語はサーバー上でしか動かないため、プレビューはテストサーバーにアップロードして行う必要があります。
逆に言うと、テストサーバーさえ用意しておけばWordpress案件を受注してもプレビューに困ることは無くなりますので、高単価案件も狙っていきたいという人もテストサーバーを用意しておくと良いです。
テストサーバーの立て方
ここからはテストサーバーの立て方についてご紹介します。
といってもやることは一つで、サーバーをレンタルするだけです。
ちなみにポートフォリオサイト用などで既にサーバーを1つ以上レンタルしている方は併用できるので、新たにサーバーをレンタルする必要はありません。
以下からそれぞれの方法を解説していきます。
既にレンタルサーバーを1つ以上レンタルしている方
ブログやポートフォリオサイトを運営していて、既にサーバーをレンタルしているという人は、テストサーバー用に新たにサーバーをレンタルする必要はありません。
「テストサーバーと兼用することで、ブログの表示スピードの低下が気になる」という方は、テストサーバー用に新たにサーバーをレンタルしましょう。
運用方法としては、使用しているサーバーのルート直下へ案件ごとにディレクトリを作成し、クライアントに見せたいWebサイトのデータをアップロードしてURLを伝えるだけです。（下図参照）
テストサーバーのURLがブログやポートフォリオと同じなのは抵抗があるな
その場合は、ブログやポートフォリオサイトで使用している独自ドメイン（有料でレンタルしているドメイン）ではなく、サーバーレンタル時に付与される初期ドメインを活用すれば、それらとまったく別のURLにすることが可能です。
初期ドメインの活用方法については次の項目（テストサーバー用の独自ドメインをレンタルする必要は無い）で解説します。
まだレンタルサーバーを契約していない人
まだレンタルサーバーを契約していない人は、ロリポップ!、カラフルボックス、エックスサーバーなどのレンタルサーバーサービスからテストサーバー用のサーバーをレンタルします。
テストサーバー用のサーバーは特に表示スピードや容量に拘る必要が無いため、価格と使いやすさで決めてしまうのが良いでしょう。
今回は低価格を売りにしているロリポップ！ で、テストサーバーにオススメのプランを紹介します。
まずはざっとプランを見てみましょう。
全部で5プランありますが、赤枠で囲っているライトプラン・スタンダードプラン・ハイスピードプランのどれかから選ぶといいでしょう。
オーバースペックのプランだとレンタル料が割高になってしまいますし、コスト重視で安いプランを選んでも、用途に合っていないと意味がありません。
ということで、選ぶ際の基準を以下の図に纏めましたので参考にしてみてください。
各プランの特徴について以下で解説していきます。
ライトプラン
Wodpress案件を受注する予定が無い方はライトプランがオススメです。
年間4,750円（税込）でサーバーがレンタルできますし（2年目以降は3,300円）、HTMLやCSS、JavaSriptで構成したWebサイトのプレビューをするだけなら十分なスペックです。
ただし、ライトプランはWordpressを構築するために必要となるデータベースが1つしか作成出来ないので、複数案件が同時進行した際に1サイトしかプレビューが出せないという状況が発生する可能性があります。
- 今後Wordpressの勉強をする可能性はあるけど、確定では無い
- とりあえず安価にテストサーバーを用意したい
といった方にオススメです。
スタンダードプラン・ハイスピードプラン
WordPressの案件を受注する予定のある方はスタンダードプランかハイスピードプランがオススメです。
作成出来るデータベースの数はスタンダードプランが50個、ハイスピードプランは無制限のため、どちらもWordpressのプレビューには困らないでしょう。
レンタル料金については、ハイスピードプランのみ初期費用が無料 & サーバーのレンタル期間によって月額が変わるため、短期間の場合はスタンダードプランの方が安く、長期間の場合はハイスピードプランのほうが安くなります。
| スタンダードプラン | ハイスピードプラン | |
|---|---|---|
| 月額/初期費用 | 550円/1,650円 | 契約期間で変動/無料 |
| 合計費用(12ヶ月) | 12×550円+1650円=8,250円 | 12×825円=9,900円 |
| 合計費用(24ヶ月) | 24×550円+1,650円=14,850円 | 24×693円=16,632円 |
| 合計費用(36ヶ月) | 36×550円+1,650円=21,450円 | 36×550円=19,800円 |
長期的に利用するほどハイスピードプランの方が安くなりますが、「長期間利用するか、まだわからない」という方は、取りあえず初年はスタンダードプランにし、2年目以降はハイスピードプランに切り替える、といった運用でも良いでしょう。
エコノミープラン
こちらはデーターべースが1つも作成できないため、Wordpress案件の対応や勉強には向かないプランです。
年間2,970円（税込）の格安でサーバーをレンタルすることが出来ますので、今後Wordpressに触れることは100%無いよ！という方は選択肢に入れても良いでしょう。
テストサーバー用の独自ドメインをレンタルする必要は無い
ここまで読んで「テストサーバー用にドメインをレンタルする必要は無いの？」と思った方もいるかもしれませんが、サーバーの初期ドメインを利用すれば有料のドメインをレンタルする必要はありません。
初期ドメインとは？
殆どのレンタルサーバーでは、サーバーの契約をした時点で無料で使える初期ドメインが付与されます。
ブログやポートフォリオ用にサーバーをレンタルする場合は、有料の独自ドメインをレンタルしてオリジナルなURLに設定する方が多いです。
でもテストサーバー用にわざわざ有料のドメインをレンタルするのは勿体ない気がしますよね？（僕はそうでした。）
ということ訳で、少しでもコストを抑えたい派の人は初期ドメインを活用しましょう！
ちなみに初期ドメインでも、ある程度自分好みにカスタマイズできちゃいます。
初期ドメインのカスタマイズ方法
ここでもロリポップ！を例に見ていきます。
ロリポップ!の場合はアカウント名 = 初期ドメイン名です。初期ドメインは契約時に以下のように決めます。
念の為、トップページから設定画面までの推移をスクショで説明します。
ロリポップ！のトップページから「お申込み」ページに飛ぶ。
今回は初期ドメインの設定画面を見るだけなので、適当なプランの「10日間無料でお試し」をクリックします。
「ロリップ！のドメイン（初期ドメイン）」の下に書いてあるのが、ロリポップ！アカウント及び初期ドメインになります。
現在は初期設定でshy-hiji-9509.itigo.jpとなっていますが、「shy-hiji-9509」の箇所は好きな文字列に変更可能です。
また横にある【URLの末尾を変更する】ボタンをクリックすると以下のウィンドウが出現し、「itigo.jp」の部分を他の種類に変更することもできます。
今回は「main.jp」を選んでみました。
以上の設定で、今回は「test-server.main.jp」を初期ドメインに設定することができました。
これでテストサーバーのトップページのURLは「http://test-server.main.jp」になります。
このように、初期ドメインだけでもテストサーバーっぽいドメインにすることが可能ですので、出来るだけコストを抑えたいという方は活用してみてくださいね！
追記
ロリポップ!が割引きキャンペーンを実施している様です。
ドメインずっと無料（期間: 特に無し？）
ムームードメインの対象ドメインと、ロリポップ！のレンタルサーバー（12ヶ月以上）を新規に契約すると、レンタルサーバーの契約中はドメインが完全に無料になるサービス。
.comや.netなど、定番のドメインも対象になっている模様。
テストサーバーの構築方法
サーバーを用意したら、テストサーバーとして使用するための構築を行いましょう。
といっても、現段階でコーディングしたWebサイトをサーバーにアップロードしてクライアントにURLを伝えるだけでプレビュー自体はできます。
ただ、それだけだとクライアント以外の人に見られてしまう可能性がありますし、Googleのクローラーが勝手に回遊して、プレビュー段階のサイトを検索エンジンに載せてしまう恐れもあります。
それを回避するために、ベーシック認証の設定をします。
難しそうに感じるかもしれませんが、意外と簡単に設定できます！
ベーシック認証とは？
ベーシック認証には以下の役割があります。
- テストサーバーにアクセス制限を掛ける
- クローラーを無効にする
アクセス制限は、閲覧者がURLにアクセスした際にユーザー名とパスワードの入力を求める機能です。
ベーシック認証を設定したサイトにアクセスすると、下図のようなウィンドウが表示されます。
ユーザー名とパスワードが違っていると下図のような画面が表示され、サイトを閲覧することが出来なくなっています。
クライアントにはテストサーバーのURLと、併せてベーシック認証用のユーザー名とパスワードを伝えてあげることで、クライアントのみ閲覧可能な状態にすることが出来ますね。
ベーシック認証のもう一つの機能は、検索エンジンなどのクローラーを無効にすることです。
クローラーとは、インターネット上のWebサイトを巡回して検索結果に反映させるためのプログラムのことを言います。
ベーシック認証を設定したサイトにはクローラーがアクセス出来ませんので、テストサーバー内のサイトが勝手に検索結果に表示されるトラブルが防げます。
以下の記事でベーシック認証の設定方法について詳しく解説していますので、初心者の方は参考にしてみて下さい。
テストサーバーの運用方法
テストサーバーは実務では以下の流れで使用します。
- コーディングしたWebサイトのデータをテストサーバーにアップロードする
- クライアントにテストサーバーのURLとベーシック認証のキー（ユーザー名・パスワード）を伝える
- クライアントがテストサーバーにアクセスしてWebサイトをプレビューする
複数の案件が同時に進んでいる場合は、案件の数だけテストサーバーをレンタルしなきゃダメ？
勿論その必要はありません。
例えばA社・B社・C社の3つのサイトを同時に進めている場合は、下図のようにクライアントごとにディレクトリを作成します。
こうすることで、各サイトのURLは下記のように分かれます。
※テストサーバーのURLを「http://test-server.doggy.com」と仮定します。
- A社・・・http://test-server.doggy.com/corp-a/
- B社・・・http://test-server.doggy.com/corp-b/
- C社・・・http://test-server.doggy.com/corp-c/
あとはそれぞれの会社にURLとベーシック認証のキーをお伝えするだけですね！
ちなみに上記のようにディレクトリで分割する場合、クライアントがURLからトップページに辿れてしまうので、トップページに特定のクライアントのサイトをアップロードせず、空白ページのままにしておきましょうね！
