HerokuにMEANアプリをデプロイする
はじめまして、昨年の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を試してみてください。
コメント