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

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

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

##2.「VS Code」拡張機能のインストール
「VS Code」を起動する。
アクティビティバーの「Extensions（拡張）」アイコンをクリック。

以下の検索ボックスを選択。

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

拡張機能名	説明
.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」ボタンを実行する。

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

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

[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」アイコンをクリックする。

以下のような画面が表示される。

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

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

「Git Flow」メニューを実行。

デフォルト設定のまま「OK」ボタンを実行。

「develop」のブランチが作成されたことを確認する。

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

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

cd C:\Work\SourceTree\xxx

以下のコマンドを入力して実行（Enterキー押下）します。

npm install

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

composer install

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

##9.DBセットアップ
resourceフォルダのmariadb-10.4.10-winx64.msiでデフォルト設定にて。
rootユーザのパスワードは"root"で。
※「HeidiSQL」というソフトが入ってしまうようですが、使わないので無視してください。

##10.DBマイグレーション
リポジトリ名のフォルダにコマンドプロンプトで入り以下実行

php artisan migrate	

##11.初期データ投入

php artisan db:seed	

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

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

php artisan serve	

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

npm run watch

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

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

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

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