ローカルWebサーバーの構築(XAMPP編)

投稿日:  更新日:

開発マシンへローカルWebサーバー(Apache)を構築します。

これにより、Webサーバーと通信するアプリのテストが容易になります。

外部にWebサーバーを調達する必要がなく、机上のパソコン(開発マシン)内でテスト環境が完結します。

Webサーバーの構築にXAMPPを使いました。

XAMPPは、ファストフードならぬ、ファストツールです。インストールして直ぐに使える点が、いいですね!

※環境:XAMPP 8.2.12
     XAMPP Control Panel Version 3.3.0.
     Apache 2.4.58
     OpenSSL 1.1.1p
    Chrome バージョン 142.0.7444.163

スポンサーリンク

XAMPPとは

XAMPP」は一言でいえば「Apache(オープンソースのWebサーバー)ディストリビューション」です。

XAMPPのWebページ

Webサーバーの構築に必要な一通りのツールがパッケージされています。

【XAMPPに含まれるツール】
 ・Apache          ... Webサーバー
 ・MySQL(MariaDB)  ... RDBS(リレーショナルデータベースシステム)
 ・FileZilla       ... FTPクライアント
 ・Mercury         ... Mailサーバー
 ・Tomcat          ... Servlet/JSP コンテナ(サーバーサイドのJava実行環境)
 ※上記に付随するコンポーネント
 ・PHP 
 ・phpMyAdmin
 ・OpenSSL
 ・curl

Webサーバーを構築したければXAMPPのインストールだけで済みます。個別にツールをインストールする必要はありません。

ただし、恒久的なWebサーバーの構築に、XAMPPはお勧めしません。理由は、XAMPPに含まれるツールのバージョンアップが難しいからです。

XAMPP用にツールの動作環境がカスタマイズされていて、理解せずに行うと構築したWebサーバーを壊しかねません。

ですので、アプリ開発のテストなど、一時利用に限定した方が良いです。
※私見ですので、この限りではありません!

スポンサーリンク

XAMPPインストール

Windowsへインストールするのであれば、インストーラー形式が簡単です。

ダウンロード&インストール

インストーラ(xampp-*-installer.exe)をダウンロードして実行します。

XAMPPのダウンロード

幾つか質問パネルが表示されます。質問に答えていきます。

今回は「X:\XAMPP」へインストールしました。

XAMPPのインストール先の指定

以下のように表示されれば、インストールは完了です。

XAMPPを起動する前に「管理者権限で実行」の設定を行うので、「Do you want to start …」のチェックを外して下さい。

XAMPPインストールの完了

スポンサーリンク

「管理者権限で実行」の設定

XAMPPは管理者権限で実行します。そのための設定です。

「xampp-control.exe(XAMPPコントロールパネル)」を右クリックして、プロパティを開きます。

プロパティを開く

「管理者としてこのプログラムを実行する」にチェックをいれれば、適用されます。

管理者権限で実行をチェック

以降、「xampp-control.exe」は管理者権限で実行されます。

スポンサーリンク

Webサーバーの起動

「xampp-control.exe」をダブルクリックして、コントロールパネルを起動します。

コントロールパネルは、XAMPPのツール群を一括管理するアプリです。

ここで、Apacheの起動と停止をボタン操作で行えます。起動はApache行の「Start」ボタンを押してください。

Webサーバーの起動

ボタンが「Stop」に変われば、Apacheがデフォルト設定で起動しています。

スポンサーリンク

httpでWebサーバーへ接続

WindowsのブラウザーChromeを起動して、「http://localhost」でローカルWebサーバーへ接続します。

Httpでサーバーへ接続

表示されたWebページは、XAMPP用に準備されたデフォルトのページです。

httpd.confの設定により「X:/XAMPP/htdocs」に置かれた記述(*.html)が表示されます。

Listen 80                       ... 80番ポートを開く

ServerName localhost:80         ... リクエストに応答したサーバ名
DocumentRoot "X:/XAMPP/htdocs"  ... Webページが置かれているフォルダ

