【XAMPP】ApacheでローカルWEBサイトを作る【使い方講座③】

みやしも ローカル開発環境

今回はXAMPPに含まれている『Apache(アパッチ)』というツールを使用した、ローカルWEBサイトの作り方について解説してゆきます。

この記事では、ローカルWEBサイトの作成に必要なフォルダ・ファイルを用意する方法や、ドキュメントルートをApacheに設定する方法などを学ぶことができます。

▼この記事を書いたひと

フリーランスのみやしも(@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



このうえで、それぞれの関係を図に表すと次のようになります。

ローカル環境でApacheを利用するイメージ.jpg
ローカルWEBサイトの全体像

ローカルWEBサイトには『localhost』という、自分のPCで使えるドメインの様なものを利用してWEBブラウザでアクセスできます。

フォルダ・ファイルを自分のPCに公開するために『Apache』を使用する。ローカルWEBサイトには『localhost』というドメインの代わりになるものを使ってアクセスする。
それぞれの役割・関係をイメージしながら作業をすすめると理解が早まりますよ!

WEBサイトを構築するための3ステップ

ローカル開発環境にWEBサイトを構築するために、今回は次の3つのステップで作業を行います。



WEBサイトを構築するための3ステップ

  1. 公開フォルダとHTMLの準備
  2. Apacheの設定・起動
  3. ブラウザでWEBサイトにアクセスする
順番に作業をすすめてゆきましょう!

STEP1. 公開フォルダとHTMLの準備

まずはApacheで公開するための『公開フォルダ』と、実際にWEBブラウザに表示させるための『HTMLファイル』を用意します。

 公開フォルダを作成する

『公開フォルダ』とは、ドメインを通してインターネット上に公開されるフォルダのことを言います。

Apacheでは『ドキュメントルート』という言葉でも表現されます。

今回はローカルWEBサイトを作成するので、自分のPCにフォルダを作成します。次の様にフォルダを作成してみましょう。

▼公開フォルダ
C:\xampp\webroot
XAMPPでApacheを使いこなそう_ドキュメントルート用フォルダを作成する.jpg

このフォルダは後ほどのApacheの作業でも必要になりますので、パスを控えておく様にしましょう。

日本語を含むパスはエラー等の原因になるため、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ファイルを、公開フォルダに配置しましょう。

XAMPPでApacheを使いこなそう_HTMLファイルを設置する.jpg
HTMLファイルを公開フォルダに設置した状態

以上で『公開フォルダ』と『HTMLファイル』の準備は終わりです。

STEP2. Apacheの設定・起動

今度はApacheの設定を行いましょう。

Apacheの設定ファイル(httpd.conf)を開く

XAMPPコントロールパネルを開き『Config->Apache(httpd.conf)』を選択してApacheの設定ファイルを開きましょう。

Apacheの設定ファイルを開く方法.jpg

XAMPPコントロールパネルの使い方が分からない方は、次の記事が参考になります。

Apacheの設定ファイルを修正する

Apacheの修正ファイル(httpd.conf)を開いたら、以下の内容を修正しましょう。



▼設定ファイルで修正する内容

  • 【行252】『DocumentRoot』のパスの内容を公開フォルダのパスに修正する
  • 【行253】『Directory』のパスの内容を公開フォルダのパスに修正する
XAMPPでApacheを使いこなそう_Apacheの設定内容.jpg
Apacheの設定ファイルで修正する内容
修正作業が終わったらApacheの設定ファイルを保存しましょう。

Apacheの再起動をする

設定ファイルの修正が終わったら、忘れずにApacheの再起動をかけておきます。

再起動を行わないと修正した設定ファイルの内容が反映されないので注意しましょう。

Apacheの再起動は、XAMPPのコントロールパネルで『Stop(停止)』→『Start(開始)』の順番に操作すればOKです。

XAMPPの使い方_再起動の方法.jpg
Apacheを再起動する方法

設定ファイルを修正し、再起動ができればApacheの準備は完了です。

以上でローカルWEBサイト構築の作業はおわりです。

STEP3.ローカルWEBサイトにアクセスする

それでは最後に、Apacheで構築したローカルWEBサイトにアクセスしてみましょう。

ブラウザでWEBサイトのURLを開く

ローカルWEBサイトにアクセスするには、記事のはじめの方にも登場した『localhost』というドメインの代わりとなるものを利用すればアクセスが出来ます。

▼ローカル開発環境のURL
http://localhost:80/
※コピペしてブラウザのアドレスバーに貼り付けましょう

Apacheの設定が上手く出来ていれば、次の様なWEBページが表示できます。

XAMPPでApacheを使いこなそう_WEBブラウザで見てみる.jpg
上記の様に作成したHTMLが表示できれば、これまでの作業は成功となります。

以上でApacheを使用したローカルWEBサイトの作成は終わりです。

ここまでの作業、お疲れ様でした!

XAMPPの使い方講座

XAMPPの使い方講座
XAMPPの使い方講座

この記事を含む『XAMPP使い方講座』は全3回あります。

使い方講座①:インストール方法を解説する

第一弾では、XAMPPのインストール方法やコントロールパネルを利用した各ツールの起動・終了方法について学ぶことができます。

使い方講座②:Apache・MySQLの使い方

第二弾では、XAMPPにおけるApache・MySQLの設定の変え方など、ツールごとの具体的な使用方法を学ぶことが出来ます。

使い方講座③:ローカルWEBサイトの作り方

第三弾では、Apacheを使用した『ローカルWEBサイト』の作り方について学ぶことができます。

ローカル開発環境の使用方法を学習して、プログラミングをスムーズかつ効率的に進めてゆきましょう!

その他のXAMPP関連情報

XAMPP
XAMPP(ザンプ)の関連情報

この他にもXAMPPには、さまざまな機能や利用方法があります。

ここからは『XAMPP使い方講座』以外の関連情報について紹介してゆきます。

複数のローカルサイトを作る方法

Apacheの設定ファイルをカスタマイズして、XAMPP上に複数のサイトを作る方法について解説してゆきます。サイト制作者は必見の内容となります。

メール送信を出来る様にする方法

Wordpressやプログラミング開発で何かと発生するメール送信の処理。この記事ではXAMPPで作成したローカル開発環境からメール送信できる様にする方法について解説してゆきます。

PHPをバージョン7.4で利用する方法

以前まではPHP5.6でしか利用ができなかったXAMPPですが、新たにリリースされたXAMPPでは、PHP7.4が利用可能となりました。

いずれも画像付きでくわしく解説していますので、XAMPPユーザーはブックマーク推奨の内容です。

この記事のまとめ

この記事では、XAMPPに含まれているApacheを使用した、『ローカルWEBサイト』の作り方について解説を行いました。



今回の作業に登場した知識はいずれも、ローカル開発環境を使いこなす上ではかかせないものとなります。



このうえで、これらツールの扱い方が習得できれば、PHPを使用したWEBサイト制作やプログラムの開発作業もスムーズに進められることが可能となります。

プログラミングを学習中の方は、ぜひトライしてみてくださいね!

関連記事

最新記事