【XAMPP】ApacheでローカルWEBサイトを作る【使い方講座③】
今回はXAMPPに含まれている『Apache（アパッチ）』というツールを使用した、ローカルWEBサイトの作り方について解説してゆきます。
▼この記事を書いたひと
フリーランスのみやしも（@miyashimo_eng）です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。
Apacheを使ってWEBサイトを作ってみよう
今回は、XAMPPに含まれている『Apache（アパッチ）』というツールを使用した『ローカルWEBサイト』の作り方を解説してゆきます。
Apacheはファイルをインターネット上に公開するための『WEBサーバー』として機能するソフトですが、XAMPPでは疑似的に自分のPCにのみファイルを公開すると いった目的のために使用してゆきます。
XAMPPの使い方を知りたい方へ
今回の内容で使用する『XAMPP』について知りたい方、使い方を学びたい方には次の記事が参考になります。
単体で利用する方法・初歩的な使い方を学ぶ
XAMPPを単体でインストールして利用する方法や、初歩的なコントロールパネルの使用方法について学びたい方はこちらの記事が参考になります。
ApacheやMySQLの使い方を学ぶ
すこし進んでApacheやMySQLの使い方を学びたい方はこちらの記事が参考になります。
ローカルWEBサイトの全体像
Apacheを使ってローカルWEBサイトを作るために、まずは作業の全体像から把握してゆきましょう。
必要なもの・構成について
ローカルWEBサイトを作るには、次のものが必要になります。
▼ローカルWEBサイトの作成に必要なもの
- 【サイトの内容】フォルダ・ファイル（HTML）
- 【WEBサーバー】Apache
このうえで、それぞれの関係を図に表すと次のようになります。
ローカルWEBサイトには『localhost』という、自分のPCで使えるドメインの様なものを利用してWEBブラウザでアクセスできます。
WEBサイトを構築するための３ステップ
ローカル開発環境にWEBサイトを構築するために、今回は次の３つのステップで作業を行います。
▼WEBサイトを構築するための３ステップ
- 公開フォルダとHTMLの準備
- Apacheの設定・起動
- ブラウザでWEBサイトにアクセスする
STEP1. 公開フォルダとHTMLの準備
まずはApacheで公開するための『公開フォルダ』と、実際にWEBブラウザに表示させるための『HTMLファイル』を用意します。
公開フォルダを作成する
『公開フォルダ』とは、ドメインを通してインターネット上に公開されるフォルダのことを言います。
今回はローカルWEBサイトを作成するので、自分のPCにフォルダを作成します。次の様にフォルダを作成してみましょう。
このフォルダは後ほどのApacheの作業でも必要になりますので、パスを控えておく様にしましょう。
HTMLファイルの設置
公開フォルダを作成したら、そのフォルダ中にHTMLファイルを設置しましょう。
今回はApacheの動作確認のため、確認用のHTMLを用意しました。
▼確認用のHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>こんにちは</title>
</head>
<body>
<p>こんにちは</p>
</body>
</html>▼確認用HTMLの使い方
上記の内容をテキストファイルなどに貼り付けて、ファイルに保存しましょう。またこの際は『index.html』名前で保存します。
このうえで作成したHTMLファイルを、公開フォルダに配置しましょう。
以上で『公開フォルダ』と『HTMLファイル』の準備は終わりです。
STEP2. Apacheの設定・起動
今度はApacheの設定を行いましょう。
Apacheの設定ファイル(httpd.conf)を開く
XAMPPコントロールパネルを開き『Config->Apache(httpd.conf)』を選択してApacheの設定ファイルを開きましょう。
XAMPPコントロールパネルの使い方が分からない方は、次の記事が参考になります。
Apacheの設定ファイルを修正する
Apacheの修正ファイル(httpd.conf)を開いたら、以下の内容を修正しましょう。
▼設定ファイルで修正する内容
- 【行252】『DocumentRoot』のパスの内容を公開フォルダのパスに修正する
- 【行253】『Directory』のパスの内容を公開フォルダのパスに修正する
Apacheの再起動をする
設定ファイルの修正が終わったら、忘れずにApacheの再起動をかけておきます。
Apacheの再起動は、XAMPPのコントロールパネルで『Stop(停止)』→『Start(開始)』の順番に操作すればOKです。
設定ファイルを修正し、再起動ができればApacheの準備は完了です。
STEP3.ローカルWEBサイトにアクセスする
それでは最後に、Apacheで構築したローカルWEBサイトにアクセスしてみましょう。
ブラウザでWEBサイトのURLを開く
ローカルWEBサイトにアクセスするには、記事のはじめの方にも登場した『localhost』というドメインの代わりとなるものを利用すればアクセスが出来ます。
Apacheの設定が上手く出来ていれば、次の様なWEBページが表示できます。
以上でApacheを使用したローカルWEBサイトの作成は終わりです。
XAMPPの使い方講座
この記事を含む『XAMPP使い方講座』は全３回あります。
使い方講座①：インストール方法を解説する
第一弾では、XAMPPのインストール方法やコントロールパネルを利用した各ツールの起動・終了方法について学ぶことができます。
使い方講座②：Apache・MySQLの使い方
第二弾では、XAMPPにおけるApache・MySQLの設定の変え方など、ツールごとの具体的な使用方法を学ぶことが出来ます。
使い方講座③：ローカルWEBサイトの作り方
第三弾では、Apacheを使用した『ローカルWEBサイト』の作り方について学ぶことができます。
その他のXAMPP関連情報
この他にもXAMPPには、さまざまな機能や利用方法があります。
複数のローカルサイトを作る方法
Apacheの設定ファイルをカスタマイズして、XAMPP上に複数のサイトを作る方法について解説してゆきます。サイト制作者は必見の内容となります。
メール送信を出来る様にする方法
Wordpressやプログラミング開発で何かと発生するメール送信の処理。この記事ではXAMPPで作成したローカル開発環境からメール送信できる様にする方法について解説してゆきます。
PHPをバージョン7.4で利用する方法
以前まではPHP5.6でしか利用ができなかったXAMPPですが、新たにリリースされたXAMPPでは、PHP7.4が利用可能となりました。
この記事のまとめ
この記事では、XAMPPに含まれているApacheを使用した、『ローカルWEBサイト』の作り方について解説を行いました。
今回の作業に登場した知識はいずれも、ローカル開発環境を使いこなす上ではかかせないものとなります。
このうえで、これらツールの扱い方が習得できれば、PHPを使用したWEBサイト制作やプログラムの開発作業もスムーズに進められることが可能となります。