<Directory "X:/XAMPP/htdocs">   ... フォルダに対する属性の設定
    ...
</Directory>

Include conf/extra/httpd-ssl.conf  ... httpd-ssl.confの読み込み
スポンサーリンク

httpsでWebサーバーへ接続

WindowsのブラウザーChromeを起動して、「https://localhost」でローカルWebサーバーへ接続します。

Httpsでサーバーへ接続(エラー:無効な証明書)

エラー(ERR_CERT_AUTHORITY_INVALID)になります。SSLによる接続が確立できないため、Webパージは表示されません。

Listen 443						 ... 443番ポートを開く

<VirtualHost _default_:443>
DocumentRoot "X:/XAMPP/htdocs"   ... Webページが置かれているフォルダ
ServerName www.example.com:443	 ... リクエストに応答したサーバ名
SSLEngine on									  ... SSL有効
SSLCertificateFile "conf/ssl.crt/server.crt"	  ... 証明書(公開鍵を含む)
SSLCertificateKeyFile "conf/ssl.key/server.key"	  ... 秘密鍵
</VirtualHost>
スポンサーリンク

接続が確立できない理由

接続が確立できない理由は、証明書が「自己署名証明書」だからです。
※自己署名証明書:自身の公開鍵を自身の秘密鍵で署名した証明書

ブラウザーChromeがローカルWebサーバーを「信頼性のないサーバである」で判断しています。

証明書は次の操作で確認できます。

証明書の確認(1)

よく見ると、発行元がlocalhost(自己署名)であると共に、有効期限切れになっています。

証明書の確認(2)

スポンサーリンク

関連記事:

WindowsもLinux(Unix)と同じように「/etc/hostsファイル」を持っています。 役割も同じで「ホスト名とIPアドレスの変換テーブル」です。ホスト名からIPアドレスへ変換する際に、DNSに先立って参照されます。 ですので、hostsファイルにホスト名とIPアドレスの対を登録すれば、任意のホスト名でネットアクセスが可能になります。 ただし、Windowsの一般ユーザ向けの機能というよりも、ヘビーユーザー向けの隠し機能のような存在です。 このような機能はトラブルの火種に成りかねないので、一時的な利用に止め、不要になったら設定を削除することをお勧めします。 ※環境:Windows 11 Pro Version 25H2 ...
2000年の初め頃、https(HTTPのSSLによる暗号化通信)は、Webサイトの一部のページやECサイトなど、機密情報を扱う部分のみで使われていました。 「ネット決済をするときは、URL横の鍵マークを確認しましょう!」と、注意喚起されていたのを覚えています。 現在は、機密情報を扱う・扱わないに関係なく、ほとんどのWebサイトがhttpsを採用しています。安全なサイトであることを証明するためです。 日本(2025年)におけるWebサイトのhttps使用率は95%に達しているそうです。ですから、httpsは必須と言えます。 ローカルWebサーバーのhttps化は不要ですが、アプリ開発環境であれば、実環境(一般ユーザにアプリを使ってもらう環境)に合わせて導入した方が良いでしょう! ※環境:XAMPP 8.2.12      XAMPP Control Panel Version 3.3.0.      Apache 2.4.58      OpenSSL 1.1.1p     Chrome バージョン 142.0.7444.163 (Windows版) ...
通常、Chromeは自己署名証明書を「信頼できない証明書」と判断します。その結果、httpsによる接続は拒否されます。 しかし、自己署名証明書を「信頼できる証明書」として、Chromeへ意図的に取り込むことで、httpsによる接続が可能になります。 ただし、自己署名証明書が信頼できない点は変わりません。 ですので、パブリックなWebサーバーで、この方法を用いる事は危険です。プライベートなローカルWebサーバーのみで用いるようにして下さい。 ※環境:XAMPP 8.2.12      XAMPP Control Panel Version 3.3.0.      Apache 2.4.58      OpenSSL 1.1.1p     Chrome バージョン 142.0.7444.163 (Windows版) ...
スポンサーリンク