【環境開発】XAMPP使用して、ローカル環境にlaravelを表示させる。（指定したURLでも可能）

# 1.XAMPPをインストール
今回は、XAMPPインストールされていてサイトが観れる前提で進めていきます。

http://localhost:80

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197404/76697d54-0087-031a-c083-be400be3779f.png)|
|:-:|

# 2.Composerをインストール
### 概要
Composerを使用してLaravelをインストールする為に、
[公式サイト](https://getcomposer.org/download/)からをComposerダウンロードしていきます。

## 手順
以下のリンクにアクセスします。

【公式】Compose
https://getcomposer.org/download/

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197404/de85f8e6-5aa9-fc85-1e16-0553d0523b86.png)|
|:-:|

``Download``を選択します。
<br>

|![Screenshot_2019-11-11 Composer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197404/9ea8b216-5f3c-91f9-b1eb-29ae2895bf26.png)|
|:-:|

``Composer-Setup.exe``をダウンロードします。
<br>

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197404/aaa98609-8cd2-1e3d-d1d5-2a90f3790771.png)
``NEXT >``を選択します。
<br>

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197404/a936f62d-a4ea-0299-8b6a-66d532988434.png)
``NEXT >``を選択します。
<br>

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197404/af64c2da-fa17-c5af-ed1c-214bb3c34865.png)
``NEXT >``を選択します。
<br>

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197404/9f8d7826-da43-5334-911c-fade26da18b2.png)
``Install``を選択します。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197404/476e7bb2-5db9-2026-e741-24457a0f18d6.png)
``NEXT >``を選択します。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197404/0d5169a2-249d-36f3-892a-31a90f46f39d.png)
``Finish``でインストール完了します。
<br>

# 3.Laravelプロジェクトの作成
## 概要
今回は``c:\xampp\htdocs`` に``laravel``という、プロジェクト名を作成していきます。
## 手順
コマンドプロンプトを開き``c:\xampp\htdocs``まで移動する。

```ruby:コマンドプロンプト
cd c:\xampp\htdocs
```
<br>
Laravelプロジェクトの作成をします。※ 時間が掛かります。

```ruby:コマンドプロンプト
composer create-project laravel/laravel --prefer-dist laravel
```
<br>
このようなメッセージが表示されれば準備完了です。

```ruby:コマンドプロンプト
Installing laravel/laravel (v6.4.0)
  - Installing laravel/laravel (v6.4.0): Downloading (100%)
Created project in projectName

～　割愛　～

Package manifest generated successfully.
> @php artisan key:generate --ansi
Application key set successfully.
```

<br>
作成したプロジェクト(laravel)のファイルまで移動して、接続テストをしてみます。
※ xamppが、``C:`` 直下にインストールされていることが前提です。

```ruby:コマンドプロンプト
cd projectName
php -S localhost:8000 -t public
```
<br>
``Press Ctrl-C to quit.``が表示されていればOK!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197404/d75621ad-e509-338d-0b0e-d4f33d2e5840.png)


http://localhost:8000 に接続してみて、画像と同じ画面が出ていれば接続テスト完了！

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197404/e0ebe11e-36a0-f69e-c25a-a8a7b18cf54e.png)|
|:-:|

``Ctrl+C`` で接続を終了させます。

# XAMPPの設定変更
## 概要
【URLの変更】
現状：　http://localhost/laravel/public/ でTOPが表示される。
↓
変更後：http://localhost と http://example.com でTOPを表示させる。
※「example.com」はURLの変更も可能です。

## 手順
URLが表示されるか確認する。
http://localhost/laravel/public/

<br>
``C:\xampp\apache\conf\extra\httpd-vhosts.conf`` を開きます。

``NameVirtualHost`` のコメントアウトを外し、以下のコードを追加して保存する。

※　アクセス権を与えなけれ403エラーとなるので注意

``` ruby:httpd-vhosts.conf
NameVirtualHost *:80

###############
# localhost
##
# フォルダパスとドメイン名の設定
<VirtualHost localhost:80>
  DocumentRoot "C:/xampp/htdocs/laravel/public"
  ServerName localhost

  # アクセス権付与
  <Directory "C:/xampp/htdocs/laravel/public">
    AllowOverride All
    Options All
    Require all granted
  </Directory>
</VirtualHost>



###############
# example.com
##
# フォルダパスとドメイン名の設定
<VirtualHost example.com:80>
  DocumentRoot "C:/xampp/htdocs/laravel/public"
  ServerName example.com

  # アクセス権付与
  <Directory "C:/xampp/htdocs/laravel/public">
    AllowOverride All
    Options All
    Require all granted
  </Directory>
</VirtualHost>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197404/0e367164-0301-0b7a-15c3-3e76b2b72e85.png)

<br>
次に、host設定をしていきます。
``C:\Windows\XXXXXXXX\drivers\etc``にあるhostを開き、以下のコードを追加して保存する。
※　「XXXXXXXX」はユーザーです。

``` ruby:host
127.0.0.1       localhost
127.0.0.1       example.com
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197404/e5275df3-0222-b571-207f-d893ab130d1c.png)

XAMPPでApacheを再起動させ、URLに接続して出来たら設定完了！！
http://localhost/
http://example.com/



お疲れ様でした:clap_tone1::clap_tone1: