はりうすブログ (のすけのメモ)

湘南にある小さな会社 代表 ”のすけ”のブログです

Wordpressローカルのテスト環境を用意して開発に備える

ローカルテスト環境とは、自分のPCの内部にサーバを立てて、プログラムを作成とテストをしていくための場所です。 プロダクション環境では、インターネットにアクセス可能な状態で公開されてしまいますので、あまり好ましくありません。 また、一旦リリースした後でも、追加で新しいコンテンツの追加などを継続的に行っていくためにも、テスト環境が必要です。

そこで、自分のPCの内部にサーバを立てて、テストをしやすくします。 これで、いつでもどこでもプログラムの作成や検証ができるようになります。

実際、多くの人がご自分のPCにローカル開発環境にサーバを立ててテストをしており 便利なツールも出てきています。 それが『MAMP』です。

f:id:hollywis:20180814133355p:plain

その他にもWindowsではXAMPPというツールも有名です。 XANPPやMAMPを入れる理由は、WEBサーバ環境を独自に簡単にインストールできるからです。

名前の由来は、「XAMPP」がX:クロスプラットフォームApacheMySQLまたはMariaDBPHPPerlの頭文字を。 「MAMP」がMacintoshApacheMySQLPHP の頭文字を繋げた名前です。 ちなみにMAMPはWebサーバとしてNginx、言語としてPythonも選べるのでより現代的です。 ※MAMPは今はWindows版もリリースされています。

ですので、Windowsの方もここではMAMPをインストールして開発を始めましょう。

MAMPのインストール

MAMP(マンプ) https://www.mamp.info/en/

例えば、普通は次の通りいくつものプログラムを環境に入れる必要があります。

XAMPPやMAMPはこれらの環境が簡単に設定できます。

MAMP & MAMP PRO

こちらからプログラムをダウンロードして、インストールを進めます。

f:id:hollywis:20180814134040p:plain

案内にしたがってインストールをします。

f:id:hollywis:20180814134728p:plain

途中でPRO版のMAMP PROもインストールされますので、この画面で[カスタマイズ]をクリックし、[MAMP PRO]のチェックを外しましょう

f:id:hollywis:20180814134733p:plain

インストールには1.4GBほどの空き容量が必要です。

f:id:hollywis:20180814134913p:plain

インストール完了後、MAMPアプリケーションを起動してください。そうするとサーバの起動画面ができてきますので 右の[Start Servers]をクリックしてサーバを起動しましょう。[Apache Server]と[MySQL Server]の横のランプが緑に点灯すれば正常に起動しています。

f:id:hollywis:20180814134919p:plain なお環境によっては、起動した後にファイアウォールの警告画面が出てくる事があります。 これは通信を[許可]するようにしましょう。

そしてブラウザでMAMPのスタートページが表示されます。 表示されない場合は、次のURLを開きましょう。 http://localhost:8888/MAMP/

ポートの8888がMAMPApacheに割り当てられています。 正常に[Apache Server]が起動していない場合には、上のメニューの[Preferences]をクリックして

f:id:hollywis:20180814140204p:plain

[Ports]タブを開きます。ここでApacheのポートを8888から利用指定なさそうなポートに変更しましょう。 例:8890など

そして再び、[Start Servers]をクリックしてサーバを起動してみてください。

f:id:hollywis:20180814140119p:plain

正常に起動するとこのように、Welcome to MAMPの画面が表示されます。

f:id:hollywis:20180814140540p:plain

Welcome画面の下の方にMySQL設定があります。Wordpressなどのインストールで使いますのでメモしておきましょう。

その他、[Preferences]ではApacheではなくNginxに変更する、PHPのバージョンを変える、ドキュメントルートを変えるなどができます。

f:id:hollywis:20180814141005p:plain 初期設定のドキュメントルートは[WebServer]タブで確認できます。

f:id:hollywis:20180814132419p:plain ここにフォルダを作って、htmlなりphpなりを配置する事で、webアプリケーションを実行できます。