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

動作の確認がとれたら 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を作っておきましょう。

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) {
の中に追加してください・

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
      }],

記載例

Gruntfile.js

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

③middlewareにproxySnippetを追加

記載例

Gruntfile.js

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

④serveにconfigureProxiesを追加

記載例

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オフィシャルで確認してみてください。

今回の起動方法は以下です。

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が表示されるはずです。

おわりに

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