【学習119日目】テストサーバーを作成した話

こんにちは！U235です。

前回の記事で、クラウドワークスに登録して簡単な案件をやってみたよ！というお話をしたかと思います。

1月に入り、今月は実際にホームページ制作のお仕事を受注してみました！
まずはトライアルという形で、1案件100円で受注し、合格すれば継続的にお仕事をいただけるという案件でした。

初めての案件でドキドキでしたが、クライアントさんから「毎日進捗を報告してね！Basic認証をかけてね！」とお達しが。

てっきり作り終わってからHTMLファイルを添付するものだと思っていたので、「毎日どうやって報告するんだ……？Basic認証ってなんだ……？」と戸惑いました。

毎日進捗報告する、つまり作成途中のページを共有するということはどこかにアップロードが必要です。しかし、クライアントさんからアップロードするサーバーの指示はありませんでした。

というわけで今回は案件の進捗報告にあたり、テストサーバーを作成してBasic認証を設定したよ！というお話をしたいと思います。

WEBCOACHで使用したロリポップ！サーバーを前提としてお話ししますので、私と同じような初心者の方の参考になれば嬉しいです！

テストサーバーの必要性

そもそもなんでテストサーバーという発想に至ったかというと、テストサイトをクライアントに見せるためです。

でもそれ以外にもテストサーバーには有用性があるなあと感じたので、それを解説しますね！

① テストサイトをクライアントに見せることができる

前述の通り、これが今回テストサーバーを作った一番の目的です。

クライアントさんに制作中のWebサイトを見てもらうためには、どこかにアップロードしておかないといけません。
そうでなければ、制作途中のHTML、CSS、JavaScript、画像もろもろをいちいち添付して、ローカルで開いて確認してもらわないといけません。

それは……クライアントさんにとっては良い迷惑ですよね。

しかし、テストサーバーに作成中のWebサイトをアップロードすることで、URLを共有するだけでクライアントさんに進捗を確認してもらうことができます。

円滑に進捗を確認してもらえることで、作成途中の段階から「ここを変更したい」「この部分が気になる」などのフィードバックをもらうこともできます。

完成してから大幅な修正依頼……となるとこちらの労力も計り知れないので、テストサーバーを作って円滑に進捗を確認してもらえることはお互いにとってメリットがあると言えるでしょう。

クライアントさん側でテストサーバーを用意してくださっていることもあるようですが、今回のように必ずしもそうとは言えないので、準備しておくと良いと思いました！

② サーバー操作の練習になる

実際にWebサイト制作の案件を受けるとなると、クライアントさんのホームページのサーバーにアクセスして、そこに作成したHTMLやCSSなどのデータをアップロードすることになります。

この際、サーバー操作に慣れていない初心者が誤って大事なデータを消してしまったり上書きしてしまったり……なんてことになったら、被害は甚大です。

しかし、テストサーバーは自分サイドの環境。あくまで試験的に作成した環境なので、失敗しても問題ありません。

テストサーバーへのアップロードを何度か繰り返せば、サーバーの仕組みがわかって落ち着いて操作できるようになります。

後述しますが、私はポートフォリオやこのブログで使用しているこのドメインに、サブドメインという形でテストサーバーを作成しています。

一回操作を誤って、ポートフォリオサイトを構成するフォルダにテストサーバー用のデータをアップロードして上書きしてしまい、一時ポートフォリオが閲覧できなくなっていました。
ご指摘くださった2名の方、本当にありがとうございました（；；）

こういうことがあるので、テストサーバーで練習するのは大事だと実感しました……。

③ レスポンシブの表示を確認できる

レスポンシブデザインを確認する場合は、基本的にはデベロッパーツールのモバイル表示でOKです。

しかし、以前の記事でもありましたが、「iPhoneで見たらめちゃめちゃズレてるー！」なんてことが起こり得ます。

なのでお手持ちのスマホやタブレットなどの実際の端末で表示を確認した方が、デザインが崩れていたり、操作性に問題があったりすることに気づくことができます。

テストサーバーにアップロードしてあれば、そこにアクセスしていくらでも確認できますので、そういう意味でも有用性があるなと感じました！

テストサーバーの作り方

では実際にテストサーバーを作成する方法を説明します。

私はWEBCOACHのWordPress編で導入した、ロリポップ！のサーバーを使用してテストサーバーを作成しましたが、大体どのレンタルサーバーでも管理画面が違うだけで同様の用語が出てくると思うので参考にしてみてください。

サーバーの基礎知識

まずは、サーバーに関する基礎知識を確認しましょう。

サーバーには「ルートドメイン」「サブディレクトリ」「サブドメイン」など、いくつかの用語がありますが、それぞれの違いと使い分け方を理解しておきましょう。

つまり、私は以下の図のように、サーバー内を整理して運用しています。

