ローカルにWEBサーバー環境を構築できる「XAMPP」のインストールと使い方(Mac編)

ローカルにWEBサーバー環境を構築できる「XAMPP」のインストールと使い方(Mac編)

ローカルにサーバー環境を構築できるXAMPP

XAMPP(ザンプ)は、一般的なWebサーバーがもつ

  • Apache(WEBサーバープログラム)
  • PHP(サーバーサイドプログラミング環境)
  • Perl(サーバーサイドプログラミング環境)
  • MySQL(データベースプログラム)
  • SQLite(データベースプログラム)
  • phpMyAdmin(MySQL管理アプリケーション)

といったアプリケーションをパッケージとしてまとめたツールです。

WordPressサイトを始めとするWEBアプリケーションの開発では、
これら複数のアプリケーションをインストールすることになりますが、
XAMPPを使うとこれらを一気にインストールすることができます。

Macへのインストール

インストーラーのダウンロード

現在XAMPPのMac版は、通常版とVM版が配布されています。

VM版はMac上にLinux仮想マシンを構成し、
その上に各種アプリケーションをインストールするようになっています。

VM版を扱うには、Linuxの操作に慣れている必要があるため、
初心者にオススメなのは、通常版です。

通常版は、Macに直接各種アプリケーションをインストールします。
今回は通常版をインストールすることにしましょう。

ダウンロードページで、VMと付いていないバージョンの
インストーラーを探してダウンロードしましょう。

インストール

インストーラーをダブルクリックして起動し、
案内に従ってインストールを進めます。

インストールが完了したら、/Applicationsフォルダに、「XAMPP」というフォルダが作成され、
その中に「manager-osx.app」というエイリアスが作成されているのを確認します。

これをダブルクリックして起動し、管理画面が表示されればインストール成功です。

WEBページを表示させる

HTMLソースを配置

XAMPPでは、デフォルトで /Applications/XAMPP/xamppfiles/htdocs
以下の領域がドキュメントルート(WEBページのソースファイルを置く場所)となっています。

ここに「htmltest」というフォルダを作成し、その中に「index.html」という名前で
HTMLファイルを作成します。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>XAMPP HTML表示テスト</title>
</head>
<body>
	<p>Hello, World!</p>
</body>
</html>

Apacheを起動する

「manager-osx.app」を起動し、「Manage Servers」タブに移動すると、
XAMPPでインストールしたサーバーアプリケーションを起動するメニューが表示されます。

今回は、PHPアプリケーションの動作や、HTTPリクエストを受け付けるWEBサーバーアプリケーションである、「Apache」を起動してみましょう。

「Apache Web Server」を選択し、Startボタンをクリックすると起動します。

表示確認

ブラウザからhttp://localhost/htmltest/にアクセスしてみて、
「Hello, World!」と表示されれば成功です。

ちなみに、Apacheが動作しているMacからはhttp://localhost/ にアクセスしますが、
LAN内の他のデバイスからはローカルIPアドレス、
LAN外のデバイスからはグルーバルIPアドレスでアクセスする必要があります。

PHPプログラムを動作させる

PHPソースを配置

ドキュメントルート(/Applications/XAMPP/htdocs)以下に「phptest」というフォルダを作成し、

その中に「index.php」という名前でPHPファイルを作成します。
PHPはHTMLに埋め込む形で記述することができるプログラミング言語です。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>XAMPP HTML表示テスト</title>
</head>
<body>
<?php
	echo "<p>Hello, World!</p>"
?>
</body>
</html>

表示確認

Apache Web Serverを起動シている状態で、
ブラウザからhttp://localhost/phptest/にアクセスしてみて、
Hello, World!」と表示されれば成功です。

カスタマイズ

ドキュメントルートの変更

デフォルトでは、/Applications/XAMPP/xamppfiles/htdocs
となっているドキュメントルート(WEBページのソースファイルを置く場所)を変更するには、
Apatcheの設定ファイルである、httpd.confを編集します。

/Applications/XAMPP/xamppfiles/etc/httpd.conf
をテキストエディタで開き、

DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"

とそのすぐ後ろにある、

<Directory "/Applications/XAMPP/xamppfiles/htdocs”>

と書かれている箇所を任意の場所に変更します。

Apacheを再起動すると設定が反映されます。

WEBプログラミング入門カテゴリの最新記事