yo angularで雛形を作ってバックエンドはPHPを使う開発環境

# はじめに
毎日仕事で「AngularJS」と「Node.js」を使っていて、「AngularJS」の良さと「Grunt」の便利さにすっかり魅了されています。

しかし、バックエンド環境として考えた時の「Node.js」は良くも悪くも非同期の事とか考慮点が多いんで、サクッと何かしたい時は使い慣れた「PHP」のほうが便利かなと思い環境を構築しようと考えました。

# 前提
* Yeoman,Gruntが一通りセットアップされていて、yoでジェネレート出来る事
* PHPがインストール済みでバージョンは5.4以降

# 何がしたいか？
* Gruntを使いたい
* フロントは AngularJSを使いたい
* バックエンドはPHPを使いたい
* 別にPHPはLivereload出来なくてOK
* PHPはビルトインサーバーを使いたい

# STEP1 yo angular
#### 何はともあれ yo angular

**①適当なディレクトリで以下のコマンドを実行**

```
mkdir testapp
cd testapp
yo angular [app-name(何か適当に)]
```

**②動作確認**
上記の例の場合
testappディレクトリ
で
```grunt serve```
を実行します。

立ち上がって「'Allo, 'Allo!」の画面が出ていればOK
![スクリーンショット 2015-03-08 12.40.38.png](https://qiita-image-store.s3.amazonaws.com/0/65968/8cb1d510-c8f7-c901-2bd0-b6b5c189cbaa.png)


動作の確認がとれたら Ctrl + Cで一旦 Gruntは落としましょう

# STEP2 php実行フォルダ作成
STEP1で作ったtestappディレクトリ直下に作成
```
cd testapp 
mkdir php (これがphp実行用のフォルダ)
```
#### ここまでの確認
このタイミングで以下のフォルダ構成になっているはずです。

**testapp**
┝Gruntfile.js
┝README.md
┝app
┝bower.json
┝bower_components
┝node_modules
┝package.json
┝php　**←【これが今作ったフォルダ】**
┝test

動作確認用にphpフォルダ内にindex.phpを作っておきましょう。

```php:index.php
<?php

echo "test";
```

# STEP3 grunt-connect-proxyを入れる
#### 何をする為に必要か？
このパッケージを入れるとGruntでproxy機能を利用出来るようになります。

**今回やろうとしている例の場合**
Gruntはポート9000番で立ち上げて、phpを8080で立ち上げた場合に 9000番のアクセスで 8080で立ち上げているphpサーバへアクセスが出来るようになります。

#### インストール
npm install grunt-connect-proxy --save-dev
(環境によってはsudoで)

# STEP3 Gruntfile.jsの設定
testapp/Gruntfile.js を開きます。

**①冒頭でgrunt-connect-proxyをrequire**
``module.exports = function (grunt) {``
の中に追加してください・

```js:Gruntfile.js
module.exports = function (grunt) {

//以下を追加
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;

```

**②connect:内にproxiesの設定を追加**
この設定を行うと 
localhost:9000/phpで
localhost:8080へアクセスが出来るようになります。

```
proxies: [
      {
        context: '/php',
        host: 'localhost',
        port: 8080
      }],
```


記載例

```js:Gruntfile.js
connect: {
      options: {
        port: 9000,
        hostname: 'localhost',
        livereload: 35729
      },
      //ここから↓
      proxies: [
      {
        context: '/php',
        host: 'localhost',
        port: 8080
      }],
      //ここまで追加↑
      livereload: {

```
**③middlewareにproxySnippetを追加**

記載例

```js:Gruntfile.js

livereload: {
        options: {
          open: true,
          middleware: function (connect) {
            return [
            proxySnippet, //この行を追加

```

**④serveにconfigureProxiesを追加**

記載例

```js:Gruntfile.js
grunt.registerTask('serve', 'Compile then start a connect web server', 
function (target) {
    if (target === 'dist') {
      return grunt.task.run(['build', 'connect:dist:keepalive']);
    }

    grunt.task.run([
      'clean:server', 
      'configureProxies',  //この行を追加

```

# STEP4 PHPビルトインサーバーの起動
#### ビルトインサーバーとは？
PHP 5.4以降で提供されるPHP実行環境です。

**使用例**
実行したいディレクトリに移動して
php -S localhost:8000
とするとそのディレクトリ配下がphpサーバーとしてポート8000番で動作します。

詳細は[PHPオフィシャル](http://php.net/manual/ja/features.commandline.webserver.php)で確認してみてください。

#### 今回の起動方法は以下です。
```
cd testapp/php

php -S 0.0.0.0:8080
```

#### 注意点
良く知られているビルトインサーバーの起動方法
```
php -S localhost:8080
```
でも起動しますが、そうすると**GruntからPHPアクセスした時にエラーになります。**

知らずに php -S localhost:8080 で起動していたところ、 Gruntでエラーを吐いてしまいました。

```
Fatal error: connect ECONNREFUSED
Fatal error: socket hang up
```

ビルトインサーバーについてオフィシャルドキュメントをきちんと確認したところ、以下の記載がありました。

>ウェブサーバーを、任意のインターフェイスからポート 8000 でアクセスできるようにするには、このようにします。
$ php -S 0.0.0.0:8000

このように、**Grunt経由で使う場合は必ず php -S 0.0.0.0:ポート番号 で起動してください。**

# STEP5 Gruntの起動と動作確認

**grunt serveで起動します。**
今回の場合は

```
cd test
grunt serve
```

コンソールに以下のような表示があれば正常にproxy設定は動作しています。

```
Running "configureProxies" task
Proxy created for: /php to localhost:8080
```

問題無く起動すれば「'Allo, 'Allo!」の画面が表示されるはずです。

ここで、localhost:9000/php
にアクセスしてみましょう。


STEP2で作ったindex.phpが表示されるはずです。

![スクリーンショット 2015-03-08 12.39.52.png](https://qiita-image-store.s3.amazonaws.com/0/65968/47954817-a463-ebea-49b4-4a89e42feca3.png)


# おわりに
今回、動作確認をブラウザで行いましたが、実際の使い方としては AngularJSの**$resource**や**$http**の通信で今回作った /php配下のファイルを実行するような感じかと思います。