ポートフォリオサイト（ルートドメイン）	https://u2-35.com
ブログ（ルートドメインのサブディレクトリ）	https://u2-35.com/blog/
プロジェクト1（サブドメインのサブディレクトリ）	https://test.u2-35.com/project1/
プロジェクト2（サブドメインのサブディレクトリ）	https://test.u2-35.com/project2/

サブドメインは、基本的にルートドメインとは別サイトとして扱われるようです。

別にルートドメインのサブディレクトリでテストサーバーを管理しても良いのですが、私（u2-35.com）の一部ではないのでドメインを分けることにしました。

ルートドメインの一部として見なすか、別物と見なすか、っていうのはSEO的な問題にも関わるようです。

ロリポップ！でサブドメインを作成する

ではサブドメインを作成していきましょう。
ロリポップ！では、サブドメインの作成が簡単でした！

※WordPress初級編の通り、ロリポップ！のライトプランを契約、独自ドメインを取得済みという前提で話します。

今回は「test」というサブドメインを作成してみます。
（途中「test-server」というサブドメインが表示されますが、これはお仕事で実際に作成・使用したサブドメインです。今回イチから作成するので、似たような名前ですがご了承ください。混乱しないでね。）

① ロリポップ！ユーザー専用ページにログインする

ロリポップ！ログインページにアクセスして、登録したドメインとパスワードを入力してログインします。

② 「サブドメイン設定」を開く

左側のメニューから、「サーバーの管理・設定」→「サブドメイン設定」とアクセスします。

③ サブドメインを新規作成する

ロリポップ！では、独自ドメイン1つにつき、300件まで無料でサブドメインを作成できます。

「新規作成」からサブドメイン設定画面になります。

④ サブドメイン名やフォルダ名を設定する

サブドメイン：設定したいサブドメイン名（test-server、test、など。わかればなんでも大丈夫！）を入力します。その後ろはルートドメインを選択しましょう。

公開（アップロード）フォルダ：サブドメイン名と同じがわかりやすいのでオススメです。これもわかればなんでも大丈夫です。ロリポップ！サーバーのどのフォルダに入っているデータを表示させますかってことです。

ロリポップ！アクセラレータの設定：特に支障がなければチェックでOK！ただしBasic認証をする場合はチェックを外してください。
（下のスクリーンショットではチェックを外し忘れましたが、後から設定を変えられるので大丈夫です）

作成ボタンを押すと、サブドメインのURLと公開フォルダの確認画面が表示されます。

今回は「test」というサブドメインを作成してみます。

問題なければ設定ボタンをクリック！

確認ダイアログが出るので、それもOKをクリックしましょう。

無事追加されました！

ただ、実際に閲覧できるまでに1時間くらいかかるので、すぐにはアクセスできません。
アクセスできるようになるまでに、SSLの設定やデータのアップロードを済ませましょう～！

テストサーバーもSSL化しよう

SSLとはSecure Sockets Layerの略で、インターネットで送受信されるデータを暗号化する仕組みのことです。

WEBCOACHのWordPress初級編でも、SSLの設定をしたかと思います。
SSLってなんで大事なんだっけ？ということをおさらいしつつ、テストサーバーにもSSL設定をしましょう！

SSL化の重要性

テストサーバーに限らず、WEBサイト作成でSSL化はとっても重要です。
そのメリットを確認しましょう。

① 通信の安全性を確保できる

SSL化してデータを暗号化しない場合、そのまま読めるデータがインターネット内を流れます。

そうすると、悪い人がその通信を盗み見ようとしたときに、個人情報やパスワードなどの機密情報がそのまま見えてしまいます。

SSL化してデータを暗号化すると、悪い人がその通信を盗み見ようとしても、内容を理解できないため安全、というわけです。

後述する「Basic認証」という、WEBサイトにアクセスするためのパスワードを設定したとしても、それをそのまま盗まれてしまう可能性があります。

テストサーバーにアップロードする内容は自分とクライアントしか見れません。つまりまだ正式に世の中に出回っていない情報です。

なのでテストサーバーでも必ずSSL化しましょう！

WEBサイトの信頼性が向上する

SSL化しているサイトとしていないサイトの見分け方はURLの頭です。

URLがhttps://～で始まる場合はSSL化されています。最後のsはSecureのsです！
http://～で始まる場合、SSL化されていません。また、ブラウザのURLの前に「保護されていない通信」と警告が出てしまいます。場合によってはブロックされてアクセスすらできません。

そんなわけで、今時SSL化していないサイトは危険！信頼できない！と訪問者に不安を与えてしまいます。

SEO効果がある

他にも、SSL化されているWEBサイトの方が当然信頼性が高いので、SEOで有利になるメリットがあるみたいです（テストサーバーではSEO対策は必要ないですが……）。

ロリポップ！で無料SSLを設定する方法

ロリポップ！では無料と有料（3種類）のSSLを提供しています。

独自SSL診断は以下の通りです。

とのこと。

今回は無料SSLの設定方法を確認します。

