m6uのエンジニアっぽい日記

PHP利用開発やFuelPHP利用開発、PostgreSQL利用開発、Androidアプリ開発、CentOS7サーバー構築など、テクニカルでエンジニアっぽい内容の日記

XAMPPおじさんが伝える、Windows10からはじめるPHPプログラミング生活:XAMPPをインストールしてWebサーバーにするよ(その2)

前回からの続き:XAMPP Control Panelから各種設定を調整していくよ

f:id:m6u:20200827203034p:plain
XAMPP Control Panelを管理者権限で実行する例

m6u.hatenablog.com
前回の記事に引き続いて、XAMPP Control Panel上から、Apache httpdやMySQLなどの設定を調整していきます。

サーバープログラムのLISTENポートを調整する

f:id:m6u:20200828225701p:plain
問題を検出しているXAMPP Control Panelの例

下半分のメッセージ表示箇所に、何やらエラーメッセージが出ているようですね。

f:id:m6u:20200828234006p:plain
ポート番号の重複を警告するメッセージの例

初期設定では、XAMPPに含まれるApache httpdというwebサーバープログラムは、HTTPポートとしてTCP 80番、HTTPSポートとしてTCP 443番を使うようになっています。
ポート番号(とプロトコルのペア)を単一のプログラムが専有してLISTENするようになっており、複数のプログラムが同時に使うことができない仕様となっています。(リッスン(リスニング)とは - IT用語辞典 e-Wordsなど参照。)
この赤いメッセージでは、443番のポートが他のプログラムに使用されているので対策してねっていう内容です。
このパソコンには、VMware WorkStation Proがインストールしてあって、443ポートを使っていて、これを他の番号に変更するのができない*1ようなので、XAMPP側で使用するポート番号を変更する必要があります。
TCPやUDPにおけるポート番号の一覧 - Wikipediaを見ながらポート番号を検討するのですが、今回443だけが引っかかっていますが、のちのわかりやすさを考慮して80と443をセットでずらすことにします。
ずらし方としては、わかりやすく10080と10443にしましょうか。1080はSOCKS proxy、8080も一般にプロキシーやキャッシングサーバー用ポートとして一般的、そんなわけで10080と10443です。

netstatボタンでLISTENされているポート番号を調べよう

XAMPP Control Panelの右側に並ぶボタンの中から、「Netstat」ボタンをクリックします。

f:id:m6u:20200829013015p:plain
netstatの表示例

Netstat画面を開くと、Address、Port、PID、Nameというカラムが並ぶ表示になります。
Address はLISTENしているアドレスで、これが「0.0.0.0」というのはこのPCに到達するあらゆるアドレスに対してLISTENする対象になっている、という意味になります。
Port はLISTENしているポート番号になります。
PID はプロセスIDもしくはプロセス番号というもので、このPC上で動作しているプログラムがプロセスという単位で管理されており、Windowsによって採番され動作中のプロセス一つ一つに番号が付けられています。起動し直すたびに違う番号になりうるものです。
Name はLISTENしているプロセス(プログラム)のファイル名称になります。
以上を踏まえて、443番ポートをLISTENしているのは、たしかにvmware-hostd.exeというプログラムであることがわかります。
そして、0.0.0.0のアドレスで10080番も10443番もLISTENしているプログラムが存在しないことも確認できます。

ポート番号を変更する、その前にXAMPP Control Panel自体の設定も見直そう

さて、Apache httpdのLISTEN用ポート番号を変えたいところですが、その前にここでXAMPP Control Panel自体の設定も確認しておきましょう。
XAMPP Control Panelの右上にあるボタン、「Config」ボタンをクリックします。

f:id:m6u:20200829023627p:plain
XAMPP Control PanelのConfig画面の例

Editor は、XAMPP Control Panelから各種設定ファイルやログファイルを開くときに利用するエディタープログラムを指定します。初期の、notepad.exe ではダメです。別途、プログラミングに適しているエディターソフトをインストールしましょう。

必ずプログラミングに適したエディターソフトをインストールしましょう

筆者の個人的なおすすめとして、万人受けしないかもしれませんが、EmEditorが好きです。さすがに無料で入手できるソフトではありませんが、パソコンのハードウェア性能を生かした高速動作と、サーバーやデータベースのログファイルやダンプファイルなどどでかいファイルもストレスなく閲覧・編集できて、ファイル拡張子に合わせた文法カラー表示や、CSV/TSVなどテキストファイル上でのデータ編集もできて、長らく愛用しています。速さと安定性がストレスレスで快適なのです。
とはいえ、無償で入手できるもので始めたい人もいるでしょうから、「【無料】プログラム向けエディターのソフト一覧 - 窓の杜」や「【無料】テキストエディターのソフト一覧 - 窓の杜」あたりで見繕って必ずインストールしましょう。Visual Studio Codeが最近人気ですよね。

