Node.js + Express を Heroku で動かすまでの手順まとめ
普通の JavaScript も jQuery もまともに書けないけど、はじめての Web アプリを Node.js でつくってみるという奮闘記。
環境つくるだけなのに何も分からなすぎてハマりすぎて、この一連の流れだけで丸2日潰れるという大惨事だったので、ちゃんとブログに残しておく。
Node.js のインストール
Node.js の INSTALL ボタンから、インストーラを使って入れることもできるけど、Node.js のバージョンを切り替えて使える方が便利だと思うので、前回のエントリを参考に nodebrew を使ってインストールするのがオススメ。 ●node.js 入れるなら nodebrew が超簡単 - tacamy memo インストールが正しくできているか確認のため、Node.js のバージョンを表示。$ node -v
npm のインストール
Node.js にはたくさんのモジュールパッケージが用意されていて、それらを簡単に導入できるのが npm という Node.js のパッケージ管理ツールです。 最近のバージョンの Node.js では、Node.js と一緒に npm もインストールされるようです。念のため、自分の Mac に npm がインストールされているかの確認のため、バージョンを表示。$ npm -v
Express のインストール
Express は 動的なWebサイトをつくるための基本機能が揃ったフレームワークです。有名らしいのでこちらを使うことにしました。ただ、現在のバージョンは 3.1.0 なのですが、ブログで書かれている内容は 2.x 系の場合が多く、3.x 系でだいぶ変わったそうなので、本家のドキュメントを参考にするといいそうです。英語だけど・・。 Express はグローバル環境にインストールすると、expre
ss
コマンドがターミナルで使えるようになるそうなので、下記のように実行してインストールします。-g
はグローバルという意味です。
$ npm install -g express終わったら念のため、バージョンを表示してインストールの成功を確認します。
$ express --version
プロジェクトをつくる
express
コマンドを使うことで、プロジェクトを生成できます。例として﹁sample﹂プロジェクトをつくってみます。
まず、プロジェクトを生成したいディレクトリの一つ上まで移動します。
$ cd ~/works/project/
express
コマンドとプロジェクト名を指定して実行します。
$ express sample~/works/project/sample にフレームワークのファイルが一式展開される形でプロジェクトが生成され、ターミナルには次のように表示されます。
create : sample --- 省略 --- create : sample/views/index.jade install dependencies: $ cd sample && npm install run the app: $ node appこの﹁install dependencies:﹂に書いてあるコマンドを実行しないと、
node app
の実行がエラーとなりサーバを起動できません。私はここでハマりました。プロジェクトのディレクトリに移動して、モジュールをインストールします。
$ cd sample && npm installモジュールがインストールできたら、以下のコマンドで Node.js を起動できるようになります。
$ node appExpress のデフォルトのポート番号は 3000 番なので、ブラウザで http://localhost:3000/ にアクセスしてみます。﹁Express - Welcome to Express﹂と表示されていればインストール成功です。Thank you!!!︵Welcome to への返事︶ ちなみに Node.js は、
Ctrl + C
で終了できます。
Heroku Toolbelt のインストール
Heroku Toolbelt をインストールすると、ターミナルでheroku
コマンドが使えるようになります。インストールは簡単です。
(一)Heroku Toolbelt の﹁Heroku Toolbelt for Mac OS X﹂ボタンから、インストーラをダウンロードします。
(二)ダウンロードした﹁heroku-toolbelt.pkg﹂をダブルクリックしてインストールします。
(三)~/.bashrc などの環境設定ファイルに、自動的に PATH が追加されます。もし追加されてなければ、次の一文を追加して PATH を通すと heroku
コマンドがターミナルから使えるようになります。
export PATH="/usr/local/heroku/bin:$PATH"
ターミナルから Heroku にログイン
※あらかじめ、Heroku のサイトでユーザアカウントを登録︵Sign Up︶しておきます。 ターミナルから、Heroku の自分のアカウントにログインします。$ heroku login続けて、登録時の Email アドレスとパスワードを聞かれるので入力します。成功すると﹁Authentication successful.﹂と表示されます。
Heroku へデプロイ
cd
でプロジェクトのディレクトリに移動して、下記のコマンドを実行します。﹁tacamy-sample﹂の部分は﹁http://tacamy-sample.herokuapp.com/﹂といった具合に URL の一部になります。指定なしで $ heroku
create
とした場合は、自動的に生成されたランダムな名前が割り当てられます。
$ heroku create tacamy-sample完了すると、ターミナルにアプリの URL と Git のリポジトリ URL が表示されます。
http://tacamy-sample.herokuapp.com/ | git@heroku.com:tacamy-sample.git確認のため、http://tacamy-sample.herokuapp.com/ にブラウザからアクセスし、﹁Heroku | Welcome to your new app!﹂と表示されれば成功です。Thank you!!!
Procfile をつくる
Procfile とは、Heroku で必要となる、アプリケーションの起動に関するファイルです。私はこれがないと Heroku での表示で﹁Web じゃないよ﹂みたいなエラーになりました。詳しいことは procfile · herokaijp/devcenter Wiki に書かれているようですが、私は理解できませんでした/(^o^)\ とりあえず動くようにするには、次の一文だけ書いて、ファイル名を﹁Procfile﹂とし、プロジェクト直下に置きます。web: node app.js
.gitignore をつくる
プロジェクトのファイルは Git を使って Heroku に Push しますが、node_modules ディレクトリ以下は Heroku 上で展開する︵?︶ので、ローカルから Push する必要はありません。そのため、.gitignore ファイルをつくってその旨を指定します。node_modules .DS_Storeついでに、.DS_Store もコミットされないようにしてみました。
package.json に追記
Express で生成された sample/package.json ファイルに、Heroku 用の記述を追加します。これを書かないと Heroku に Push したときにエラーになるので注意!︵はい、ハマりました。︶ Express で生成された状態では、"dependencies" の記述はありますが、"engines" の記述がありません。そのため下記のように、"dependencies" のあとに "engines" を追加して、Node.js と npm のバージョンを記述します。--- 省略 --- "dependencies": { "express": "3.1.0", "jade": "*" }, "engines": { "node": "0.8.19", "npm": "1.2.10" } --- 省略 ---
Git リポジトリの作成とコミット
(一)リポジトリつくって、 (二)ローカルのファイルを全部 Index に追加して、 (三)コメントつけてコミット という、普通の Git の操作をします。$ git init $ git add . $ git commit -m "initial commit"
SSH の鍵認証
ここ少しあやしいのですが・・。 まず、Heroku の公開鍵を確認します。$ heroku keysHeroku に登録した Email アドレスで、公開鍵が表示されれば大丈夫です。この鍵が、~/.ssh/id_rsa.pub の鍵と同じであることを確認し、下記のコマンドを実行して Heroku に公開鍵を登録します。
$ heroku keys:add ~/.ssh/id_rsa.pub私の場合は、
heroku keys
で登録した Email アドレスでの鍵が表示されなかったので、Heroku と SSH 通信するための公開鍵をつくりました。
$ ssh-keygen -t rsa -C "xxxxx@gmail.com"上記のコマンドを実行したところ、~/.ssh 以下に、id_rsa と id_rsa.pub ファイルが新たに作成され、
$ he
roku keys
コマンドの結果にも表示されるようになり、晴れて Heroku に公開鍵を登録できました。このあたりの詳しいことは、下記エントリを参照しました。
●herokuでpushしようとしたらPermission deniedとなってしまう | 世界 daipresents.com
Heroku へ Push
最初だけ、下記のコマンドを実行しないと、Push できずにエラーで怒られます。$ git remote add heroku git@heroku.com:tacamy-sample.gitあとは普通に heroku master に Push します。
$ git push heroku master