Edited at

Angular 6で作ったアプリをHerokuにデプロイする

仕事でAngular 6(といってもionic)を書く案件があったため急遽ステージングのためにHerokuを使うことにした。

といっても今までNetlifyでSPAをデプロイしていてBASIC認証なんて必要なかったのでちょっと手間取ったのでメモ(この記事でBASIC認証については触れません)。

Herokuの登録、Heroku CLIの導入は済んでいて、Herokuの使い方をある程度知っていて、Angularをある程度触ったことがある人を読者としてターゲットにしています。


Herokuアプリを作成する

これがなきゃ始まらないよね。

heroku new


Expressをインストールする

Herokuにそのままプッシュしてもng serveで動かそうとしてくれるのですが、Dynoがメモリ不足で落ちます。

そのためExpressを噛ませてAngularアプリを動かします。

yarn add express

npm派の方ごめんなさい。


package.jsonにEnginesを追加

バージョンは適宜変更してください。


package.json

  "engines": {

"node": "10.15.3",
"npm": "6.9.0"
}


server.jsを作成

プロジェクト直下に。


server.js

const express = require("express");

const app = express();
app.use(express.static(__dirname + "/www")); // PureなAngularな人はdistだと思う
app.listen(process.env.PORT || 8080);
const path = require("path");
app.get("/*", function(req, res) {
res.sendFile(path.join(__dirname + "/www/index.html")); // ここもdistに書き換える
});
console.log("Server listening on port 8080");


Procfileを作る

当然ながら直下に。標準だとstartスクリプトを実行してしまうためng serveになってしまう。

web: node server.js


buildスクリプトを書き換える(Optional)

ステージング環境でもAoTかつプロダクションなビルドをしたいよって人は書き換えてください。このスクリプトが呼ばれるはずなので。

自分は必要ないと思ったので変えてません。


package.json

"build": "ng build --aot --prod"



デプロイ🚀(プッシュ)

git push heroku master

いかがでしたでしょうか

多分これでデプロイできるはずです。よいAngular生活を。

あとで多分CI設定の方も書きます。長くなったのでこれで。