LoginSignup
5
5

More than 5 years have passed since last update.

CentOSにheroku toolbeltを入れて、AngularJSアプリをherokuにアップする

Last updated at Posted at 2015-04-16

前置き

普段はrailsで作成したアプリをherokuにアップしているのですが、
AngularJSアプリだと結構‥いやだいぶ苦労したので書いてみます。

ちなみにAngularJSのベースはangular-seedを使用しています。

この記事を見ると
http://blog.mah-lab.com/2014/02/01/angular-fullstack/

generator-angular-fullstackだともっと簡単に挙げられそうなので、こっちをベースに使えばよかったのです。。。

とりあえずangular-seedは、Node.js+Expressですね。
詰まったところだけでも長いので、
Node.jsやnpmのインストール部分、git等の基本操作は割愛します :bow:

CentOSにheroku-toolbeltのインストール

まずwgetコマンドが入っていない場合は

$ sudo yum install wget

で入れてください。
その後は公式ページ通り、

Standaloneソースを持ってきて

$ wget -qO- https://toolbelt.heroku.com/install.sh | sh

パスを通します

$ export PATH="/usr/local/heroku/bin:$PATH"

/usr/local/herokuに入ったので、herokuコマンドが使えるようになります。

SSH keyを登録

$ heroku keys:add

package.jsonを編集

Express で生成された /package.json ファイルに、Heroku 用の記述を追加します。

"dependencies" のあとに "engines" を追加して、Node.js と npm のバージョンを記述します。

--- 省略 ---
  "dependencies": {
    "http-server": "^0.6.1",
    "bower": "^1.3.1"
    "express": "3.x"
  },
  "engines": {
    "node": "0.10.26",
    "npm": "2.7.5"
  },
--- 省略 ---
$ heroku create アプリ名

Procfile を作成

Procfileとは、Heroku で必要となる実行されるコマンドが何であるかを宣言するファイルなようで、
とりあえず動くようにするには、以下の内容を1文だけ書いて作成し、プロジェクト直下に置きます。

web: node app.js

これでも動かない場合は

web.jsを編集

var port = Number(process.env.PORT || 8000);
var express = require('express'); var app = express();
app.use(express.static(__dirname + '/app')); var server = app.listen(port, function() { console.log('Listening on port %d', server.address().port); });
$ git push heroku master

アップ出来た!!

長かった。疲れたパトラッシュ :dog:

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5