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のさまざまなコマンドが使用可能になります。
※gitはheroku-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されたファイルのみを扱う場合です。