フレクトのHeroku Lab

はじめまして、昨年の10月に入社した三宅です。 フロントエンドを中心に、JavaScriptを得意としています。

今回は、MEANアプリをHerokuへデプロイするまでを書いていきます。

MEANとは

MEANはWebアプリケーションを開発するためのスタック(環境)です。 以前からWebアプリの開発でよく用いられていたLAMP(Linux/Apache/MySQL/PHP)に代わる構成として、最近注目を集めています。

MEANスタックは次の技術で構成されています。
* M: MongoDB
* E: Express
* A: AngularJS
* N: Node.js

これらで構成されるMEANスタックは、
* フロントエンドからバックエンドまでJavaScriptで開発できる
* 全てのデータのやり取りをJSONフォーマットで行う
という特徴があり、アプリケーション全体をシンプルに開発することができます。

MEAN.IO

MEAN.IOは、Linnovateによるオープンソースプロジェクトで、MEANアプリを素早く構築するためのコマンドラインツールなどを提供しています。
今回は、このMEAN.IOを用いてローカルにMEANアプリを構築し、それをHerokuへデプロイしたいと思います。

MEAN.IOのインストール

まず、MEAN.IOのインストールを行います。
今回はMax OS 10.10.3で試しましたが、もちろんLinuxやWindowsでもサポートされています。
OSXではNode.js、MongoDB、gitなど、MEAN.IOの前にインストールが必要なものがあります。
MEAN.IO Documentationを参考にしてください。

MEAN.IOはnpmパッケージとして提供されており、次のコマンドでインストールします。

$ npm install -g mean-cli

この時、Node.jsのv0.10.xを必要とする旨が表示されますが、最新のNode.jsのバージョンはv0.12.2となります。
最新のv0.12.2とv0.10系の最新であるv0.10.38の両方で試してみましたが、私の環境ではどちらとも問題なく動作しました。

インストール完了後、次のコマンドでバージョンの確認ができます。

$ mean -v

このブログを書いている時点では、0.9.29でした。

MEAN.IOによるアプリケーションの作成

作業ディレクトリに移動後、次のコマンドを実行することでMEANアプリが生成されます。

$ mean init 

この操作でGithubのリポジトリからソースコードがCloneされるのですが、「--depth 1」のオプションで実行され最新のソースファイルのみローカルにコピーされます。
ローカル環境で動作させるだけなら特に問題ないのですが、Heorkuにデプロイする際にはリポジトリの全てのデータをcloneしておく必要があります。
生成されたアプリケーションのルートディレクトリで次のコマンドを入力することで、全てのデータを取得することができます。

$ git fetch --unshallow

生成されたアプリケーションを、ローカルで動かしてみます。
アプリケーションのルートディレクトリに移動して依存するパッケージをインストールして、タスクを実行します。

$ npm install
$ gulp

localhost:3000でアプリケーションが起動します。
アプリケーションにはユーザ管理の機能も用意されており、ブラウザからユーザの登録を行うと、ローカルのMongoDBにドキュメントが保存されることを確認することができます。

MEANアプリのHerokuへのデプロイ

続いて、MEAN.IOによって生成されたアプリをHerokuへデプロイします。

アプリケーションのルートディレクトリで次のコマンドを入力し、Herokuアプリを作ります。

$ heroku apps:create 

次に、作成したHerokuアプリにMongoDBのアドオンを追加します。MongoDBのアドオンはいくつかありますが、今回はMongoLabを利用しました。

$ heroku addons:add mongolab:sandbox

configにMongoDBへのパスがMONGOLAB_URIとして登録されるので、Herokuにデプロイした際にそのDBを利用できるように設定ファイルを更新します。
config/env/production.jsのdbを次のように変更します。

db: process.env.MONGOLAB_URI

続いて、ビルドパックの設定と、Herokuの環境変数の設定を行います。

$ heroku config:add BUILDPACK_URL=https://github.com/mbuchetics/heroku-buildpack-nodejs-grunt.git
$ heroku config:set NODE_ENV=production

いよいよHerokuへのデプロイです。変更をコミットし、HerokuのGitリポジトリにpushします。

以上で、Heroku上でMEANアプリを動かすことができます。

実際のサービスを構築するにあたっては、考えなければいけないことはいろいろとありますが、素早くMEANアプリを試してみたいという場合にはMEAN.IOは非常に強力です。
また、一からMEANアプリを開発する場合にも生成されるアプリケーションの構成は非常に参考になるかと思います。
この記事を読んで、もしMEANに興味を持たれましたら、ぜひMEAN.IO + Herokuを試してみてください。