laravel+vueプロダクトのローカル開発環境

#書いてあること
Laravelでバックエンド、Vueでフロントエンドの構成のプロダクトをWindowsクライアントで開発する際のクライアントのローカル環境の構築方法。

#手順
##1.「Visual Studio Code（VS Code）」のインストール
公式サイトからダウンロードしてインストール

##2.「VS Code」拡張機能のインストール
「VS Code」を起動する。
アクティビティバーの「Extensions（拡張）」アイコンをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83103/fbd9b120-b659-0119-aa91-9530685fbf6f.png)

以下の検索ボックスを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83103/65dd7e9c-f190-e4ea-b46e-89452b4d4314.png)

以下の拡張機能名を入力し、拡張機能をインストールしていく。

|拡張機能名              |説明                                                                          |
|------------           |------------------------------------------------------------------------------|
|.ejs                   |EJSファイル（HTMLのテンプレートファイル）に対して構文をハイライトしてくれる拡張機能。|
|Bracket Pair Colorizer |対となるカッコ色付けして見やすくしてくれる拡張機能。|
|ESLint |構文チェックするために必要な拡張機能。|
|Japanese Language Pack for Visual Studio Code|日本語化するために必要な拡張機能。|
|php cs fixer|PHPのコード整形するために必要な拡張機能。「PHP CS Fixer」や「PHP-CS-Fixer」など、似たような名前の拡張機能が存在するため、間違えないようにインストールしてください。|
|PHP Intelephense|PHPのコード補完をしてくれる拡張機能。|
|Vetur			|「.Vue」ファイルを扱うために必要な拡張機能。|
|GitLens			|Gitで管理しているファイルの変更点をショートカットキー等で開ける拡張機能。|
|Debugger for Chrome|VSCodeでフロントサイドのデバッグするための拡張機能。|

インストールを実行するには以下の「Install」ボタンを実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83103/4a18d169-318c-7494-1e2c-740a05ed37f8.png)

##3.「Node.js」のインストール
公式サイトからダウンロードしてインストール。

##4.phpインストール
公式サイトから「php-7.3.17-Win32-VC15-x64.zip」をダウンロードし解凍して任意の場所に配置。
配置したフォルダを環境変数PATHに追加
配置したフォルダに入り”php.ini-development”を”php.ini"でコピー。
php.iniを開き以下編集

```diff:[php.ini]
-;extension_dir = "ext"
-;extension=fileinfo
-;extension=mbstring
-;extension=gd2
+extension_dir = "ext"
+extension=fileinfo
+extension=mbstring
+extension=gd2

・・・

+extension=php_openssl
+extension=php_pdo_mysql
```

##5.「Composer（コンポーザー）」のインストール
公式サイトからダウンロードしてインストール。
Developer modeはチェック入れる
phpの場所は手順4の配置フォルダ中のphp.exeを指定
update this php.iniはチェック外してスキップ
proxyは未設定のままスキップ

##6.「SourceTree」のインストール
公式サイトから「SourceTreeSetup-2.6.10.exe」をダウンロードしてインストール。
求められるアカウント認証は作るかグーグルアカウントがあればそれでできます。

##7.「SourceTree」を使ってソースの取得
以下の「Clone」アイコンをクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83103/86c7cd1a-c933-6f6a-062c-8f33c8dec1e0.png)

以下のような画面が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83103/40a93c69-9a1d-f546-c569-7bbd0476e86c.png)

以下のとおり設定し、「クローン」ボタンを実行する。

|《設定内容》    | 《設定値》      |
|---------------|----------------|
|元のパス/URL    |https://develop.fan-technology.com/gitlab/InHouseDev/xxx.git|
|保存先のパス|{SourceTreeのワークパス}\{リポジトリ名}|
|名前|リポジトリ名|
|Local Folder|[ルート]|
|詳細オプション|※デフォルトのまま|

「Git Flow」メニューを実行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83103/abee613e-c29f-b7b7-5282-6a65fc46bf67.png)

デフォルト設定のまま「OK」ボタンを実行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83103/8f89356b-6b0f-af6b-622a-907c73f8e3cf.png)

「develop」のブランチが作成されたことを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83103/6b2a2b58-90f3-9fc2-ed87-f28a792c6c83.png)

##8.ライブラリで利用するモジュールをインストール
「Node.js」で使用している拡張機能の物理ファイル群（「node_modules」の中身）をインストールする作業です。
「laravel」で使用している拡張機能の物理ファイル群（「vendor」の中身）をインストールする作業です。

「コマンドプロンプト」を起動します。
以下のコマンドを入力して実行（Enterキー押下）し、「xxx」のソースがあるフォルダにカレントフォルダを設定します。

```sh
cd C:\Work\SourceTree\xxx
```
以下のコマンドを入力して実行（Enterキー押下）します。

```sh
npm install
```
初回はネットから落としてくるファイルが多いので10分ほどかかる場合があります。
つづいて以下のコマンドを入力して実行（Enterキー押下）します。

```sh
composer install
```
初回はネットから落としてくるファイルが多いので10分ほどかかる場合があります。


##9.DBセットアップ
resourceフォルダのmariadb-10.4.10-winx64.msiでデフォルト設定にて。	
rootユーザのパスワードは"root"で。	
※「HeidiSQL」というソフトが入ってしまうようですが、使わないので無視してください。	
		
##10.DBマイグレーション	
リポジトリ名のフォルダにコマンドプロンプトで入り以下実行	

```sh
php artisan migrate	
```
		
##11.初期データ投入	

```sh
php artisan db:seed	
```
※「class not found」などのエラーが出る場合は「composer dump-autoload」のコマンドを実行して再度試してください。	

##12.実行	
コマンドプロンプトを立ち上げてxxxのフォルダに移動	

```sh
php artisan serve	
```
コマンドプロンプトを立ち上げてxxxのフォルダに移動	

```sh
npm run watch
```

※ビルドが終わると自動でブラウザでサイトを開いてくれます。	
http://localhost:3000/	

また、browserSyncというホットリロードの仕組みを取り入れていますので、ソース系のファイル変更を検知してリビルドしてブラウザリロードしてくれます。

もしリロードしてほしくない場合は以下のURLでアクセスしてください。
http://localhost:8000/

##13.「Postman」のインストール
「Postman」はAPIの動作確認を行う際に有用なツール。
GUIで動くcurl。
公式サイトからダウンロードしてインストール。