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

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

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

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

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

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

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

Windowsへのインストール

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

XAMPPダウンロードページから、
インストーラーをダウンロードしましょう。

インストール

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

インストールが完了したら、:Cドライブの直下に、「xampp」というフォルダが作成され、
その中に「xampp-control.exe」というアプリケーションが作成されているのを確認します。

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

WEBページを表示させる

HTMLソースを配置

XAMPPでは、デフォルトで :C¥xampp¥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を起動する

xampp-control.exe」を起動すると、
XAMPPでインストールしたサーバーアプリケーションを起動するメニューが表示されます。

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

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

表示確認

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

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

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

PHPソースを配置

ドキュメントルート(C¥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!」と表示されれば成功です。

カスタマイズ

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

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

C¥xampp¥htdocs¥conf¥httpd.conf
をテキストエディタで開き、

DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"

とそのすぐ後ろにある、

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

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

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

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