2. Web制作について
  3. 【ローカルサーバー環境】MAMP / XAMPPでローカルサーバーをたてよう
【ローカルサーバー環境】MAMP / XAMPPでローカルサーバーをたてよう
web

【ローカルサーバー環境】MAMP / XAMPPでローカルサーバーをたてよう

どうも、Tommy(@SitommyBlog)です。

ローカルサーバー環境とは、いわば仮想サーバーのことであくまでも仮です。なので、世界に公開することはできません。サーバーを用意しなくてもローカル上でサーバーにアップロードさせた状態を作り上げることができる環境のことは言います。

その環境設定について紹介していきたいと思いますが、少々レベルが高い分野になってきます。一度読んでもきっと理解しづらいでしょうが、何度も読んで手を動かしての繰り返しで身につけられるものなので頑張りましょう。

ローカルサーバー環境を作る前に

先ほど、ローカルサーバー環境について少し説明しましたが、環境構築するためにはあるツールを使用することが手っ取り早いのでそちらをオススメします。

『MAMP（マンプ）』と『XAMPP（ザンプ）』というツール（ソフト）があり、どちらかをパソコンにインストールして使用します。とても似ているものですが、少しだけ違いはありますので、それぞれ説明していきます。

MAMPとは？

MAMPとは、頭文字をとってMAMPと呼ばれています。その頭文字は、

  • Macintosh
  • Apache
  • MySQL
  • PHP

から取られたもので、Mac、Windowsともに動作するWebデベロッパー向けツールでローカルサーバー環境一式をインストールできます。有料版のMAMP PROもありますが、無料版で十分ですし、オープンソースで数回クリックするだけでWeb開発環境をインストールできるのも魅力です。

XAMMPとは？

XAMPPも、同様に頭文字からきていてそれは、

  • クロスプラットフォーム
  • Apache
  • MariaDB（旧：MySQL）
  • PHP
  • Perl

から取られたもので、こちらもMac、Windowsともに動作するものでMAMPとさほど変わりません。

クロスプラットフォームは、Windows/Mac/Linux/FreeBSDに対応という意味です。ちなみに、英語で書くと『cross-platform』と書きますが交差する意味合いで『X』を使用しているのかな？

どちらもあまり変わらないと思いますが、入っているソフトウェアでの違いはあり、開発によって使いたいソフトウェアが含まれているか否かでどっちをインストールするか分けるみたいですが、ここではあくまでもただローカルサーバー環境を作りたいだけですのでどっちでもいいです。

私は、Windowsの時はXAMMPを使っていました。理由はなくただスクールで、XAMPPをインストールしてくださいと言われたからです。なにもわかっていませんでした。

Macを使うようになって、なぜかMacを使っている人たちはMAMPを使っていて、そこで初めてMAMPのことを知ったほどで、その影響から今ではMAMPを使用しています。

どちらでもいいですが、私が今MAMPを使っていることもあり、ここではMAMPの使い方をレクチャー使用と思います。よかったらこれを見ながら、MAMPをインストールしてみてはいかがでしょうか。

インストール方法

先ほど、説明した通りMAMPは有料版と無料版が存在します。

『有料版MAMP PRO』は、

  • Webサイト開発管理支援機能 WordPressベース
  • localhostの代わりにユニークなエイリアスを与えることが可能
  • 単一開発マシンに複数Webサイトを同時にインストール

といった、MAMPベースパッケージの商用拡張に対応しているなどいろいろありますが、無料で問題ないです。
こちらからダウンロードできます。

インストール手順

Macのみ説明していきます。
Macのダウンロードを選択しましょう。完了すると。

このようなファイルが作成されますので、クリックし起動させましょう。
起動したら下記の図のようなウィンドウが表示されると思います。

右下にある『続ける』を押して進めていきインストールが完了すると再起動を求められるので再起動しましょう。『MAMP PRO』のチェックをはずす項目が出てきたら外して進めてください。別に外さなくても特に問題ありません。

MAMP起動

インストールが無事終われば、アプリケーションに

MAMPが入ってあると思います。こちらをクリックし起動させてください。

このような画面ができましたか？
でてきたら右の『サーバーを起動』をクリックします。
すると色が緑に変わり、真ん中の『Open WebStrat page』部分がクリックできるようになります。

