XAMPPのApacheでLaravelを表示できるようにする

この記事は、「[【連載】初めてのWindows用Laravel 5.7開発環境構築入門](https://qiita.com/hitotch/items/a646972fe1992611e92b)」の孫記事です。環境などの条件は、親記事をご覧ください。
この記事は、「[XAMPP上にLaravel 5.7をインストールする 2018年12月版](https://qiita.com/hitotch/items/d22fa4c12d0f15f7adc4)」の子記事です。

---
　今回は、XAMPP環境でLaravelを動作させます。XAMPP環境ではApacheがWebサーバーなので、LaravelはApache上で動作することになります。
　[前回](https://qiita.com/hitotch/items/927337632c7ae1f1963f)の最後でLaravelの簡易サーバー上で動作確認しているところまでできているので、その状態からスタートします。簡易サーバーは動作したままでも大丈夫ですが、自分がどっちを見てるかわからなくなると面倒なので、念の為止めておいたほうがいいかもです。

# 前提
　フォルダ構成は前回同様以下のようになっているものとします。

```
C:
 + xampp
  + htdocs　　　　　　　　← これが通常のドキュメントルート。http://localhost/で見える
   + laravelexample　　　← 今回新しく作ったテストプロジェクトフォルダ
    + public　　　　　　　← テスト用URL http://example.com で見せるドキュメントルート
```

そしてApache上のLaravelをテスト用URL http://example.com で動作させることを目指します。

Visual Studio Code上でプロジェクトを見ると、ここにあるpublicフォルダを http://example.com で見せるドキュメントルートにしたいわけです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315589/cf36c5a1-3f84-866e-197e-3b4c767584b6.png)

なので、Apacheは http://localhost/ などで見えるデフォルトのドキュメントルート（C:\xampp\htdocs）と、 http://example.com 用のドキュメントルート（C:\xampp\htdocs\laravelexample\public）の２つがあることを知っておかなければいけません。デフォルトじゃない方（example.com）を、**バーチャルホスト**としてApacheに登録することで、これを実現します。

# バーチャルホスト（Virtual host）を設定

Apacheにバーチャルホストを設定する方法はいくつかありますが、今回はバーチャルホスト専用の登録場所 httpd-vhosts.conf という設定ファイルに登録することにします。

以下のように、 c:\xampp\apache\conf\extra フォルダにある httpd-vhosts.conf をテキストエディタで開きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315589/3e56ca10-1775-f8f4-e04a-0300836e0b74.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/315589/17f9c2ed-82c1-feb9-7590-7e6d2c3e8c81.png)

このファイル、初期状態だと中身はすべて # でコメントアウトされています。最終行に、以下を追加しましょう。

```
<VirtualHost example.com:80>
  DocumentRoot "C:\xampp\htdocs\laravelexample\public"
  ServerName example.com
  <Directory "C:\xampp\htdocs\laravelexample\public">
    AllowOverride All
    Options All
    Require all granted
  </Directory>
</VirtualHost>
```

**VirtualHost** に example.com (http://はいらない)を登録し、:80 はポート番号です。ちなみにLaravelの簡易サーバーは8000番でしたね。複数のサーバーで同じ番号は使えません。
**DocumentRoot** が今回バーチャルホストで見せたいフォルダです。**Directory** のところでセキュリティ設定してます。
**ServerName** はホストドメイン名と同じで良いです。

変更したら、保存します。

# Windowsにhostsの例外を登録する

　次に、Windows 10に「example.comは、ローカルPC(自分自身=IPアドレス 127.0.0.1)と思ってね」と教えます。これをしないと、ブラウザで http://example.com を開こうとしたとき、インターネットのどこかにあるexample.comを探しに行ってしまいます。
　この「example.comは、[IP]と思ってね」を登録するファイルは、``C:\Windows\System32\drivers\etc\hosts`` です。ただ、このファイルは保護されているので、管理者権限で編集しなくてはいけません。

　管理者権限で**hosts**ファイルを編集するために、まずは管理者権限でメモ帳を開きます。スタートメニューからメモ帳を探し、右クリックして、「管理者として実行」します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315589/f2ef7d65-8cd4-0a84-8a0a-77aa8d862821.png)

　つぎに、**hosts**ファイルを開きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315589/651e693d-49c7-8042-d579-6f122851968c.png)

　拡張子がテキストじゃないので、開くダイアログの右下のファイルタイプを「すべてのファイル」にします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315589/a28a72bc-78bc-375c-3181-c1d8880fab42.png)

　**hosts**を開きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315589/8a58d0a4-f01e-6436-bbda-babe130c8bd2.png)

　ファイルは以下のようになっているはずなので、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315589/322509e3-eb40-ea0e-b25f-bf31f7cbf12f.png)

　最終行に以下を追記します。

```
127.0.0.1 example.com
```

　これで、「example.comと言われればIPアドレス127.0.0.1（ローカルPC）」とWindowsが思ってくれるようになります。

# LaravelのAPP_URLを再設定する

LaravelのプロジェクトをVisual Studio Codeで開き、**.env**ファイルを開きます。APP_URLはexample.comにしたいので、以下の部分を編集します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315589/9563d4e9-cf61-87a3-49b1-b55e70e49fae.png)

```
APP_URL=http://example.com
```

編集後
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315589/a2528889-8c80-334e-46e4-c4f318d76ce1.png)

編集したら保存します。

これで、XAMPPのApacheでLaravelを動作させる設定が完了しました。

# example.comで動作確認

では動作確認をしましょう。
まず、XAMPPでApacheが動作していることを確認します。**（Virtual host編集後一度もApacheを再起動してなければ、一度再起動して設定を反映します。）**

![image.png](https://qiita-image-store.s3.amazonaws.com/0/315589/54972508-149f-f630-ddad-777025ad79b9.png)

次にブラウザを開いて、アドレスバーに ``example.com`` と入力して移動します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/315589/789ffe59-cc3d-cc48-5ae6-9bca903fadde.png)

動作OKですね！