e日記風 独り言

#気まぐれ & 気まま & 天邪鬼な老いぼれ技術屋の日々の記録のうち、パソコン技術やインターネット技術、プリンタやPCアプリからプログラム言語などに関連した記事です。
右端上端の同一カテゴリージャンプボタンで同じカテゴリーの他の記事を順番にご覧いただけます。
Access Counter:  総アクセス数

楽 天 の 商 品

-2056- ローカルサーバーのSSL化完了
= 今日は画像なし m(_ _)m =
ここ(XAMPP 設定方法)やここ(SSL化でエラー)とかここ(htmlファイルがダウンロードされてしまう!?)にもローカルサーバーについて書いたが、やっとhttps(SSL)化が完了したのでツボをメモ。
性格柄 言われた通りに作業するのは苦手で、某かの我流な変更を加えてしまうので、Webの操作方法通りと思っても変更箇所に伴う作業の変更が妥当ではないらしく、何回作業してもどうしても「保護されていない通信」が消えなかったが、2週間かけて今日やっと「保護された通信」になった。
図-1
SSL化したつもりでも夕方までは Chromeでローカルホストを開くとこんな感じ。

図-2
それがやっとこうなった。
いつものことながら、こういう問題が解決した瞬間の爽快感は堪えられない。

何が問題だったか、幾つもありすぎて全部は自分でもわからないが、XAMPPの設定に関する私のトラブったポイントは以下の通り。

1.DocumentRootにディレクトリパスを登録する際漢字は使わない。使うときはUTF-8N(BOMなし)で保存する。(Googleドライブを指定していたので DocumentRoot "C:\Users\user1\Google ドライブ\HTML" などとなってしまっていた)


2.上記ディレクトリパスは、httpd.conf/httpd-ssl.conf/httpd-vhosts.conf の3つとも正確に合わせる。
ディレクトリパスは Explorerでそのフォルダーを開いて中のファイルのプロパティで表示できるのでコピペするのが吉。


3.私が若干手を加えたのは
「非SSLの 81番Portはそのまま localhost として残し(http://localhost:81)、 443番Portを localhost2 として新しく SSL化して付け加え(https://localhost2:443)、どちらも同じディレクトリを指定する」という意味のないことなんだが、設定ファイルの仕組みをロクに理解しないで作業開始してしまい、途中 未変更・変更済み・再変更がグチャグチャになってしまい、自分でも訳が分からなくなっていた(^^);;;。



httpd.conf の変更は下記の通り。
60行辺り: Listen 81
227行辺り: ServerName localhost:81
251行目辺りから(コメント行は含まず)
DocumentRoot "C:\Users\user1\Google ドライブ\HTML"
<Directory "C:\Users\user1\Google ドライブ\HTML">

Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
AddHandler application/x-httpd-php .php .html
Require all granted



httpd-vhosts.confの変更(ファイルの最後に追加)
<VirtualHost *:443>

DocumentRoot "C:\Users\user1\Google ドライブ\HTML"
ServerName localhost2
AddType text/html .shtml .inc
AddHandler server-parsed .html
AddHandler server-parsed .shtml
AddHandler server-parsed .inc
SSLEngine on
SSLCertificateFile "conf/ssl.crt/local_server.crt"
SSLCertificateKeyFile "conf/ssl.key/local_server.key"

</VirtualHost>

<Directory "C:\Users\user1\Google ドライブ\HTML">

AllowOverride All
Require all granted

</Directory>

httpd-ssl.confの変更点(122行目辺りの #を外して変更、又は追加)
<VirtualHost *:443 >

DocumentRoot "C:\Users\user1\Google ドライブ\HTML"
ServerName localhost2:443
SSLEngine on
SSLCertificateFile "conf/ssl.crt/local_server.crt"
SSLCertificateKeyFile "conf/ssl.key/local_server.key"


上記変更を加えた上で、UTF-8Nで保存する。
図-3
更にサーバー証明書を作って、Windowsのインターネットオプションとブラウザの証明書に登録する。
(方法はここを参照)
証明書の作成は GitBashでこんな感じ。

最後に、私のように ssl化したポートを localhost2 などと別名を付けて分けた場合は Windows の hostsファイルを編集しないと「localhost2 が見つかりません」などと言うエラーになる。hostsファイルは 通常では編集禁止なので、メモ帳などのテキストエディタを「管理者権限」で起動して「ファイルを開く」からC:\Windows\System32\drivers\etc\ フォルダーの hosts ファイルを開いて、最後に
127.0.0.1 localhost2
などと ローカルのポート番号に続けて 追加したサーバー名を記述した行を追加する。
もう一つ、忘れてはならないチェック項目が! perlスクリプトの第1行目のシェバング行は通常のレンタルサーバー(UNIX系)などでは "#! /usr/bin/perl" となっているが Windowsで xampp をインストールした場合の perlのディレクトリは "#! C:/xampp/perl/bin/perl" だから逐一書き換えないといけない。書き換えないで済ませるには "C:\usr" に "C;\xampp\perl" のシンボリックリンクを作って "/usr/bin/perl" が"C;\xampp\perl\bin\perl" を参照できるようにする。そのためにコマンドプロンプトを管理者権限で立ち上げて以下のように打ち込む。
cd /
mklink /d c:\usr c:\xampp\perl
もし Web上のサーバーが "#! /usr/local/bin/perl" の場合は
mklink /d c:\usr\local c:\xampp\perl
となる。 以上で localhost で概ね xampp の perl/php が動作するようになるはず。
・・・・でもローカルでSSL化するのは何のため? 決済ページを立ち上げる予定もないのに。Webサーバーを SSL化したのでこの際ローカルも・・・と思ったが、「保護されない通信」のままでも途中経路が暗号化されていようといまいと PerlやPHPといった SSIの動作確認などは別に問題無さそう!?  所詮 PC内の通信だから傍受・改竄される心配もないのに、思いついたらやらずにはおれない性格が悲しい(涙;;;)

尚、DocumentRootに次のような index.htmlを置くと、http:と https:をクリックで切り替えて確認できる。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body >
<?php
$dirname = dirname(__FILE__);
?>
<div style="color:#DB80DB; padding-left:30px; font-size:22pt; font-weight: bold; text-align: left; line-height:1.2;">
<span style="color:#F37;">XAMPP</span> Apache document root directory<BR>
<hr>
<span style="font-size:16pt; color: gray;">
<?php
echo "現在のディレクトリ: $dirname <br>";
?>
<span style="font-size:14pt; color: black;">表示方法: XAMPPを起動してブラウザのURLに</span><br>
<span style="font-size:16pt; color: black;">  <a href="https://localhost2:443/ ">http<b>s</b>://localhost<b>2:443</b>/ </a><br>
  <a href="http://localhost:81/" >http://localhost:<b>81</b>/ </a> <span style="font-size:16pt; color: black;"><br>
と入れることで https/httpそれぞれのプロトコルでこのファイルが表示される。</span><br>
</div>
</body></html>


2019/03/17