初めてのフレームワーク-Laravel5-6 Laravel開発環境まとめ

# Laravel & Markdown記法の勉強及びメモとして書いています。
間違えている点ございましたら、ご指摘いただけますと幸いです。
よろしくお願いいたします。

# Laravelでの環境構築
Laravelで開発するときに使う設定メモです。

* 仮想サーバ(vagrant + homestead)利用 [HomesteadのVer一覧](https://atlas.hashicorp.com/laravel/boxes/homestead)から、好きなVer選べます。
* IDEはPhpStorm(有料。30日間無料期間あり。)
* scss/es6 のコンパイルは、Laravel Elixir

## Laravel Homesteadの準備
[Laravel homesteadを利用したLaravel 5 ローカル開発環境の構築](http://blog.hrendoh.com/setting-up-laravel-local-dev-environment-with-homestead/)
を参考にしています。
### 1.仮想開発環境生成
#### homesteadのboxを取得
```
$ cd ~
$ vagrant box add laravel/homestead
```
Enter yout choice は1を選択。

* vagrant、virtualboxをinstallしていない場合は、を参考にinstallしてください。

#### Homesteadを git cloneし、設定ファイルを記載
```
$ git clone https://github.com/laravel/homestead.git Homestead
$ cd Homestead/
$ bash init.sh
$ cd ~
$ mkdir Code
$ vi ~/.homestead/Homestead.yaml
```
Homestead.yamlに以下を記載

```
---
ip: "192.168.10.10"
memory: 2048
cpus: 1
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: ~/Code
      to: /home/vagrant/Code

sites:
    - map: homestead.app
      to: /home/vagrant/Code/Laravel/public
    - map: test.homestead.app
      to: /home/vagrant/Code/test/public

databases:
    - homestead
    - laravel
    - test
```

* sitesに2つmapを書くと、2つのサイトを追加できる。
* databasesに書いたテーブルがデフォルトで作成される。
* ~/.ssh/id_rsaがなければ、[gitHubでssh接続する手順~公開鍵・秘密鍵の生成から~](http://qiita.com/shizuma/items/2b2f873a0034839e47ce)を参考に作成。

#### ホストを追加
```
$ sudo vi /etc/hosts
```

hostsに以下を記載

```
192.168.10.10   homestead.app
192.168.10.10   test.homestead.app
```
* 今回は二つサイトを追加しているので、2つ記載。

#### Vagrantを起動
```
$ cd ~/Homestead
$ vagrant up
```


### 2.git cloneし、Laravelの設定ファイルを作成

```
$ cd ~/Code
$ git clone git@github.com:*****/***.git Laravel
$ cd Laravel
$ composer install
$ cp .env.example .env
$ php artisan key:generate
```

* composerなかったら、[[PHP]Composerを導入＆初めてのパッケージインストールまで](http://vdeep.net/php-composer)を参考にインストール

* 新規作成の時は、代わりに下記を実行

```
$ cd ~/Code
$ composer create-project laravel/laravel --prefer-dist Laravel
```


### 3.仮想サーバーでDB作成
```
$ cd ~/Homestead
$ vagrant ssh
//以下仮想サーバ
$ cd Code
$ cd Laravel
$ composer dump-autoload
$ php artisan migrate
$ php artisan db:seed
```

### 4.確認
http://homestead.app/
にアクセスできたら、vagrant 起動成功！！

## PhpStormセットアップ
下記ページを主に参考にしています。  
[PhpStormで効率良く開発するための設定その1](http://www.karakaram.com/phpstorm-settings1)
[PhpStormで効率良く開発するための設定その2](http://www.karakaram.com/phpstorm-settings2)

### 1.xdebugを有効にする

仮想サーバで以下を実施

```
$ sudo vi /etc/php/7.0/fpm/conf.d/20-xdebug.ini
```
```
zend_extension=xdebug.so

xdebug.remote_enable = on
xdebug.remote_connect_back = on
xdebug.idekey = "vagrant"
```

phpを再起動``$ sudo service php7.0-fpm restart``

### 2.PhpStormのdebug機能使用
[How to Install Xdebug with PHPStorm and Vagrant](https://www.sitepoint.com/install-xdebug-phpstorm-vagrant/) 
を参考に設定。

### 3.PhpStormからPHPUnitを実行
[Vagrantユーザに朗報！PhpStorm8ではPHPUnitをSSH経由で実行できる](http://www.karakaram.com/phpstorm-phpunit-over-ssh)
を参考に設定
わからなかったところだけメモ

#### Develop設定

##### Connection
ローカルで、
```$ cd ~/Homestead
$ vagrant ssh-config```
と実行すると、出てくる設定情報をConnection画面に記載

* HostName:SFTP host
* Port:Port
* User:User name
* Auth type:"key pair"
* Private key file:IdentityFile

![スクリーンショット 2016-06-15 0.14.40.png](https://qiita-image-store.s3.amazonaws.com/0/72886/6aa2a43b-8083-d073-d26e-b6f9901d0034.png)

記載が終わったら、Test SFTP connectionボタンを押して、うまくいくか確認。
AutoDetectボタンも押す。

##### Mappings
Development path on homesteadに
/Code/Laravel　を記載

#### PHPUnit を設定する
##### リモートマシンの PHPUnit の読み込み方法を設定
path to script に
``/home/vagrant/Code/Laravel/vendor/autoload.php``

default configure fileに
``/home/vagrant/Code/Laravel/phpunit.xml``
を記載

### github設定
Preferences > Version Control > Github
Auth type をTokenにして、
https://github.com/settings/tokens
ここで作成したTokenを記載。
設定したら、下部に 9: Version Control があるので、そこで git add とか commit　とかできる。

### 基本設定

##### Editor > General  
* Use soft wrap in editor チェック

##### Editor > General > appearance
* show line numbers チェック
* show whitespaces チェック

##### Editor > Code style > PHP
* set from... から、PSR1/PSR2を選択

## フロント開発環境整備

### Laravel Elixir
laravel elixirはvagrant上でも使えるんですが、実行時のお知らせが出てこないので、ローカルで使うように設定。

#### node, npm インストール
[nodebrewでnodeとnpmのバージョン管理しよう(Mac編)](http://www.websuppli.com/nodejs/424/)
を見ながら、nodeとnpmをインストール

#### node_module インストール

```
cd ~/Code/Laravel
npm install
sudo npm install gulp -g
```

#### gulpfile.js　設定
gulpfile.jsを設定

```
var elixir = require('laravel-elixir');
var gulp = require('gulp');
var sass = require('gulp-sass');

elixir(function(mix) {
    mix.browserify('app.js')
      .sass('app.scss');
});

```

この設定をすれば、今後
``$ gulp watch``で、``/resources/assets/sass/app.scss``  を編集するたびに、コンパイルが行われて、``/public/css/app.css``ができ、  
``/resources/assets/js/app.js``を編集するたびに、コンパイルが行われて、``/public/js/app.js``が、できる。

#### ES lint設定
JavaScriptの静的検証ツール
``$ sudo npm install eslint -g``
これの利用には、.eslintrc ファイルが必要 
[ESLint 最初の一歩](http://qiita.com/mysticatea/items/f523dab04a25f617c87d)
を参考して、新規作成。
Language & Frameworks > JavaScript > Code Quality Tools > ESlint
で、下記画像みたいに設定する。

![スクリーンショット 2016-06-15 0.15.23.png](https://qiita-image-store.s3.amazonaws.com/0/72886/262bdce5-3b3e-edf1-106a-31945df137b9.png)

## Laravel開発補助機能
[PhpStormでlaravel5.2を使う](http://qiita.com/ozy-san/items/d1a32941b43244f5c19d)
[【Laravel5.2】PhpStormでLaravelを使って快適に開発してみた【備忘録】](https://gist.github.com/nkbt/9efd4facb391edbf8048)
を参考

#### PhpStorm Plugin インストール
Preferences > Plugins > Browse repositories  
より Laravel Plugin　をインストールしてPhpStorm再起動。

#### Composer からインストール
composer.jsonに

```
"require-dev": {
    ...,
    ...,
    "barryvdh/laravel-ide-helper": "@dev",
    "barryvdh/laravel-debugbar": "^2.1"
}
```

上記のように、二つ追加して、``composer update``
その後、``config/app.php``に、

```
'providers' => [
    ...,
    ...,
    Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider::class,
    Barryvdh\Debugbar\ServiceProvider::class,
],
```

を追加し、``php artisan ide-helper:generate``を実行。

#### 現在のgitignore設定メモ
```
/vendor
/node_modules
/public/storage
Homestead.yaml
Homestead.json
.env
/.idea
/_ide_helper.php
*.map
```