Webアプリの環境をYeomanで整えた話
これはなに
日記です。
そろそろWebアプリとか作って遊びたいなと思ったので、
Yeomam と AngularJS を使って環境を構築しました。
あとは Webサーバ をアレコレして、外部からアクセスできるようにしました。
というかWebサーバを建てる話って案外少なくて、みんな常識みたいにしてるけどそういうもんなのかな…それはまた次の話。
Yeoman
新規にWebアプリを作成するにあたって、MVCモデルを使いたかったけどどのようなディレクトリ構成にすればいいか分かりませんでした。
ググってもいい感じなのがでてこないし、JavaScriptじゃなくてCoffeeScript使いたいし…とか思っていたら Yeoman というものに出会いました。
Yeomanとは
AngularJSを使ったWebアプリケーションのひな形を作ってくれるやつらしいです。
AngularJS
JavaScriptのフレームワークです。なんかいい感じにしてくれるらしい(適当)。
フレームワークどれにしようかと思ったけど最近アツいっぽいのでとりあえず導入してみました。
インストール
Node.jsを適当にbrewなりなんなりでインストールしたあと、
% node -v
% npm -v
で node と npm が入っていることを確認。
% npm install -g yo
% npm install -g generator-angular
で必要なものをインストールして完了です。
あとは作成したいディレクトリに % cd
して
% yo angular
で終わり。いろいろ聞かれるので、とりあえず全部 No を選択していいと思います。
ちなみにぼくは CoffeeScript で生成したかったので、
% yo angular --coffee
としました。これでAngularJS, CoffeeScriptのYeomanプロジェクトができました。めでたし。
% grunt server
とすれば、デフォルトではlocalhostの9000番ポートにアプリが立ち上がります。めでたし。
チーム開発するとき
チーム開発のときは、予め作成されたプロジェクトをクローンして作業することになるわけです。
そのときはちょっと方法が違うのでメモ。
node, yo, grunt など上で整えた環境が入っているとします。
% git clone なんかリポジトリ.git
で対象のリポジトリをクローンしてきたら、
% cd リポジトリのディレクトリ
でディレクトリに入ります。それから、
% npm install
% bower install
で設定ファイルをインストールしてから
% grunt server
これでおわり。
外部に公開のものだったら、 Gruntfile.js
の hostname が localhost になっていない可能性があるので、手元で実行したかったら変更を忘れずに。
まとめ
まだ環境を整えただけで開発してないのでなんとも言えない部分はありますが、
ひな形が欲しかったので手軽に構築できてとてもハッピーになりました。
参考サイト
今回紹介したものをもっとくわしく述べているサイトがいっぱいあるのでこっちをみるといいです。