Config画面の説明の続き

Editorの次ですね。
Browser は、XAMPP Control Panelから呼び出すwebブラウザーを指定します。
Microsoft Edge(Chromium版)を指定するなら、「C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe」などとなるでしょうか。
Google Chromeを一つのパソコンの中で複数のプロファイルを切り替えてつかっている人なら、「"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --profile-directory="Default"」みたいになるのかな、たぶん。
あともう一つ、Start Control Panel Minimizedのチェックボックスを有効にしておくと、Windows立ち上げ後にスタートメニューから呼ばずにタスクトレイからXAMPP Control Panelを呼べるようになります。

Services and Port Settings も重要ですね、XAMPP Control Panelが起動時にLISTEN用ポートをチェックするためのポート番号を指定します。

f:id:m6u:20200829032702p:plain
Apache httpd用監視ポート番号とサービス名の指定の例

Apacheタブにて、Apache httpd用のサービス名と、監視用ポート番号を指定します。XAMPP Control Panelが起動時にポート番号をチェックするのは、ここで指定した番号が根拠になっています。
ここのポート番号だけ変更しても、あくまでXAMPP Control Panelが監視するポート番号が変わるだけで、Apache httpdがLISTENするポート番号まで連動して変わるわけではないことに注意です。

他の設定については、今は触れません。

Apache httpdの設定ファイルをエディターで開いて、ポート番号を変更するよ

ポート番号を10080と10443に変更するという方針でしたね。
先程の監視用ポート番号の数字を、10080と10443に変更して、

f:id:m6u:20200829035008p:plain
Apache httpdの監視ポート番号を10080と10443に変更する

Main Portを10080、SSL Portを10443にして、Saveボタンで保持します。

f:id:m6u:20200829035416p:plain
Configuration画面、EditorとBrowserなどを変更

Config画面もSaveボタンをクリックして保持じます。
これでXAMPP Control Panel本体の画面に戻ってきたはずです。

f:id:m6u:20200829035853p:plain
httpd.confの編集画面を呼び出す方法

Apache の行にある「Config」ボタンをクリックするとメニューが表示されるので、まずは「httpd.conf」を指定して編集画面を開きます。

f:id:m6u:20200829040334p:plain
httpd.confファイルを開いた直後の例

ちゃんとメモ帳ではない、指定のテキストエディターソフトで httpd.conf を開けたでしょうか。

f:id:m6u:20200829040614p:plain
Listenという言葉で検索をかける例

LISTEN用ポート番号を変更したいので、「Listen」という単語で検索をかけましょう。

f:id:m6u:20200829040748p:plain
Listen用ポート番号の定義箇所の例

すぐ見つかりますので、80でなく10080に変更します。

f:id:m6u:20200829041058p:plain
Listenを80→10080に直す例

行単位でコピーして、直前の設定値の行をコメントアウトして残し、新しい設定値10080を記入します。
これで保存します。

f:id:m6u:20200829133038p:plain
httpd-ssl.confの編集画面を呼び出す方法

今度は、「httpd-ssl.conf」を指定して編集画面を開きます。
同じ手順で、「Listen」で検索します。

f:id:m6u:20200829041603p:plain
httpd-ssl.confでの、Listen用ポート番号の指定例

ここも同様に、443→10443に変更します。

f:id:m6u:20200829041752p:plain
Listenを443→10443に直す例

これも保存します。

ようやくApache httpdを起動できる条件が揃った

XAMPP Control Panelに戻って、Apache httpdを「Start」ボタンをクリックして起動してみましょう。

f:id:m6u:20200829042145p:plain
Apache httpdが起動できた様子
f:id:m6u:20200829042300p:plain
XAMPP Control Panel内のログでも、赤いメッセージを表示せずに動作中

こんな感じで動作していれば、おめでとうございます、ポート番号の変更は無事に終わりました。
念の為に、webブラウザから「http://localhost:10080/」のアドレスにアクセスしてみます。

f:id:m6u:20200829132543p:plain
XAMPPのApache httpdの初期画面

自動的に「http://localhost:10080/dashboard/」にリダイレクトされて、Apache httpdが動作できていることがわかります。

*1:VMwareでは共有VMの通信用に使うらしい。この機能を利用しない場合には止めることも可能。