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
-
composerなかったら、[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
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
記載が終わったら、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
で、下記画像みたいに設定する。
## 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