Windows Laravelの環境構築の手順書

# Windows Laravelの環境構築の手順書
環境構築のついでに備忘録として残しておきます。

## XAMPP（ザンプ）
今からインストールするLaravelは<font color="red">PHPのフレームワーク</font>なので、
__PHPの環境構築が必要__です。

そのために、まずはXAMPPをインストールします。

### 手順
1. [公式HP](https://www.apachefriends.org/jp/index.html)からインストーラをダウンロードします。  
![xampp_how_to_install_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/8113debc-6484-92f4-f461-35f67dbeeb9b.png)

1. インストーラを起動し、表示に従ってインストールまで進めます。  
![xampp_how_to_install_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/e172f01a-cd83-996d-d848-1b7b0f1da798.png)  

    ![xampp_how_to_install_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/40b81938-2d41-31d0-a1bf-6637ab5e29fd.png)  

    ※既にインストールされていると灰色になります。  
![xampp_how_to_install_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/02d50876-c943-a7e8-bd59-690ba6bd0a9c.png)  

    インストール先は変更せずに進めます。  
![xampp_how_to_install_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/35a2dbd0-3135-5af5-49f1-b6ad85cf6b55.png)  

    ![xampp_how_to_install_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/33940b98-00a7-354d-7491-cb9578bcbd2a.png)  

    __[Next]__を押すと、インストールが開始されます。
![xampp_how_to_install_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/cb28b094-bf46-669a-3215-c5e46801f79a.png)  

1. インストール完了です。

### 動作確認
1. まずXAMPPのコントロールパネルを開きます。
例：__[Windows] + [E]__で『エクスプローラ』を開き、__[C:¥xampp]__にある__『xampp-control.exe』__で起動します。
<font color="red">※XAMPPの保存先を変更している場合は、__[C:¥xampp]__ではないので注意してください。</font>  
![xampp_how_to_use_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/9503c042-68a2-00b3-ee0a-222b80b310ce.png)

1. コントロールパネルを起動したら、『Apache』の__[Start]__をクリックします。
![xampp_how_to_use_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/a8e903ab-2885-2fd0-052a-09634143335f.png)

1. 『PID(s)』と『Port(s)』に番号が表示され、『Apache』が緑色になっていれば動いています。
![xampp_how_to_use_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/db3e566b-6d9d-e4dd-486d-4135d09948f3.png)
<font color="red">__※もし起動しなかった場合は、エラーによりますが、大体はSkypeがポート(80,443)を使っていることが原因になることが多いです。__</font>

1. 次に、PHPのPATHが通っているかを確認します。
本来であれば、インストーラで通るはずなのですが、私は通ってなかったので・・・

    まず『コマンドプロンプト』を開いて、__php -version__と入力します。
__※コマンドプロンプトは、[windows] + [R]を押して出たウィンドウで、『cmd』と入力すれば開くことができます。__  
![xampp_how_to_use_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/d53a70ef-172a-4bad-2b3f-ca84177396dd.png)  
バージョン情報が表示されていれば、PATHが通っていますので、次へ進んでください。

    表示されなかった方は、PATHが通っていないので設定する必要があります。  
__[Windows] + [E]__で『エクスプローラ』を開き、『PC』で__[右クリック] ＞ [プロパティ]__を選択します。
![xampp_how_to_use_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/3b7fadce-d1ba-0674-511e-5500490a2b5b.png)

    次に、左側にある『システムの詳細設定』をクリックします。
![xampp_how_to_use_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/8552b749-9e24-d85c-4049-d75b6926acb6.png)

    下の方にある『環境変数』をクリックします。
![xampp_how_to_use_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/e0dd0f46-5bf9-d4a9-f235-8ce17ab8af4a.png)

    ユーザー環境変数の『Path』をクリックし、『編集』をクリックします。
![xampp_how_to_use_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/45d1f32a-f689-e6c6-b398-3ad6d893d79d.png)

    『新規』をクリックし、__C:¥xampp¥php__を追加した後、すべて『OK』をクリックして閉じます。
![xampp_how_to_use_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/19ec21e4-4bcb-3bcc-d2df-1dd236fa9949.png)

    環境変数の反映には、__再起動が必要__ですので、再起動してください。

## Composer（コンポーザー）
PHPのパッケージ管理システム。

### 手順
1. [公式HP](https://getcomposer.org/download/)からインストーラをダウンロードする。
![composer_how_to_install_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/2590646f-8b7c-2400-cfd6-84e2a70b13c6.png)

2. インストーラを起動し、指示に従ってインストールします。
![composer_how_to_install_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/e49b700e-844c-31ba-01f8-8a0715c3aa3e.png)

    <font color="red">※XAMPPのインストール先によって変わるので注意してください。</font>
![composer_how_to_install_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/b36a8f91-9e1c-35a6-46b2-af46344f82f2.png)

    ![composer_how_to_install_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/126720ca-ecd2-0073-ab67-4d3b261ffd19.png)

    ![composer_how_to_install_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/a7d3204b-b500-73e7-b0eb-4d042d9b77de.png)

    ![composer_how_to_install_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/cadd0555-7a28-d5a6-1938-4cd0059ecaa0.png)

    ![composer_how_to_install_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/875b53d3-9e25-38bf-ae5f-9c0f4240d7a6.png)

1. インストール完了です。

## Laravel（ララベル）
やっとLaravelのインストールです。

### 手順
1. 『ターミナル』を呼び出して、以下のコマンドを入力します。
<font color="red">※今回は__『bbs』__としていますが、__プロジェクト名__が入ります。</font>

    ```sh
$ composer create-project "laravel/laravel=5.7.*" bbs
```

1. これでカレントディレクトリに『bbs』というディレクトリが作成されているので、中身を見に行きます。


    ```sh
$ cd bbs
```

1. 下記のコマンドを入力すると、Laravel Frameworkのバージョンを確認できます。

    ```sh
$ php artisan -v
```

1. 以上でインストールは完了です。

### 動作確認
1. 『ターミナル』で先程作成した『bbs』のディレクトリに行きます。

1. 以下のコマンドを入力し、サーバーを立ち上げます。

    ```sh
$ php artisan serve
```

1. ＜　＞に囲まれたURLが表示されるので、ブラウザで入力します。
![laravel_setting_db_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/ce943860-bd98-aac8-e176-42fb16d3fdb9.png)

    以下のような画面が出れば、正常に起動しています。
![laravel_how_to_use_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/b6a8ed53-5c3d-bf33-3c7b-7fa5c3fab381.png)

1. サーバーを落とすには、『ターミナル』で__[Ctrl] + [C]__を入力すれば大丈夫です。
入力後、サーバーが落ちてアクセスできなくなります。

### DB設定
1. 『XAMPP』を立ち上げて、『MySQL』を『Start』します。
緑色になっていれば、正常に起動しています。
![laravel_setting_db_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/a29aa5c6-dfa6-6a92-4169-455ab52192e0.png)

1. 『MySQL』の『Admin』をクリックし、phpMyAdminに接続します。
![laravel_setting_db_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/61284f01-a46b-0b03-dd3a-22f00e0af9ee.png)


    その後、『データベース』をクリックします。
![laravel_setting_db_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/ae55cebc-41a7-c619-53fd-971fe5425c31.png)

1. 接続するデータベースを作成します。
今回は、『laravel_test』とします。
![laravel_setting_db_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/459f927b-c890-5743-0bd9-220f7018ff16.png)

1. ユーザアカウントのページに行き、アカウントの__ユーザ名、パスワード__を確認します。
![laravel_setting_db_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/d5d21439-6d42-3b61-8c8a-ff8eb9ee9c89.png)

    ![laravel_setting_db_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/1c48b604-ca78-ebb6-3641-b88f61710687.png)

    ![laravel_setting_db_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/5c1c88da-717c-e167-a3d3-9a27bc166f2b.png)

1. 次にディレクトリ『bss』を開き、__『.env』__を開きます。
※VScodeなどのエディタで開くといいです。
![laravel_setting_db_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/99d3631a-e8c6-5481-775c-f2e0f3e73b51.png)

1. __『DB_』__から始まる部分を編集します。

    ```
DB_DATABASE=作成したデータベース名
DB_USERNAME=確認したユーザ名
DB_PASSWORD=確認したパスワード
```

    今回は、以下のように編集します。
![laravel_setting_db_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/0241bb94-8775-044c-06e3-a5137cd11238.png)

以上で、Laravelの環境構築は完了です。