XAMPPの使いこなし彼是

 
Web Tips.
Booskanium's
Booskanium's Web Tips.

XAMPPはApache,MariaDB,PHP,Perl+αのWeb開発環境一式を収めたディストリビューションです。
Windowsでの事例です。

Ⅰ.バーチャルホストの設定

バーチャルホストで複数のドメイン開発を可能にします。
これにより相対パスが使える事が重要です。
以下、「7design」「7design」というバーチャルホストの設定例です。

1.Apacheの設定でバーチャルホスト機能を有効にする

設定ファイル:「C:¥xampp¥apche¥conf¥httpd.conf」
「#Include conf/extra/httpd-vhosts.conf」の行の「#」を削除。
ディレクトリへのパスは導入場所により異なります。

2.バーチャルホスト設定

設定ファイル;「C:\xampp\apache\conf\extra¥httpd-vhosts.conf」
ディレクトリへのパスは導入場所により異なります。
20行目あたりの「##NameVirtualHost」部分の「##」を削除。
以下の行を追記

<VirtualHost *:80>
	DocumentRoot "C:\xampp\htdocs\7design.jp\hp"
	ServerName 7design
</VirtualHost>
<VirtualHost *:80>
    DocumentRoot "C:\xampp\htdocs\777design.jp\hp"
    ServerName 777design
</VirtualHost>
					
「C:\xampp\htdocs\7design.jp\hp」の部分がホームページのドキュメントルートになるディレクトリです。

3.hostsの設定

設定ファイル:「C:\Windows\System32\drivers\etc\hosts」
最終行に以下の記述を追加。

127.0.0.1 7design
127.0.0.1 777design

※Windows 7の例です。これはWindowsバージョンによりhostsの場所が異なります。
※不正乗っ取り防止対策で、編集するソフトは管理者権限で実行しないと書き込めません。

4.イントラネットの他のデバイスからアクセス

必要に応じて組織内の他のデバイスから、XAMPPが動いているパソコンへアクセスしたい場合の設定を行う。

Microsoft loopback adapterの設定

仮想ループバックアダプタを追加して、IPアドレスに固定プライベートアドレス「192.168.1.xxx」を設定する。
または実LANアダプタのIPアドレスに上記のIPアドレスを追加するのでもOKです。落書き人のノートPCは有線アダプタと無線アダプタを切り替えて利用すしますので、仮想ループバックアダプタを利用しています。

XAMPPのhttpd.confの設定

「ServerName localhost:80」
  ↓
「ServerName 192.168.1.xxx:80」

hostsの設定

当該XAMPP環境にアクセスするパソコンのhostsを設定する。
設定ファイル:「C:\Windows\System32\drivers\etc\hosts」に下記の記述を追加。

192.168.1.xxx 7design

※Windows 7の例です。これはWindowsバージョにより異なります。
 Linuxなら「/etc/hosts」の内容を書き換えます。
 MACなら/private/etc/hostsの内容を書き換えます。

イントラ内のスマホからのアクセスはⅡ.を参照

Ⅱ.ローカルIPアドレス上でスマホにてアクセス

レスポンシブ記述の動作確認を公開サーバーに上げる前に確認する為に必要です。
前提条件はⅠのバーチャルホストの設定が既に済んでいることが前提です。
仕組みはXAMPPが稼働しているパソコンでPproxyサーバーを立ち上げて、スマホはこのProxy経由でウェブにアクセスする様にします。これでXAMPPのバーチャルドメインにアクセスできます。

1.XAMPPが稼働しているパソコンにProxyサーバーと導入

Charlesという、開発者用のProxyを利用します。 Charlesの公式サイトからダウンロードして導入しておきます。

2.AdnroidスマホのProxy設定

自分が利用しているAndroid 11はWiFiのパスワード設定に中に、プロキシーの設定がありました。
Androidのバージョンによって設定する箇所が違うのでややこしい。

3.iPhoneのProxy設定

iPhoneは接続しているWifi設定でiマークをタップするとプロキシー設定があります。

Ⅲ.SSL(TLS)の設定

SSLを利用出来るようにします。混在コンテンツをチェックする為にもTLS設定が必須です。
設定方法の流れを理解するにはSSLの概要を理解しておく必要があります。

TLSの再確認
SSL証明書と暗号化通信の要
Transport Layer Security

TLSの要点
・暗号化通信の鍵は「公開鍵暗号方式」と「共通鍵暗号方式」がある
・公開鍵暗号方式は公開鍵(クライアント側)と秘密鍵(サーバー側)のペア
・公開鍵暗号方式でSSLサーバー証明書の確認が行われて接続が確立
・接続後は共通鍵暗号方式で暗号化通信が行われる

Thx. 参考にしたXAMPP for WindowsでSSLを有効にする

1.httpd.confの設定

設定ファイル:「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.httpd-ssl.confの設定

設定ファイル:「C:\xampp\apache\conf\extra\httpd-ssl.conf」
以下の記述を追記


<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を使って自己署名証明書ですのでブラウザが出す警告は無視して開く。
※マルチドメインSSLについては「OpenSSLを使って自己署名証明書を作成(XAMPPでマルチドメインSSL化)」がお勧めの文献です。

4.ブラウザの古い証明書を削除

Chromeなら設定を開き、「証明書の管理」を検索してクリックします。

信頼されたルート証明機関のリストに、3.SSL設定のServerNameがある場合は削除。

※今はOSが管理する証明書を利用しているようです。

5.openssl.cnf設定ファイルを編集

設定ファイル:「C:\xampp\apache\conf\openssl.cnf」
上記ファイルを「openssl-san.cnf」というファイル名としてコピー
以下の記述を追記


[ SAN ]
subjectAltName = @alt_names

[ alt_names ]
DNS.1 = 7design
					
※SSLを使って自己署名証明書ですのでブラウザが出す警告は無視して開く。

5.SSLサーバ証明書を作成

git Bash(gitが先にインストールされている前提)を起動して


username@computername MINGW64 ~
$ cd /c/xampp/apache/conf

username@computername MINGW64 /c/xampp/apache/conf
$ openssl req \
>     -newkey     rsa:4096 \
>     -keyout     my-server.key \
>     -x509 \
>     -nodes \
>     -out        my-server.crt \
>     -subj       "//CN=7design" \
>     -reqexts    SAN \
>     -extensions SAN \
>     -config     openssl-san.cnf \
>     -days       3650
Can't load C:\Users\username/.rnd into RNG
9696:error:2406F079:random number generator:RAND_load_file:Cannot open file:../openssl-1.1.1k/crypto/rand/randfile.c:98:Filename=C:\Users\shikada/.rnd
Generating a RSA private key
..............................................................................++++
.......................................................................++++
writing new private key to 'my-server.key'
-----

username@computername MINGW64 /c/xampp/apache/conf
$
					

6.証明書を設置

生成されたmy-server.crtとmy-server.keyを、それぞれ下記の場所に移動します。
・my-server.crt を C:\xampp\apache\conf\ssl.crt ディレクトリーに移動
・my-server.key を C:\xampp\apache\conf\ssl.key ディレクトリーに移動

7.証明書を認証する

・|my-server.crt|をダブルクリック → |証明書のインストール|をクリック
・インポートウェザードで |現在のユーザー|を選択 → |次へ|をクリック
・|証明書をすべて次のストアに配置する|を選択 → 証明書ストアで|信頼されたルート期間|を選択 → |次へ|をクリック
・証明書のインポートウェザードの完了で|完了|をクリック

設定完了!!

これでブラウザからXAMPPの環境にhttpsでアクセスできます。

Web Server for Chrome (おまけ)

Google Chromeのブラウザ拡張機能として稼働するローカル ウェブ サーバーです。
簡易なウェブページなら十分に使えます。

注意点
・この拡張機能はChromeを閉じても動き続けます。
・この拡張機能を停止してからブラウザを閉じる手間がかかります。
・必要なときだけ、この拡張機能を有効にする利用をお勧めいたします。