① ロリポップ！のユーザー専用ページにログインする

ロリポップ！ログインページにアクセスして、登録したドメインとパスワードを入力してログインします。

② 「独自SSL証明書導入」を開く

恐らくログインするとトップページに「独自SSLが設定されていないため、守られていない独自ドメインがあります」と警告が表示されると思います。
その「無料独自SSLを設定する」をクリックします。

あるいは、左側のメニューから、「セキュリティ」→「独自SSL証明書導入」とアクセスします。（開くページは同じです。）

③ 無料独自SSLを申請する

ページ真ん中ほどに、「独自SSL（無料）」というセクションがあります。

SSL保護されていないドメインが表示されているので、チェックを付けて「独自SSL（無料）を設定する」をクリックします。

「×SSL保護無効」と書いていた部分が、「SSL設定作業中」になっていればOKです。

④ SSLの適用を確認する

設定が完了するまでに5分程度かかるとのことです。

今開いている独自SSL証明書導入ページをリロードして、「SSLで保護されているドメイン」に移動しているか確認しましょう。

無事SSL化できました！

リダイレクト設定をしよう

無事SSL化できましたが、これで終わりではありません。

今は「http://～～」と「https://～～」の両方にアクセスできる状態です。

万が一「http://～～」のURLにアクセスされても、強制的に「https://～～」に飛ぶように設定すればOKです。
（WEBCOACHのWordPress初級編でもやったことがあるはずです！）

① ロリポップ！のユーザー専用ページにログインする

ロリポップ！ログインページにアクセスして、登録したドメインとパスワードを入力してログインします。

② 「ロリポップ！FTP」を開く

左側のメニューから、「サーバーの管理・設定」→「ロリポップ！FTP」とアクセスします。

③ サブドメインのフォルダを開く

サブドメインを作成したときに「公開（アップロード）フォルダ」で設定した名前のフォルダがあるので、それを開きます。

④ .htaccessファイルを作成する

上段の「新規ファイル作成」から.htaccessファイルを作成します。

その下のテキスト入力欄には、以下をコピペしてください。

※最後に改行が入ります！

保存すれば完成です。

⑤ リダイレクトされるか確認する

では「http://～～」のURLにアクセスしてみましょう。
自動で「https://～～」に移動するはずです。

リダイレクトしない場合、.htaccessの設定を見直したり、キャッシュを削除したりしてみてください。

Basic認証を設定しよう

テストサーバーにアクセス制限をする場合、Basic認証を使うのが簡単なようです。
今回はクライアントさんからBasic認証をするように指示をされたので行いました。

Basic認証とは

Basic認証とは、特定のID（ユーザー名/アカウント名）とパスワードを知っている人だけがアクセスできるようにする仕組みのことです。

Basic認証を設定したページにアクセスすると、ブラウザにユーザー名とパスワードを入力するポップアップが表示されます。
それが正しければページを表示し、正しくなければアクセスを拒否することができます。

※簡易的なアクセス制限になるので、必ずSSL化と併用することと、高度なセキュリティが必要な場合は別の方法を検討する必要があります。

ロリポップ！でのBasic認証の設定方法

ロリポップ！でのBasic認証は簡単でした。
以下の手順で進めてみてください。

① ロリポップ！ユーザー専用ページにログインする

ロリポップ！ログインページにアクセスして、登録したドメインとパスワードを入力してログインします。

② 「アクセス制限」を開く

左側のメニューから、「セキュリティ」→「アクセス制限」とアクセスします。

③ アクセス制限を新規作成する

「新規作成」ボタンをクリックし、アクセス制限の設定をします。

今回はテストサーバー（test）の下のproject1ディレクトリにBasic認証をかけてみます。

入力できたら「作成」ボタンをクリックします。

これでBasic認証がかかりました！

④ Basic認証がかかっているか確認する

実際のページにアクセスしてみましょう。

こんな感じでログイン画面が表示されればOKです！

Basic認証がうまく動作しない？

実は、お仕事で実際にBasic認証を設定したときに、ログインダイアログは出ているけどその下に目的のページが丸見え状態になってしまいました。

なぜ……と調べたところ、どうやらロリポップ！アクセラレータが悪さをしているようでした。

なのでテストサーバーではロリポップ！アクセラレータを切っておきましょう。

もし同様の現象が起きてしまった人は、管理画面の「サーバーの管理・設定」→「ロリポップ！アクセラレータ」から設定を確認してみてください。

まとめ

今回は、テストサーバーの必要性から作り方、SSL化、そしてBasic認証の設定まで、テストサーバー運用に必要な手順を解説しました。

かなり長くなってしまいましたが、うまく設定できたでしょうか？

今後のクライアントワークでも活躍してくれると思うので、今回テストサーバーを作成して良かったなあと思っています！

まだ作っていない方は、今後のクライアントワークに向けてぜひやってみてください。

ではまた～！