FORSMILE
EN
開発記事2016/02/02

Node.js環境のherokuでjspmを動かす

Aurelia.jsのテスト実装をherokuで試している時に、バンドルされたファイルではなくてバンドル前のファイルをサーバ上で動かしてみたいと思い、jspmをherokuで実行してみようと試みました。

ブログ一覧へ / Back to Blog

Aurelia.jsのテスト実装をherokuで試している時に、バンドルされたファイルではなくてバンドル前のファイルをサーバ上で動かしてみたいと思い、jspmをherokuで実行してみようと試みました。

後々jspmのversionが7になったら改善されるらしいです。

今回はherokuでScriptを実行する方法とあわせて、大量のjspm関連ファイルをgitからインストールする際に起こるエラーへの対処方を紹介したいと思います。

herokuのアプリケーションを作成するときに

herokuのアプリケーションを作成する際にheroku側で動くbuildpackを指定できるのですが、今回はjspmが動くようになるビルドパックを選択してみました。

(必ずしも必要かわかりません。package.jsonのdependenciesにjspmがあれば良いだけかも)

heroku内でjspmやgulpやsassのビルドができるものがあったので入れてみます。

ビルドパックをアプリケーションを作る時に入れる場合

sql
heroku create myappname --buildpack https://github.com/TimPetricola/heroku-buildpack-nodejs-jspm-gulp-sass.git

既存のアプリケーションにビルドパックを入れる

heroku buildpacks:set https://github.com/TimPetricola/heroku-buildpack-nodejs-jspm-gulp-sass.git -a myappname

sql
heroku create myappname --buildpack https://github.com/kudos/heroku-buildpack-nodejs-jspm.git

herokuでビルドできるようにpackage.jsonを設定する

heroku側の設定はpackage.jsonを設定することで可能です。

npm install後のアクション指定

package.jsonのscriptsの項目にpostinstallを追加してあげます。今回はjspm install -yをpush時に実行しています。

css
"scripts": {
    "start": "node app.js",
    "test": "gulp test",
    "e2e": "gulp serve webdriver-standalone e2e",
    "postinstall": "jspm install -y"
  }

Buildで走るエンジンの指定

enginesの項目でBuild時に実行されるエンジンのバージョンを指定できます。

css
"engines": {
    "node": "0.12.x",
    "npm": "3.5.x",
    "jspm": "0.16.x"
  }

jspmのgithub configを設定する

text
GitHub rate limit reached. To increase the limit use GitHub authentication.
Run jspm endpoint config github to set this up.

⇒参考https://gist.github.com/topheman/25241e48a1b4f91ec6d4

1.githubにログインしてトークンをつくる

⇒https://github.com/settings/tokens

Personal settings > Personal access tokens

2.JSPM_GITHUB_AUTH_TOKENを調べる

herokuのjspmのconfigに設定するためにJSPM_GITHUB_AUTH_TOKENを調べます。

text
jspm registry config github
javascript
jspm registry export github
text
jspm config registries.github.remote https://github.jspm.io
jspm config registries.github.auth JSPM_GITHUB_AUTH_TOKEN
jspm config registries.github.maxRepoSize 100
jspm config registries.github.handler jspm-github

3.herokuのconfigに登録

text
heroku login
text
jspm config registries.github.auth JSPM_GITHUB_AUTH_TOKEN

上記のJSPM_GITHUB_AUTH_TOKEN部分に表示されている値をherokuのconfigに登録します。

javascript
heroku config:set JSPM_GITHUB_AUTH_TOKEN=exportで吐き出されたTOKEN

4.herokuへコミット!

先ほど作成したpackage.jsonをherokuへコミットします。gitの.ignorefile等修正し、実行に必要なファイルを一緒にコミットします。

jspm関連ファイルもheroku側で追加されるためjspm_packagesフォルダ等は含まなくても良くなります。

jspmのversionが上がると上記容量の問題も起こらなくなるそうです。

📦
Amazon で関連書籍・ツールを検索
Web開発 プログラミング 入門
Amazonで探す →(アソシエイトリンク)