Node.js+Expressアプリケーションをherokuへdeployする。



Node.js,Express環境でAurelia.jsを動かしてみる–その6

Node.js,Express環境でAurelia.jsを動かしてみる–その1
Node.js,Express環境でAurelia.jsを動かしてみる–その2
Node.js,Express環境でAurelia.jsを動かしてみる–その3
Node.js,Express環境でAurelia.jsを動かしてみる–その4
Node.js,Express環境でAurelia.jsを動かしてみる–その5

今回は実際にサーバに上げて実行してみたいと思います。
無料のクラウドアプリケーションプラットフォームとして今回はherokuを使ってみます。
⇒参考https://www.heroku.com/
まずは上記サイトでアカウントを作成してください。

heroku-toolbeltのインストール

⇒ダウンロードhttps://toolbelt.heroku.com/
herokuのクライアントツールのheroku-toolbeltを上記サイトからダウンロードしてインストールします。command prompt上でherokuのさまざまなコマンドが使用可能になります。
githeroku-toolbeltに内包されていたと思うのですが定かではないので動かなければインストールが必要です。
Git for Windows

Procfileの準備

herokuサーバの実行ファイルを定義するProcfile(拡張子なし)を作成します。ルートフォルダに設置してください。今回はexpressの起動ファイルを実行します。

web: node app.js

.gitignore設定

bundleされたファイル等、実行ファイルのみをdeploy出来るように設定します。
jspmはサーバ側でも実行できますが今回は中身を全部bundleしてしまっているのでサーバでは処理しないようにしました。
そのためjspm_packagesに存在するsystem.js関連ファイルをcoreフォルダを作成しそちらにコピーしました。
またindex.html内のsystem.jsへのファイルパスを変更しています。
(ついでにCSSの読み込み先も変えています)
git管理から無視するフォルダ・ファイルを設定する.gitignoreファイルを作成します。

今回作成した.gitignoreファイル

# ignore
/*
# not ignore
!/core
!/dist
!/routes
!/styles
!/views
!/.gitignore
!/.npmignore
!/app.js
!/config.js
!/favicon.ico
!/package.json
!/Procfile

ignoreするファイルが多かったので全部まるっと無視してから、無視を解除しています。
!で記載されたフォルダやファイルのみgit管理されます。

herokuへファイルをdeployする

git初期化

command promptを起動して今回作成したAurelia.jsのフォルダに移動します。
私の場合は下記になります。

cd C:\project\aurelia-test

移動したら下記実行。gitを初期化します。

git init

これでフォルダ内がgitの管理下におかれます。

herokuへログインする

heroku login

herokuで登録したE-mailとパスワードでログインします。

ローカルでの動作確認

heroku local web

heroku側と同設定のサーバがローカルで立ち上がります。
動作確認用です。

herokuアプリケーションの作成

空っぽのアプリケーションを作成します。commandからでなくherokuホームページからでもできます。

heroku create myappname

myappnameというアプリケーションが作成されます。

gitの確認

gitのリモート設定がherokuのアプリケーションに接続されているか確認します。

git remote -v

下記のように表示されていたら接続されています。

heroku  https://git.heroku.com/myappname.git (fetch)
heroku  https://git.heroku.com/myappname.git (push)

接続がされていない場合は下記を実行してgitのリモートを設定します。

heroku git:remote -a myappname

gitでファイルをpushする

ファイルをherokuへpushします。これでdeployは完了になります。

git add .
git commit -m "my first commit"
git push heroku master
git add
ファイルやディレクトリをインデックスに登録
git commit
インデックスされているファイルをコミットします。-mでコメントを記述しています。-mでコメントを記載しないとテキストエディタが立ち上がりコメントを要求されます。

これでheroku側へdeployできました。
package.jsonを元にherokuでbuildが行われます。
dependenciesに記載されたパッケージがインストールされます。
下記にアクセスすることで確認できます。herokuホームページからも自分のアプリを確認したり設定を変更したりできます。

https://myappname.herokuapp.com/

gulp bundleでバンドルされてないファイルを動かしたい場合は.gitignoreの設定を変えてください。今回紹介したignoreファイルはbundleされたファイルのみを扱う場合です。


Leave a comment