Laravel & Markdown記法の勉強及びメモとして書いています。

間違えている点ございましたら、ご指摘いただけますと幸いです。
よろしくお願いいたします。

Laravelでの環境構築

Laravelで開発するときに使う設定メモです。

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

Laravel Homesteadの準備

Laravel homesteadを利用したLaravel 5 ローカル開発環境の構築
を参考にしています。

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接続する手順~公開鍵・秘密鍵の生成から~を参考に作成。

ホストを追加

$ 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

$ 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
PhpStormで効率良く開発するための設定その2

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
を参考に設定。

3.PhpStormからPHPUnitを実行

Vagrantユーザに朗報！PhpStorm8ではPHPUnitをSSH経由で実行できる
を参考に設定
わからなかったところだけメモ

Develop設定

Connection

ローカルで、

$ 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