Apacheをインストールした時点では、localhost 1つしかサーバが有りませんので、 クライアントが増えると、localhost内にディレクトリを作成してクライアントごとの案件を開発しなければなりません。 これでは、納品時の実際のサーバと条件が異なりますので、システムを修正しなければならなくなります。 また、/からのフルパスが使用できないことも、非常に不便です。 ここでは、virtualhostを作成して、案件ごとに異なるサーバを立てる方法と、他のPCから動作確認する方法を学びます。
xamppをインストールされていることを前程に紹介しますので、個々にインストールされている場合は、ご自身の環境に読み替えてください。
virtualhostの作成
Apacheのインストールされているディレクトリ、デフォルトでは、[xampp]-[apache]-[conf]に、通常のapacheを設定するファイル、httpd.confが有ります。 ここに直接バーチャルホストを設定することも可能ですが、今後、いくつも増えることを考えると、専用のファイルに設定したほうが管理がしやすくなりますので、 この[conf]内にあるディレクトリ、[extra]を開き、専用のファイルhttpd-vhosts.confで設定します。- webアプリ開発専用のディレクトリを作成します。
C:\に、ディレクトリ[www]を作成して、この中に各クライアントのディレクトリを作成してゆきます。
とりあえず、メインとなるディレクトリ[example.com]を作成しておきます。
このドメインは、localhost用の特別なドメインとすることが慣例で、localhostでvirtualhostを構築する場合に使用するドメインです。
このドメインを作成すると、ここがlocalhostになります。今後は、この前に、クライアント名を付けてサブドメインにします。
もちろん、D:\に作成しても結構ですが、D:\は、大切なクライアントの情報をお預かりしているのですから、
バックアップ用にして、毎日バックアップするようにしていただくことがベストだと思います。
PCの電源を切るたびに、自動的にC:\wwwをD:\wwwにコピーする設定も、windowsのタスクスケジューラで可能です。
この時、1台のHDDやSSDをC:とD:に分割している場合は、何の役にも立ちません。必ず独立したデバイスをご用意ください。
RAIDの外付けなら最高です。(ちなみに、コマンドは、 xcopy C:\www\ D:\www\ /d /e /i /h /y )
ここで少し、PCのシャットダウン時に、自動的にバックアップを取る方法を紹介しておきましょう。 人間ですから、どうしても忘れてしまうことがありますので、電源を切るときに必ずバックアップを取っていれば、今日行った作業が失われこともありません。
(windows10、windows11ともに、Pro版以上で設定可能です。Homeエディションでは使用できません。)
■グループポリシーで設定
- C:\Users\[ご自身のユーザ名] に、テキストファイル「backup.bat」を作成して、VSCodeで開きます。
xcopy C:\www\ D:\www\ /d /e /i /h /y と入力して保存してください。 - windowsメニューを右クリックして、[ファイル名を指定して実行]を選択し、[gpedit.msc]と入力します。
- ローカルグループポリシーエディターが開きますので、左メニューの「スクリプト(スタートアップ/シャットダウン)」を選択して、
右の「シャットダウン」をダブルクリックします。
- シャットダウンのプロパティで、[追加]を押します。
- 「スクリプト名」に、先ほど作成したバッチファイルのパスを指定して、保存すれば完了です。
■タスクスケジューラで設定
- windowsのタスクバーにある検索窓に[タスクスケジューラ]と入力すると、タスクスケジューラが表示されますので、クリックして起動します。
右のメニューから「タスクの作成」を選択します。 - タスク名に適当な名前を付けてください。
- 上部の[トリガー]タブを押します。
[新規]ボタンを押してトリガーを作成します。トリガーは、タスクが実行されるタイミングを設定します。 - 先頭のドロップダウンリストから、「ユーザーセッションからの切断時」を選択します。
以下、同様に設定して、[OK]を押してください。
- 次に、[操作]タブを押して、[新規]をクリックします。
- ここで、コマンドxcopyと、引数に、C:\www\ D:\www\ /d /e /i /h /y を指定します。
[新規]ボタンを押してトリガーを作成します。トリガーは、タスクが実行されるタイミングを設定します。 - 最後に、[設定]タブの「タスクを停止すまでの時間」をOffに設定して完了です。
- C:\Users\[ご自身のユーザ名] に、テキストファイル「backup.bat」を作成して、VSCodeで開きます。
- VSCodeで、[xampp]-[apache]-[conf]-[extra] httpd-vhosts.confを開いてください。
- 20行目付近に以下の4行を追加します。
#-------------------------------------
# サーバネームによるバーチャルホスト
NameVirtualHost *:80
NameVirtualHost *:443 - 後は、ファイルの最後にバーチャルホストを追加してゆきます。
<VirtualHost *:80 *:443> ServerName example.com DocumentRoot "C:/www/example.com" DirectoryIndex index.php index.pl index.cgi index.shtml index.html <Directory "C:/www/example.com"> Options Indexes FollowSymLinks MultiViews Require all granted AllowOverride All Order allow,deny Allow from all Options All Options includes ExecCGI AddType application/x-httpd-cgi .pl .cgi .py AddType text/html .htm AddType text/html .html AddHandler server-parsed .htm AddHandler server-parsed .html php_value error_reporting 30711 </Directory> ErrorLog "logs/localhost2-error.log" CustomLog "logs/localhost2-access.log" common </VirtualHost>
1行目でvirtualhostを宣言しています。*:80 *:443は、http://のポート80番と、https://のポート443番両方のアクセスを許可することを意味しています。 2行目は、作成するホスト名です。3行目が、このホストのディレクトリです。最初に作成したディレクトリを指定します。 4行目は、ディレクトリに、ファイル名なしでアクセスされた場合に、表示させるファイルの優先順位です。 この例では、index.phpを最初に探し、無ければindex.plを、それも無ければindex.cgiをと言うように探して表示させます。 ５行目以降は、このディレクトリに対するアクセス許可や、細かな設定を行っていますので、このままコピーしておいてください。 - この後の学習で必要になる[sales.example.com]と、[lesson.example.com]も作成しておいてください。
ディレクトリ[www]内に、ディレクトリ[sales.example.com]と、[lesson.example.com]を作成して、上記と同じようにvirtualhostを追加します。
# 販売管理用 <VirtualHost *:80 *:443> ServerName sales.example.com DocumentRoot "C:/www/sales.example.com" DirectoryIndex index.php index.pl index.cgi index.shtml index.html <Directory "C:/www/sales.example.com"> --中略-- </Directory> ErrorLog "logs/localhost2-error.log" CustomLog "logs/localhost2-access.log" common </VirtualHost> # その他のレッスン用 <VirtualHost *:80 *:443> ServerName lesson.example.com DocumentRoot "C:/www/lesson.example.com" DirectoryIndex index.php index.pl index.cgi index.shtml index.html <Directory "C:/www/lesson.example.com"> --中略-- </Directory> ErrorLog "logs/localhost2-error.log" CustomLog "logs/localhost2-access.log" common </VirtualHost>
先頭に#を付けて、コメントを入れておくと分かりやすいですね。 - Apacheの再起動
virtualhostの設定は完了しましたので、Apacheを再起動します。
xamppを起動して、Apacheを[Stop]->[Start]して、再起動してください。
- webアプリ開発専用のディレクトリを作成します。
C:\に、ディレクトリ[www]を作成して、この中に各クライアントのディレクトリを作成してゆきます。
とりあえず、メインとなるディレクトリ[example.com]を作成しておきます。
このドメインは、localhost用の特別なドメインとすることが慣例で、localhostでvirtualhostを構築する場合に使用するドメインです。
このドメインを作成すると、ここがlocalhostになります。今後は、この前に、クライアント名を付けてサブドメインにします。
もちろん、D:\に作成しても結構ですが、D:\は、大切なクライアントの情報をお預かりしているのですから、
バックアップ用にして、毎日バックアップするようにしていただくことがベストだと思います。
PCの電源を切るたびに、自動的にC:\wwwをD:\wwwにコピーする設定も、windowsのタスクスケジューラで可能です。
この時、1台のHDDやSSDをC:とD:に分割している場合は、何の役にも立ちません。必ず独立したデバイスをご用意ください。
RAIDの外付けなら最高です。(ちなみに、コマンドは、 xcopy C:\www\ D:\www\ /d /e /i /h /y )
ネームサーバの設定
とはいっても、ローカルマシーンにネームサーバは存在しませんので、hostsで設定します。 windowsの場合は、C:\Windows\system32\drivers\etc\hosts に有ります。 このファイルを、VSCodeで開いてください。他のエディタの場合は、管理者モードでなければなりません。
127.0.0.1 example.com 127.0.0.1 lesson.example.com 127.0.0.1 sales.example.com
先ほど作成したvirtualhostの3行を追加して保存します。 保存時に、「管理者権限が必要」と、確認が出ますので、承認して保存してください。 ちなみに、127.0.0.1は、ローカルマシーン専用のIPアドレスです。どのPCでも、自分自身はこのIPアドレスになります。 この後にも出てきますが、ローカルなIPアドレスは、127.0.0.1のほかに、192.168.???.???が使用できます。
これでvirtualhostの設定は完了です。 それぞれのドキュメントルートにindex.htmlを置いて、ブラウザからドメインにアクセスしてみてください。 index.htmlのファイルの中には、それぞれのドメイン名を書いておけば、正常にアクセスできていることが確認できます。
今後は、クライアントごとにexample.comの前に、クライアント名を付けたサブドメインでvirtualhostを作成して、 VSCodeでも、このディレクトリをプロジェクトにすれば、他のクライアントに影響することなく開発を進められます。何より、画像の場所など、ファイルの場所指定に/からのフルパスを使用できることが最大の利点です。 拡張子の無いファイルをディレクトリを装い実行させるなど、高度なシステムには、無くてはならない機能です。
http://example.com/inquiry/jp/
このような、URLで、inquiryがディレクトリではなく、phpの場合、jpはパラメータとしてphpに渡されます。 だれが、どう見てもディレクトリですが、phpとして立派に動作します。 ただ、この場合、相対パスが使用できませんので、フルパスが使用できないサーバでは不可能になります。他のPCから動作確認
ここまできたら、ご自分のメインのPC(以下親機)をwindowsサーバに見立てて、他のPC(以下子機)のブラウザでアクセスして動作確認をしてみましょう。- 親機の設定
最初に、現在のご自分のルータの環境を調べますので、VSCodeで、[Ctr]+[j]を押してターミナルを開きます。
シェルで、C:\>ipconfigと入力して[Enter]を押すと、ネットワーク環境が表示されます。イーサネット アダプター イーサネット: 接続固有の DNS サフィックス . . . . .: flets-west.jp IPv6 アドレス . . . . . . . . . . . .: 2001:a253:68e3:9d00:f8a6:fd2e:4ffd:7e7b 一時 IPv6 アドレス. . . . . . . . . .: 2001:a253:68e3:9d00:78d1:8a4a:a910:1be6 リンクローカル IPv6 アドレス. . . . .: fe80::f8a6:fd2e:4ffd:7e7b%4 IPv4 アドレス . . . . . . . . . . . .: 192.168.1.9 サブネット マスク . . . . . . . . . .: 255.255.255.0 デフォルト ゲートウェイ . . . . . . .: fe80::2eff:65ff:fea8:9d4d%4 192.168.1.2
この「IPv4 アドレス」が重要で、自身のルータは、192.168.1.???で、動作していることが分かります。 さらに、現在メインPCに割り当てられているIPアドレスは、192.168.1.9になっています。 通常、ルータは、PCの電源が入ったときに、空いているIPアドレスを割り当てますので、 サーバのIPアドレスが、コロコロ変わっては、他のPCからアクセスすることができません。 そこで、このIPアドレスを固定しなければなりません。
windowsの[コントロールパネル]-[ネットワークと共有センター]を開き、左の「アダプターの設定の変更」を押します。
現在接続しているアダプタ(インターフェース)を右クリックして[プロパティ]を選択します。
[インターネットプロトコル(TCP/IPV4)]を選択して、[プロパティ]ボタンを押してください。
[IPアドレスを自動的に取得する]がチェックされていると思いますので、[次のIPアドレスを使う]をチェックしてください。
ここで、先ほど確認したIPアドレスと、デフォルトゲートウェイを設定します。 [OK]ボタンを押して、PCを再起動します。 これで、何度起動しても、メインのPCのIPアドレスは、設定したIPアドレスになっています。
- 子機の設定
同じローカルエリア内(ルーターが同じ)の他のPCのブラウザから、親機の192.168.1.9にアクセスすることも可能ですが、 この場合は、常にメインのlocalhost(example.com)に接続されます。 これでは、クライアントごとのサブドメインにアクセスすることができませんので、子機のhostsを設定します。 親機と同じように、VSCodeで、C:\Windows\system32\drivers\etc\hosts を開きます。192.168.1.9 example.com 192.168.1.9 lesson.example.com 192.168.1.9 sales.example.com
このように、親機で作成したvirtualhostと、親機のIPアドレスを結び付ければ完了です。 保存して、ブラウザから、ドメイン名でアクセスしてみてください。
- 親機の設定
まったく、windowsサーバと同じ設定ですので、あまったPCが有ればサーバにすることも可能です。 ただ、今回は、ローカルエリアネットワークですので、外部からのアクセスは出来ません。 外部からアクセスする場合は、プロバイダ契約をグローバルな固定IPにします。 固定IPが無料のインターネットサービスも有ります。
ある程度、独り立ちできたら、最終的にはドメインを取得してLinuxサーバを用意したいですね。 通常のwindowsでは、メールに関するシステムだけが開発できません。 ちなみに、私がインターネットを始めたのが30年も昔ですので、自分の苗字でもドメインが取得できました。