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の通信用に使うらしい。この機能を利用しない場合には止めることも可能。

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

手っ取り早くXAMPPを使ってWebサーバーを立ち上げたくなったよね

前置きが長くなりすぎましたので、実際にXAMPPをダウンロードして、インストールして、Webサーバーとして立ち上げるところを説明していきます。

XAMPPのどのバージョンを選ぶか

www.apachefriends.org

f:id:m6u:20200827111011p:plain
2020/08/27時点のトップページの一部

Windows向けに7.4.9というバージョンがありますが、ちょっと待って下さい
teratailでPHP 7.4系のトラブルを何件か目撃しているので、PHPのバージョンにとくにこだわりがなければ、恐れ入りますが7.3系を選びましょう。
緑色の「ダウンロード」ボタンに、「その他のバージョンについては~」と書いてあるので、クリックします。

f:id:m6u:20200827113107p:plain
2020/08/27時点のWindows向けダウンロードページの一部

現時点での7.3系の最新版である、7.3.21を選択してダウンロードします。

ダウンロードしたXAMPPインストーラーを実行するよ

xampp-windows-x64-7.3.21-0-VC15-installer.exe というのがダウンロードしたXAMPPインストーラーのファイル名です。
「Xampp Win X64」という名前で、コンピュータに変更が加わりますなどと確認画面が表示されます。

f:id:m6u:20200827155805p:plain
ウイルス対策ソフトを検出した時の警告画面

ウイルス対策ソフトを検出した時の警告画面が表示されることがあります。

f:id:m6u:20200827155944p:plain
ユーザーアクセス制御(UAC)に関する警告画面

Windows固有の、ユーザーアクセス制御(UAC)に関する警告画面が表示されます。

f:id:m6u:20200827172943p:plain
インストーラーの最初の画面

最初の画面からは基本的に「Next」を押すだけで進められます。

f:id:m6u:20200827175211p:plain
インストールするパッケージの選択

インストールするパッケージの選択ですが、特にこだわりがなければこのまま一通り選択肢たままにしておきます。

f:id:m6u:20200827175528p:plain
インストール先フォルダの選択

インストール先のフォルダの入力画面ですが、特にこだわりがなければこのまま「C:\xampp」にしておきます。
(おすすめは、インストールしたXAMPPのバージョンをフォルダ名に織り込むのもよいかと。C:\xampp7321とか。)

f:id:m6u:20200827184853p:plain
言語の設定画面、Englishのままで

言語の選択画面ですが、英語であるEnglishのままでいいです。

f:id:m6u:20200827185021p:plain
Bitnami for XAMPPの紹介画面

Bitnami for XAMPPの紹介画面です。Bitnamiというのはオープンソース系のwebアプリケーション(WordPressやMedia Wiki,Redmine,Moodle,Tracなど)を用意に構築できるように設定周りを工夫してあるものを用意しているサービスです。XAMPPに例えばWordPressを組もうとしたなら、Bitnami版を使うと楽かもしれません。

f:id:m6u:20200827193221p:plain
インストール作業開始前の最終確認

ここまで来たら、あとはファイルを展開してWindows上に設定されていくのを見守るばかりです。

f:id:m6u:20200827193857p:plain
ファイル展開中の画面

4パターンくらいの画面が繰り返し表示されながら、インストール作業が続きます。

f:id:m6u:20200827193954p:plain
インストール完了時の画面

ここまでくれば、XAMPPに含まれるソフトウェア群がWindowsに設定されたことになります。
でも、待ってください。現時点では、単にファイルがWindows上に展開されて最低限のつじつま合わせがされただけで、このまますんなりXAMPPが動作するわけではありません。
まだ設定の見直し作業が待っています。

XAMPP Contro; Panelとユーザーアクセス制御(UAC)の注意点

XAMPPをインストール直後に、その流れでXAMPP Control Panelが起動しますが、終了する際にほぼ確実にこんなエラー画面になります。

f:id:m6u:20200827195319p:plain
Access Violationの発生例

これがなぜ発生するかというと、XAMPP Control Panel自身の設定保存用に「xampp-control.ini」というファイルを「C:\xampp」フォルダに保存しようとして、ユーザーアクセス制御(UAC)によって遮断されてしまうために発生します。
インストール前に警告メッセージを表示していたことの一端が、これです。
回避方法ですが、ひとまずこのエラーメッセージ画面は別途「タスク マネージャー」を立ち上げて、応答なしになっているXAMPP Control Panelに対して「タスクの終了」をします。
改めてスタートメニューからXAMPP Control Panelを起動するのですが、ただアイコンをクリックするのではなく、必ず右クリックして、「その他」→「ファイルの場所を開く」とします。

f:id:m6u:20200827200946p:plain
XAMPP Control Panelのファイルの場所の表示例

ここに表示される「XAMPP Control Panel」でも右クリックして、「プロパティ(R)」をクリックします。

f:id:m6u:20200827201449p:plain
プロパティ画面、互換性タブで、管理者としてこのプログラムを実行するようにチェックを入れる

プロパティ画面で、互換性タブに切り替えて、「管理者としてこのプログラムを実行する」というチェックボックスに印をつけてOKボタンで閉じます。
コレによって、XAMPP Control Panelが常に管理者権限にて実行されるようになり、XAMPP Control Panelがしっかり動作できるようになります。

f:id:m6u:20200827202447p:plain
管理者権限で実行しようとする、XAMPP Control Panelの警告画面

スタートメニューでXAMPP Control Panelのアイコンをクリックすると、一旦このような警告画面が表示されますが、気にせず許可します。

f:id:m6u:20200827203034p:plain
XAMPP Control Panelの動作例

主なプログラム4つの左側の「□」に赤いバツがついている表示になります。
XAMPP Control Panel上から4つのプログラムをWindowsのサービス機能に追加したり削除したりできる機能も利用できるようになったことを示します。

長くなるので、次は別の記事に

とくに意識しなければ、ここまではすんなり来るのですが、改めて手順をまとめてみると結構あれこれありますね。
ボリュームが多くなったので、続きは別の記事に分けます。