【WindowsでApache】XAMPPでWindowsマシンにWebサーバ環境をメッチャ簡単に構築してみる

# はじめに
MacOSやLinuxには簡単にApacheやhttpdが入りますが、
Windowsだとなんかあんまりそういったのは簡単なイメージがありませんよね。
XAMPPはApacheなどのWeb系のものが一式詰まった、夢の様なツールです！
HTMLやCSS、JavaScriptはサーバはいりませんが、PHPやPerlはサーバが必須！
Macで今までWebサイトを作っていたのですが、メインPCであるWindowsでも開発が行いたかったので、
開発環境を整えてみました。




# ダウンロードとインストール
(1)ダウンロード
(2)インストール


## ダウンロード
何処が正解のサイトか分かりませんが、私はここからダウンロードしました。
落としたのは「7.0.5 / PHP 7.0.5」です。

- [Windows 向け XAMPP](https://www.apachefriends.org/jp/download.html)


## インストール
ダウンロードが終わると、こんなアイコンが出るのでダブルクリックします。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/ab8c7eb8-bb6d-1b50-1be5-2e45d4f9f199.jpeg)

アンチウイルスソフトが動いていますが～的なメッセージ。
迷うことなく「YES」を押します。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/d8496c56-d6e0-14b1-1c15-148a60185d0e.jpeg)

OKしか押せないですね。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/903e6939-e649-f46c-2d93-da80c3409e60.jpeg)

さあ、インストールを始めましょう。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/f80af6da-c9e3-8728-3448-e072802e52e9.jpeg)

基本的に「Next」を連打します。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/c1e16fd8-a328-dc7b-048d-9416f1a25916.jpeg)

インストール先はお好みで。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/11f3800a-f7e0-5906-0eec-e526fb4cf1e7.jpeg)

チェックを入れてるとWebサイトが開きます。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/151a84e7-7f1a-6236-c40f-bf86053cae35.jpeg)

セットアップの準備ができたらしいです。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/71205636-34eb-038f-071d-89646a71deff.jpeg)

インストール中…
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/022dc270-db38-4412-050e-c643264ecaa4.jpeg)

なかなか時間がかかって完了。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/0fbd51d9-9b89-86f8-e7ee-2c536868d8cd.jpeg)

Do you want to start the Control Panel now?
にチェックを入れて「Finish」を押すと、XAMPPが起動します。

言語選択。
ドッチにしろ日本語じゃないのね。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/55165d9b-3c82-af20-f99a-e1c917c3e901.jpeg)

起動はしましたが、私の場合「Skypeがポート使ってるやないか！！」と怒られています。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/a45ce7f7-d808-b664-ab24-0ee0e6d300ab.jpeg)

とりあえず、タスクバーの通知領域から**XAMPPを一度終了**します。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/a5d325ad-21ac-6bd0-9b74-3979cc6bcb66.jpeg)

次に**XAMPPを管理者権限で起動**します。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/af90e0f3-44ae-fe0f-27ff-ef7b83b9edad.jpeg)

すると、「service」の欄がクリックできるようになっています。
クリックして、インストールしましょう。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/f690a23c-7ac0-ff2e-c03e-e4cb1b1be70d.jpeg)

インストールが完了しました。
Tomcatだけなんかエラー出るのでほっときます。どうせ使わないし。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/3ce9d20b-5e57-8462-4b14-2bdb76ebae77.jpeg)




# セットアップ
とりあえず、Apacheが起動できている人はこの項目は読み飛ばしても大丈夫なはずです。
私のように、エラーが出ている人でかつ、Skypeなどを消したくない人はセットアップしましょう。

## ポート番号を変更
Apacheの「Config」をクリックします。
出てきたポップアップのうち、「Apache(httpd.conf)」をクリックします。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/8943774a-3d74-9bfc-9191-539cfb5758cc.jpeg)

するとテキストエディタが立ち上がるので、58行目付近の「80」を「81」に変更します。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/0cf48977-5405-9268-581a-44903672f0c1.jpeg)

次は220行目付近の「ServerName」のところを「81」に。

![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/0402d0f5-932b-b6be-d494-17f55e42e99d.jpeg)

とりあえず一度これで保存し、エディタを終了します。

次は、Apacheの「Config」の「Apache(httpd-ssl.conf)」をクリックします。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/4b8c77be-2843-ca99-54c9-cdf20377551b.jpeg)

同様にテキストエディタが開きます。

36行目付近のListen　443を　448などに変更します。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/92e8c5f9-084e-bb4f-bcf3-6a8a13529c5c.jpeg)

保存し、終了します。




# 起動
では、起動してみます。
Apacheの欄の「Start」をクリックします。
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/6abcba03-69b1-13f4-4dec-f26379f84bf0.jpeg)
なんかまだ文句は言われていますが、起動できましたね。

次に、「メモ帳」を管理者権限で起動し、
`C:\Windows\System32\drivers\etc`
にある、`hosts`を開きます。

そこに、
`127.0.0.1 localhost`
を書き足します。

![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/beda496a-c84a-9267-120d-37a6582326b8.jpeg)

さあ、これで準備が整いました！

[http://localhost:81](http://localhost:81)にアクセスしてみましょう！
※81はhttp.confで設定したポート番号です。変更してない人は「:81」を付ける必要はありません。

動きました！！！！！！
![a.jpg](https://qiita-image-store.s3.amazonaws.com/0/63338/113824d2-0281-2af9-a8ce-e5f7e72f3361.jpeg)

これは、インストールしたフォルダの中の、`xampp\htdocs`にアクセスされているので、
その中身を変えると変更されます。


とりあえずここまで！


# 参考サイト様
- [xamppのapacheポート変更方法](https://www.apachefriends.org/jp/download.html)