『Open WebStrat page』をクリックすると、ブラウザに『http://localhost/MAMP/?language=Japanese』ページが表示されます。

この表示されているページが既に、ローカルサーバーのページになっております。ここから、独自で制作する、もしくは、制作されたデータをローカルサーバーにあげてブラウザで見えるようにしていきましょう。

独自の制作データをローカルサーバーにあげる方法

一番左側の歯車のボタンをクリックしましょう。こちらは設定です。

Webサーバーというタブをクリックし、赤枠を見て見ましょう。
ここでは、HDからhtdocsの階層がかかれており、『htdocs』フォルダに制作したデータを置きます。

ここでは、『test』フォルダを作成し、その中に『index.html』を入れて置きます。
index.htmlには、『TestPage』と書いているだけです。

続いて、『htdocs』フォルダと同一階層にある『conf』フォルダを開き、『apache』フォルダーを開き、
最後に『httpd.conf』をテキストエディターなどで開きます。

また別で、『apache』フォルダーの中にある『extra』フォルダーを開き、『httpd-vhosts.conf』をテキストエディターなどで開きます。

まず、先ほどテキストエディターで開いてある『httpd.conf』ファイルから変更していきます。
コードがたくさん書いてあると思います。

MAMPのバージョンによって行数が変わってしまいますが、だいたい574行・575行あたりに書いてあるコードがこれです。

# Virtual hosts
#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

こちらをこのように変更しましょう。

# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

頭の『#』を消した（コメントアウト解除）のみの作業です。これは、複数のローカルホストを立てるために必要です。

続いて、もう1つの『httpd-vhosts.conf』ファイルを見ていきましょう。
このようになっています。

#
# Virtual Hosts
#
# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at
# <URL:http://httpd.apache.org/docs/2.2/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.
 
#
# Use name-based virtual hosting.
#
NameVirtualHost *:80
 
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#
<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>
 
<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host2.example.com"
    ServerName dummy-host2.example.com
    ErrorLog "logs/dummy-host2.example.com-error_log"
    CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>

こちらも、訳のわからんコードがずらっと書いてますが、一番したにあるコードを追加していきます。それがこちら、

Listen 8010
<VirtualHost *:8010>
    DocumentRoot "/Applications/MAMP/htdocs/test"
    <Directory "/Applications/MAMP/htdocs/test">
        AllowOverride All
    </Directory>
</VirtualHost>

よく見ると、先ほど『test』フォルダーを作ったルートが書かれています。
上から順に説明して行くと、
『Listen 8010』は、ローカルサーバーにおいたデータ番号になります。

この番号をURLに入れると、今回では『test』フォルダーに入ってあるデータがブラウザに読み込まれます。番号は任意です。

『VirtualHost *: 8010』も同様、先ほどの番号と同じものを入れておく必要があります。

『DocumentRoot: /Applications/MAMP/htdocs/test』は、制作するデータフォルダーまでのルートパスを書きます。ここでは、『test』フォルダーまでとなります。

『Directory: /Applications/MAMP/htdocs/test』も同様にルートパスを書いてください。

ここまでできたら保存して変更は終了になります。

この画面に戻り、一番右の『サーバーを停止』ボタンを押しまた、

一番右の『サーバーを起動』ボタンを押しましょう。そうすることで、MAMPが再起動し、先ほど変更した内容が反映されるようになりました。

では、先ほど『http://localhost/MAMP/?language=Japanese』が表示されたブラウザに戻り、URLを書き換えます。

MAMPでは、『http://localhost/』このローカルホストというURLがローカル環境のパスになります。

URLに『http://localhost:8010』と変更しEnterキーを押しましょう。

画面のように表示されて入れば成功です。番号を増やして行くことで、複数表示できます。ただ、注意が必要なのは、MAMPを起動していないと、『http://localhost:8010』このURLを打っても表示されませんので気をつけましょう。

まとめ

これで、あなたもルートパスでリンクをつけての作業ができるようになりました。

また、PHPのようなサーバーサイド処理を行う言語を勉強するなら、こういった環境元じゃないと作業ができません。

WordPressもMAMP内で作業できるのでローカルでの作業するにはMAMPはとても役にたちます。

ルートパスについて知りたい方は、下記から見てください。

web

Related

Ranking

目次