XAMPPはApache,MariaDB,PHP,Perl+αのWeb開発環境一式を収めたディストリビューションです。
XAMPPで必ず行う設定
Ⅰ.バーチャルホストの設定
バーチャルホストで複数のドメイン開発を可能にします。
これにより相対パスが使える事が重要です。
以下、「7design」というバーチャルホストの設定例です。
1.Apacheの設定でバーチャルホスト機能を有効にする
設定ファイル:「C:¥xampp¥apache¥conf¥httpd.conf」
「#Include conf/extra/httpd-vhosts.conf」の行の「#」を削除。
2.バーチャルホスト設定
設定ファイル;「C:¥xampp¥apache¥conf¥extra¥httpd-vhosts.conf」
20行目あたりの「##NameVirtualHost」部分の「##」を削除。
以下の行を追記
「C:\xampp\htdocs\7design.jp\hp」の部分がホームページのドキュメントルートになるディレクトリです。
<VirtualHost *:80>
DocumentRoot "C:\xampp\htdocs\7design.jp\hp"
ServerName 7design
</VirtualHost>
3.hostsの設定
設定ファイル:「C:\Windows\System32\drivers\etc\hosts」
最終行に以下の記述を追加。
127.0.0.1 7design
※Windows 7の例です。これはWindowsバージョによりhostsの場所が異なります。
※不正誘導防止対策で、編集するソフトを管理者権限で実行しないと書き込めません。
Ⅱ.SSIの設定
1.httpd.confの設定
SSIでIncludeが利用出来るようにします。
設定ファイル:「C:¥xampp¥apache¥conf¥httpd.conf」の
以下の行を
下記の様に書き換える
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
AddType text/html .shtml .html
AddOutputFilter INCLUDES .shtml .html
2.PHPの設定
設定ファイル:「C:\xampp\php\php.ini」
「;extension=php_openssl.dll」の行の先頭の「;」を削除。
3.SSLの設定
設定ファイル:「C:\xampp\apache\conf\extra\httpd-ssl.conf」
以下の記述を追記
※SSLを使って自己署名証明書ですのでブラウザが出す警告は無視して開く。
<VirtualHost *:443>
ServerName 7design
DocumentRoot "C:/xampp/htdocs/7design.jp/hp"
SSLEngine on
SSLCertificateFile "conf/ssl.crt/server.crt"
SSLCertificateKeyFile "conf/ssl.key/server.key"
</VirtualHost>
※マルチドメインSSLについては「OpenSSLを使って自己署名証明書を作成(XAMPPでマルチドメインSSL化)」がお勧めの文献です。
Ⅲ.ローカルIPアドレス上のスマホからアクセス
レスポンシブ記述の動作確認を公開サーバーに上げる前に確認する為に必要です。
前提条件はⅠのバーチャルホストの設定が既に済んでいることが前提です。
仕組みはXAMPPが稼働しているパソコンでPproxyサーバーを立ち上げて、スマホはこのProxy経由でウェブにアクセスする様にします。これでXAMPPのバーチャルドメインにアクセスできます。
1.XAMPPが稼働しているパソコンにProxyサーバーと導入
Charlesという、開発者用のProxyを利用します。
Charlesの公式サイトからダウンロードして導入しておきます。
2.AdnroidスマホのProxy設定
自分が利用しているAndroid 11はWiFiのパスワード設定に中に、プロキシーの設定がありました。
Androidのバージョンによって設定する箇所が違うのでややこしい。
3.iPhoneのProxy設定
iPhoneは接続しているWifi設定でiマークをタップするとプロキシー設定があります。
Web Server for Chrome (おまけ)
Google Chromeのブラウザ拡張機能として稼働するローカル ウェブ サーバーです。
簡易なウェブページなら十分に使えます。
注意点
・この拡張機能はChromeを閉じても動き続けます。
・この拡張機能を停止してからブラウザを閉じる手間がかかります。
・必要なときだけ、この拡張機能を有効にする利用をお勧めいたします。