仕事で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設定の方も書きます。長くなったのでこれで。