JSフレームワークMeteor入門 & Herokuデプロイまで


10/10に開催された JavaScript Framework - Meteor のハッカソン
でいろいろ話を聞いて興味を持ち始めて、Meteorのチュートリアル
を触ってHerokuにpushした時に少しハマったのでメモです。

Meteorは簡単にいうとクライアントもサーバも一緒にJSで書ける、リアルタイムWebアプリケーションのためのフレームワークのようです。
チュートリアルを触るとわかりますが、SPA(シングルページアプリケーション)が簡単に作れるのはたしかに感動ものです。
その代わりにデメリットとして割り切っている部分も多い印象です。

基本的にはMeteorの特徴を理解して、「特徴にマッチする」アプリケーションのアイデアがある時に使うことをオススメします。


😀 Meteor入門

Meteor入門時に参考になりそうなページはこちら。

🍣 Meteor Mac環境構築の手順

MacのMeteorのインストール手順はこれだけ。

curl https://install.meteor.com/ | sh

(もしかしたらNode.jsとか、MongoDBのセットアップが必要かもしれません。..)

🗽 Herokuへの公開

公式チュートリアルがすごく良くできているので今回は、サンプルアプリケーションができた時にHerokuにプッシュする手順を書いておきます。

# サンプルアプリの作成(チュートリアルを作成済の場合は省略)
meteor create --example todos
# アプリのプロジェクトフォルダに移動
cd todos
# git リポジトリの作成
git init
# git first commit!
git add . -A
git commit -m "Sample todos app!"
# 一番人気のbuildpackはこちら => https://devcenter.heroku.com/articles/third-party-buildpacks
# 一番人気のbuildpackは、残念ながらnode.jsのバージョンが少し古いので今回はforkしたものを利用
# (0.10.40が必要だか、0.10.36が指定されている)
heroku create --buildpack https://github.com/TFarla/heroku-buildpack-meteor.git
# mongolabのアドオンを追加
heroku addons:create mongolab:sandbox
# MongoDBのURLを設定
heroku config:add MONGO_URL=<insert_value_of_MONGOLAB_URI_here>
# MongoDBのルートURLを設定
heroku config:add ROOT_URL=<insert_url_created_above_here>
# 1つのdynoで動かすための設定
heroku labs:enable http-session-affinity
# Heroku に deploy
git push heroku master

これで、2015/10/12時点ではうまくいきました。多分、Meteorは頻繁にアップデートがあると思うので動かなかったら、
@zunnosukeに声をかけてください!

🚕 Meteorのサンプルソース

触り始めたばかりですが、サンプルが結構充実しているので、サンプルを見ながらMeteorの実装を勉強していきたいと思います!

meteor create --list
Available examples:
clock
leaderboard
localmarket
simple-todos
simple-todos-angular
simple-todos-react
todos
# こんな感じでサンプルソースを取得できます!
meteor create clock
# github にはここにあります。
https://github.com/meteor/meteor/tree/devel/examples

そのほかGitHubで気になったリポジトリです。今度じっくり読んでみます。

😼 リンク集

🐮 Speical Thanks

📚 おすすめの書籍