書いてあること
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を開き以下編集
-;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/csf.git |
| 保存先のパス | {SourceTreeのワークパス}{リポジトリ名} |
| 名前 | リポジトリ名 |
| Local Folder | [ルート] |
| 詳細オプション | ※デフォルトのまま |
「Git Flow」メニューを実行。
デフォルト設定のまま「OK」ボタンを実行。
「develop」のブランチが作成されたことを確認する。
8.ライブラリで利用するモジュールをインストール
「Node.js」で使用している拡張機能の物理ファイル群（「node_modules」の中身）をインストールする作業です。
「laravel」で使用している拡張機能の物理ファイル群（「vendor」の中身）をインストールする作業です。
「コマンドプロンプト」を起動します。
以下のコマンドを入力して実行（Enterキー押下）し、「csf」のソースがあるフォルダにカレントフォルダを設定します。
cd C:\Work\SourceTree\csf
以下のコマンドを入力して実行（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.実行
コマンドプロンプトを立ち上げてcsfのフォルダに移動
php artsan serve
コマンドプロンプトを立ち上げてcsfのフォルダに移動
npm run watch
※ビルドが終わると自動でブラウザでサイトを開いてくれます。
http://localhost:3000/
また、browserSyncというホットリロードの仕組みを取り入れていますので、ソース系のファイル変更を検知してリビルドしてブラウザリロードしてくれます。
もしリロードしてほしくない場合は以下のURLでアクセスしてください。
http://localhost:8000/
13.「Postman」のインストール
「Postman」はAPIの動作確認を行う際に有用なツール。
GUIで動くcurl。
公式サイトからダウンロードしてインストール。