2019年6月、パソコンを新調しましたので、開発環境もゼロから構築しています。いろいろな開発環境がありますが、最も便利でよく使うXAMPP(ザンプ)のインストールからバーチャルホスト(複数の仮想サーバ)の設定までを記録していきます。
Windows10での環境です。
XAMPPのインストール
まずはパソコンにXAMPPをインストールしていきます。
XAMPPをダウンロード
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_01-1200x684.jpg)
こちらのサイトからXAMPPをダウンロードします。
https://www.apachefriends.org/jp/index.html
Windows向けXAMPPをクリックしダウンロード開始。
ダウンロードしたファイルをダブルクリックしてインストール開始。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_02.jpg)
exeファイルが落ちてくるので解凍などは必要ありません。このままダブルクリックでインストール開始です。
警告が出ますがそのままOKで進める
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_03.jpg)
画面に出てくるままNEXTを押していく
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_04.jpg)
インストールするソフトの内容を選択できますが、全部選択されたままで問題ありません。あとから起動するソフトの選択もできます。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_05.jpg)
インストールフォルダの選択ですが、デフォルトのままでOKです。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_06.jpg)
この画面も、そのままNEXTでOKです。ウェブサイトが立ち上がりますが閉じてしまってOKです。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_07.jpg)
いよいよインストール開始です。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_08.jpg)
インストールが進み始めます。緑色のメーターが満タンになれば完了です。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_09.jpg)
ここで警告が出てきます。XAMPPの中のApache(アパッチ)というサーバソフトに対して、Windows側でアクセス制限をどうかけるかの選択になります。自宅や会社の場合にはプライベートネットワークにだけチェックを入れておけばOKだと思います。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_10.jpg)
Finishを押してインストール完了です。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_11.jpg)
最後に言語の選択が出てきますが、アメリカ(英語)とドイツ(ドイツ語)の2択なので、英語を選択してSaveを押します。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_12.jpg)
Apacheのバーチャルホストを設定する
XAMPPの中には複数のソフトが入っています。その中の1つにApache(アパッチ)というソフトがあります。Apacheはパソコンの中に仮想サーバを作ることができますが、デフォルトのままだと1つだけしかサーバを設置できません。
そこでバーチャルホストという複数の仮想サーバを作る設定がありますので、ここに手順を書いていきます。複数のWEBサイトを開発する場合には必須になります。
まずはApache(アパッチ)の起動確認
XAMPPのインストールが完了するとコントロールパネルが出てきます。この中のApacheのStartボタンを押します。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_13.jpg)
問題なくApacheが起動したら、ブラウザのURLに「localhost」を入れてアクセスしてみます。下記の画面が見れればApacheは正常に動いています。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_19-1200x648.jpg)
confデータにバーチャルホストの記述を書く
Apacheが正常に動いているのを確認したところで、いよいよバーチャルホストの設定をしていきます。
方法はとても簡単で、XAMPPのコントロールパネルからApacheのconfファイル(設定ファイル)を開いて編集するだけです。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_14.jpg)
Configを押すと出てくるダイアログから、Apache(httpd.conf)を選択します。するとメモ帳でhttpd.confというテキストデータが開かれます。
この中のだいたい60行目にListen 80という記述があります。その下に作りたいバーチャルホストの数だけ同じようにListen 0000 と書いていきます。この番号はポート番号になります。今回は1001と1002で2つ作ってみます。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_15.jpg)
次に、httpd.confの一番下に記述を加えます。先ほどのListen 1001などと対になるホストの設定になります。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_16.jpg)
コピペ用にテキストを用意しておきます。
<VirtualHost *:1001>
ServerName test
DirectoryIndex index.html
AddDefaultCharset UTF-8
DocumentRoot C:\LocalServer\001_test\htdocs
<Directory "C:\LocalServer\001_test\htdocs">
AddType text/html .shtml .html
AddHandler server-parsed .shtml .html
Options Indexes MultiViews FollowSymlinks Includes ExecCGI
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
最初のVirtualHostのところにはListenと同じ番号を書きます。
あと変更する場所はDocumentRootとDirectoryのところにWEBサイトのデータなどパスを書きます。
今回は“C:\LocalServer\001_test\htdocs”というようにCドライブ直下に置いています。実際には下記のようにテストファイルを置いています。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_17.jpg)
ここまで出来たら、XAMPPのコントロールパネルからApacheを一旦終了し、もう一度スタートします。httpd.confの記述にミスがあると、スタートできずにエラーが出ます。
問題なくスタート出来たら、設定した仮想サーバにブラウザからアクセスしてみます。パスは「 localhost:1001」です。今回は複数サーバの設定なので、2つ作っています。
![](https://design-remarks.com/wp-content/uploads/2019/06/xampp2019_18-1200x364.jpg)
localhost:1001 と localhost:1002に、それぞれ別々のhtmlデータを置いています。問題なくバーチャルホスト(仮想サーバ)が2つ設置されました。
もしphpファイルを使う場合には、DirectoryIndexのところにindex.phpを書き加えます。
ここまでできればWEB開発が始められそうですね。
次回はXAMPPを使ってWordpressの仮想環境を作っていきます。