hakobera's blog

技術メモ。たまに雑談

Heroku で動く Node アプリを作る 壱

経緯

  1. Node.js Knockout にエントリーした。
  2. Node.js Knockout で使えるサーバは Joyent か Heroku
  3. そういえば Heroku で動く Node アプリ作ったことない
  4. 練習のためになんか作るか <-- いまここ

長くなったので2回に分けて書くことにします。
今回は開発環境の構築と Express の雛形のデプロイまでです。

開発ガイド

まずは以下のガイドをなぞっていきます。(一部、順番は前後します)

Getting Started with Node.js on Heroku | Heroku Dev Center

事前準備

Node のインストールは nvm を使うのが簡単です。他は適当に検索してください。

参考: Node.jsとnvmを初めてインストールするときのハマりポイントと対策 - ess sup

Heroku Command-line Client のインストール

gem install heroku

とりあえず Hello, World

とりあえず express が使えるようなので、express で Hello, world してみます。ファイル名はガイドでは web.js となっていますが、別にどんな名前でも良いようなので、Node の文化にのっとって app.js にしておきます。アプリの雛形は express コマンドで作成します。後で作成するアプリの名前「one-paper」で作りますが、好きな名前を指定してください。テンプレート・エンジンに EJS を使うのは、私の個人的な好みです。別に Jade 使っても大丈夫なはず。

express -t ejs ./one-paper
cd one-paper
npm install -d

とりあえず、ローカルで起動確認

node app.js

動いたら、これを Heroku にデプロイします。以下、手順。

app.js の書き換え

port 指定の部分を process.env.PORT から取得するように書き換えます。

var port = process.env.PORT || 3000;
app.listen(port);
Foreman で起動できるようにする

Heroku はアプリを Foreman というプロセスマネージャ経由で起動するようなので、それで起動できるようにします。まず、Procfile という名前のファイルを作り、node の起動コマンドを書き込みます。

echo "web: node app.js" > Procfile

gem で Foreman をインストールして、起動できるか確認します。

gem install foreman
foreman start

すると以下のようなログがでるので、listening on xxxx の部分のポート番号を指定して、curl なり、ブラウザで起動を確認します。

12:54:42 web.1 | started with pid 9706
12:54:43 web.1 | Express server listening on port 5000 in development mode

curl http://localhost:5000

Welcome to Express みたいな文字列が表示されれば OK

Heroku へデプロイする

git にコミット

node_modules を .gitignore に設定して、コミット。

git init
echo "node_modules/" > .gitignore
git add -A
git commit -m 'First commmit'
サーバの作成

Heroku のアカウント情報が必要なので、持ってない人は作っておくこと。

heroku create --stack cedar

これで git remote に heroku が追加される。

アプリケーションの配備

以上で準備完了。いよいよ Heroku にアプリを配備します。といっても、git push するだけ。

git push heroku master

http://morning-cloud-897.herokuapp.com/

こんな感じの URL が作られるので、アクセスして表示されるのを確認します。
Heroku の Web管理画面からも確認できます。

アプリケーション名の変更

このままでも良いのですが、実際に公開するにあたっては URL を変えたいですよね。これも CLI から変更可能。例によって「one-paper」の部分は好きな名前を指定します。

heroku rename one-paper

これで以下のような URL でアクセスできるようになります。

http://one-paper.herokuapp.com/

今は express の雛形がそのまま表示されていますが、今後拡張していく予定です。

ソース

今回のソースは以下においてあります。


hakobera / one-paper — Bitbucket

まとめ

Heroku は初めて使いましたが、特殊なライブラリに依存するようなモジュールでなければ、NPM も普通に使えるようなので、意外と普通に開発できるように感じます。

次回は Twitter 認証と Amazon Simple DB を利用した データベースアプリの作り方について書く予定です。