MEANスタック：AngularJS Full-Stack generatorをHelloWorld

最近、MEANスタック探しにハマっているakirattiiです。 今回は[AngularJS Full-Stack generator](https://github.com/angular-fullstack/generator-angular-fullstack)を試してみました。 # 試した環境 OS: Ubuntu 14.04.4 LTS MongoDB: v3.0.12 NodeJS: v6.2.1 では、まずはインストールから。 # インストール ``` $ sudo npm install -g yo grunt-cli gulp-cli bower generator-angular-fullstack ``` # プロジェクトの雛形生成 ``` $ mkdir myproject && cd $_ $ yo angular-fullstack myapp ``` 何点か質問を聞かれますが基本はテキトーにEnterキー連打でOK。 ただ、今回はなんとなく ```Would you like to include additional oAuth strategies?``` という質問のとこだけは ```Google```, ```Facebook```, ```Twitter``` と全部選んでみました。[面倒なOAuth連携部分をPassportかなんか](http://trycatchand.blogspot.jp/2015/05/How-to-make-a-simple-Google-OAuth-webapp-using-Express4-Passport.html)で作ってくれるんじゃないかという期待から。 そうこうしているうちに（5分ぐらい掛かった）、ようやくscaffoldができました。プロジェクトのファイル/フォルダ構成はざっくりと以下の通り。主にクライアント側の開発では client/app 配下を実装し、サーバサイド側では server/ 配下を実装していくことになる。 ``` . ├── README.md ├── bower.json ├── client │   ├── app/ │   ├── assets/ │   ├── bower_components/ │   ├── components/ │   ├── favicon.ico │   ├── index.html │   └── robots.txt ├── e2e │   ├── account/ │   ├── components/ │   └── main/ ├── gulpfile.babel.js ├── karma.conf.js ├── mocha.conf.js ├── mocha.global.js ├── node_modules/ ├── package.json ├── protractor.conf.js └── server ├── api/ ├── app.js ├── auth/ ├── components/ ├── config/ ├── index.js ├── routes.js └── views/ ``` 早速試してみる。 # 実行 ``` $ gulp serve ``` これでサーバが起動します。 起動が完了すると自動でブラウザで立ち上がり http://localhost:9000/ が開かれる。 # ビルド ``` $ gulp build ``` これでビルドが完了、、、と思ったらエラーでますた。検索したら[gulp-header update bug #124](https://github.com/miickel/gulp-angular-templatecache/issues/124) で gulp-header をアップデートしろや！とのことでしたので、package.json に ```"gulp-header": "1.8.2" ``` を仕込んで npm install & gulp build したら上手く行きました。 ``` ... "devDependencies": { ... "gulp": "^3.9.1", "gulp-header": "1.8.2", ... ``` # プレビュー実行 ``` $ gulp serve:dist ``` これでビルド後の成果物をプレビュー実行できる。 # デバッグ クライアントサイドのデバッグはもちろん Chrome DevTools だけでOKだけど、サーバサイドのデバッグはどうすればいいかというと、 ``` $ gulp serve:debug ``` でOK。 これで node-inspector が起動するので http://127.0.0.1:8080/?port=5858 とかにアクセスすれば Chrome DevTools で普通にデバッグできてしまいます。Fantastic! # デプロイ 自前のサーバにデプロイしたい時は、ビルドで生成された dist ディレクトリをまるごとサーバ側へコピーし、以下のコマンドでnodeサーバを起動すればOK ``` $ export NODE_ENV=production; export PORT=9000; node dist/server/app.js ``` [nginxとの連携はこちらを参照](http://trycatchand.blogspot.jp/2015/06/nginx-nodejs-express.html)。 nginxの設定ファイルの ```proxy_pass``` には ```http://127.0.0.1:9000``` を設定しましょう。 HelloWorldは以上となります。 # 感想 AngularJS Full-Stack generatorのおかげでフルスタックの良さを知ることができました。ただ、どうしてもMeteorに比べると学習コストが高そうな感じがしますね。