ウェブマスターがウェブのことを書いたら

ウェブマスターとして働いている管理人がウェブで躓いたこと、ググったことを備忘録として書いています。主に技術的なこと、WEBサイト設計のこと

ロリポップでテスト環境を作る方法~テストサイトはステージングで

      2016/04/15

 - レンタルサーバー

ロリポップでテスト環境を作る方法です。独自ドメインでサイトを運用する場合で、ロリポップから割り当てられたドメインを使ってテスト環境を作る方法を紹介します。初心者向けです。

テスト環境は必要?

通常、システム開発やサイト制作の現場では、本番環境(公開するサイト)とほぼ同じ環境のテスト環境をつくります。

テスト環境を作っていれば、デザインの変更やシステムの改修をテスト環境で行い、問題なければ本番環境に反映という手順を踏むことができます。

WordPressなどではプラグインがアップデートされた場合など、アップデート後、デザインが崩れたり、システムに修正をいれないといけない場合もあります。そんな場合でも、テスト環境で試していれば、本番サイトには影響を与えることなく、アップデートを反映することができます。

個人のブログや、アフィリエイトのサイトでも、ロリポップでは簡単にテスト環境を構築できるので作っておいた方がいいと思います。

※また、テスト環境は、ステージング環境とか、開発環境と言われる場合もあります。

ロリポップでテスト環境構築

ロリポップ管理画面
ここに記載されているドメインはサーバーを借りた際にロリポップから割り当てられたサブドメインです。
このドメインは自由に使えます。このドメインでサイト公開することもできます。今回はこのドメインを使ってテスト環境をつくります。

例では、http://hogehoge.raindrop.jp/とします。

次に環境構築の手順ですが、静的にサイトを構築している場合は1を、WordPressを使っている場合は2を見てください。

1.テスト環境のフォルダを作る

まず、テスト環境のフォルダを作ります。管理画面メニューの「WEBツール」-「ロリポップ!FTP」をクリックしてサーバーにFTP接続します。(FTPソフトでもOKです)
ロリポップ管理画面
独自ドメインを設定している場合は、すでにフォルダが存在しています。それとは別に、テスト環境として使うフォルダを作成します。

http://hogehoge.raindrop.jp/test/

フォルダを作り、ファイルをアップロードします。

テスト環境を
http://hogehoge.raindrop.jp/test/
としたい場合は、「test」のフォルダを作ります。

⇒http://hogehoge.raindrop.jp/test/にアクセスするとサイトが表示されます。

2.WordPressをインストールする

WordPress、baserCMS、EC-CUBEでサイト構築している場合は簡単ツールからインストールします。(※ここは通常のインストールと同じです。インストールするドメインをロリポップのドメインにします。)

WordPressの場合

「簡単ツール」-「WordPress」からインストールします。
簡単インストールWP
「インストール先URL」でロリポップのドメイン(hogehoge.raindrop.jp)を選択します。ディレクトリ以下に構築したい場合はフォルダ名を入力します。

そのほか、利用データベース、WordPressの設定内容を入力後、入力内容確認ボタンでインストールします。

これで構築完了です。設置したURLにアクセスすると表示します。
設置フォルダが「test」の場合
⇒http://hogehoge.raindrop.jp/test/

アクセス制限をかける

上記の設定のみでテスト環境は構築できますが、このままでは本番環境と同じものがWEB上に公開された状態になっています。アクセス制限(BASIC認証)をかけて自由にアクセスできないように設定します。

アクセス制限をかけると、設定したアカウントとパスワードを知らないとページにアクセスできなくなります。ページにアクセスした際に、アカウントとパスワードの入力を求められます。

クロームの場合
クロームベーシック認証

Firefoxの場合
firefoxベーシック認証

「WEBツール」-「アクセス制限」の画面で設定します。
ロリポップアクセス制限

「.htaccess設置ディレクトリ」でアクセス制限をかけたいフォルダを指定します。フォルダ名の未入力で設定してしまうとhttp://hogehoge.raindrop.jp/以下すべてにアクセス制限がかかってしまいます。独自ドメインのフォルダがある場合、すべてにアクセス制限がかかってしまいます。フォルダごとに設定した方がいいです。

「認証フォームタイトル」「アカウント名 」「パスワード」を入力します。

「認証フォームタイトル」・・・ページにアクセスした際に出るダイアログのタイトルです。ブラウザによって表示の仕方が違います。
「アカウント名 」「パスワード」・・・アクセスする際のアカウントとパスワードの設定です。

以上で完了です。

WordPressでの注意点

WordPressでサイト構築している場合は、テスト環境ではメニューの「設定」-「表示設定」の「検索エンジンでの表示」では「検索エンジンがサイトをインデックスしないようにする」にチェックを入れておきましょう。アクセス制限をかけている場合はインデックスされることはないですが、何等かでアクセス制限を解除した場合にインデックスされてしまう可能性があります。

もう1点は、ソーシャル系のプラグインを使用している場合はプラグインを無効にしておきましょう。記事投稿の際にツイッターやFacebookに令閨していると投稿されてしまいます。

本番環境のデータ、設定を丸ごとテスト環境に持ってきたい場合はこちらの記事を見てください。
WPで丸ごとデータ移行、インポート・エクスポートはAll-in-One WP Migrationが超簡単

まとめ

ロリポップのドメインで設定するだけの簡単な設定ですが、このページを見ている方は初心者方が多いと思いますのでまとめました。

スタイルやWPのプラグインをアップデートする際は、テスト環境で構築してから本番環境に反映すると運用する際のリスクも減りますので、試してみてはいかがでしょうか。