MeteorをHelloWorld、からの手動デプロイまで

開発の勢いが止まる気配のないリアルタイムWebアプリケーションフレームワーク「Meteor」をついにHelloWorldしてみた。 # Meteorを使うメリット + なんといってもリアクティブ（Webアプリのパラダイムシフトの予感♥） + MEANスタックよりも導入が簡単 + ライブラリの開発・導入が楽。基盤となるのはNode.jsなのでnpm資産も使える + ES2015 JavaScript (ES6) が使える（これ何気に重要だよね） + サーバサイドとクライアントサイドでコード共有（validationとか楽になりそう） + フルスタックFWにしては**＊割と＊**自由度高め？ + ~~そのまま *.meteor.com にデプロイできる~~ というわけでとりあえずHelloWorldしてみます。 # まずはMeteorインストール ```bash curl https://install.meteor.com/ | sh ``` # プロジェクト作成 ``` $ meteor create hoge $ cd hoge ``` # 実行してみる node.js、mongodb がすでにインストール済みという前提で、 ``` $ meteor npm install $ meteor [[[[[ ~/akirattii/hoge ]]]]] => Started proxy. => Started MongoDB. => Started your app. => App running at: http://localhost:3000/ ``` この時点で http://localhost:3000 にアクセスしたらサンプルが表示される。 実際はここでゴリゴリコーディングしていくことになるが、今回はプロジェクト作成からデプロイまでの大まかな流れだけを紹介したかったので端折る。 # サーバサイドのデバッグ まずMeteorをデバッグモード ```meteor debug``` で起動。 ``` $ meteor debug [[[[[ ~/akirattii/hoge ]]]]] => Started proxy. => Started MongoDB. Your application is now paused and ready for debugging! To debug the server process using a graphical debugging interface, visit this URL in your web browser: http://localhost:8080/debug?port=5858 ``` 上記のようにログにデバッグ用URL (http://localhost:8080/debug?port=5858) が表示されるので、それをChromeで開く。 するとChrome DevTools風の画面が開いてサーバサイドのデバッグが可能となる。 ちなみにクライアントサイドのデバッグについては、普通にChromeから ```Ctrl+Shif+I``` を実行して Chrome DevTools を使ってやればOK。 # デプロイしてみる 無難に行くなら[SIGN UP - Meteor Developer Account](https://www.meteor.com/sign-up)でアカウント作成して有償の[Galaxy](https://galaxy.meteor.com/)を使ってデプロイだが（Meteor公式推奨）、今回はお金を掛けずにもっと泥臭い方法でやってみる。 （実際 Meteor のデプロイはちょっとめんどくさい） ### 1. まずはビルド プロジェクトルートの一つ上の階層にoutputフォルダを作成して、そこにビルドパッケージ(hoge.tar.gz)を出力 ``` $ mkdir ../output $ meteor build ../output ``` ### 2. サーバに転送 ``` $ scp ../output/hoge.tar.gz akirattii@myserveraddr:/path/to/upload/location ``` ### 3. サーバで展開＆インストール ``` $ ssh akirattii@myserveraddr $ cd /path/to/upload/location $ tar -zxf hoge.tar.gz $ cd /path/to/unpacked/bundle/programs/server $ npm install ``` ※ここで依存関係のエラーが出まくったので依存モジュールを手動でシコシコと npm install した。。。 ### 4. アプリを起動 こちらも node.js、mongodb がすでにインストール済みという前提で、 ``` $ PORT=3000 ROOT_URL=http://localhost MONGO_URL=mongodb://localhost:27017/hoge node main.js ``` これで http://myserveraddr:3000/ で立ち上がっていることを確認できるはず。 # nginxとの連携 nginxでのリバースプロキシ設定は[nginxとnode.jsの連携](http://trycatchand.blogspot.jp/2015/06/nginx-nodejs-express.html)を参考にどうぞ。 # 感想 Meteorは革新的でとても素晴らしいフルスタックフレームワークです。 個人的にフルスタックFWというのはあまり好みではなかったのですが、Meteorは柔軟なのでちょっといい感じ。 デメリットといえば手動デプロイが少し面倒なことかな。 # リンク [Meteor Guide](http://guide.meteor.com/)