Angular ＋ Express ＋ PostgreSQLのWEBアプリをHerokuで実行する手順

はじめに

Angular ＋ Express ＋ PostgreSQLのWEBアプリをHerokuで起動する手順。
Angular ＋ Expressの開発環境サンプル を例として説明します。

Herokuアプリの作成

右上のメニュから「New」→「Create new app」を選択し、任意の名称を指定してHerokuアプリを作成します。

ソースコードのプッシュ

ソースコードをプッシュし、Deployします。
Heroku Git にプッシュする方法と、GitHub のリポジトリと連携する方法がありますが、ここはHeroku Git にプッシュする方法で説明します。
（GitHub でソース管理する場合は、連携したほうが便利だと思います。）

・まず、ソースコードをローカルに取得します。

git clone https://github.com/kyv28v/angular-express-example.git

・次に、Heroku Git の URL を確認します。
　Settingsタブから確認できます。

・確認した Heroku Git の URL を登録します。

git remote add heroku https://git.heroku.com/xxxxx-xxxxx.git

　確認。

git remote -v
heroku	https://git.heroku.com/xxxxx-xxxxx.git (fetch)
heroku	https://git.heroku.com/xxxxx-xxxxx.git (push)

・Heroku Git にソースをプッシュ。
　ビルドが始まります。

git push heroku master

・ビルドエラー回避
　devDependenciesのmoduleがインストールされなかったため、エラーになってしまいました。
　package.json を見直したほうがいいかもしれませんが・・・とりあえず devDependencies もインストールする設定に変更します。

heroku config:set NPM_CONFIG_PRODUCTION=false --app xxxxx-xxxxx

　再度git push heroku masterすると、今度はビルド成功しました。

ここまでくれば、ログイン画面の表示まではできるはずです。
PostgreSQLがいないので、ログインはできません。

Heroku Postgresの設定

Heroku Postgresのアドオンを追加します。
アドオンの使用にはクレジットカードの登録が必要だそうですので、事前に登録しておいてください。

「Resources」→「Add-ons」から、Heroku Postgresを選択します。

プランを選択します。
とりあえず「Free」で。

追加されたデータベースの情報を確認します。
画面下部に「Heroku Postgres」が追加されており、クリックすると別タブでデータベース情報のページが開きます。

「Setting」→「View Credentials」で、接続情報などが表示されます。

テーブル、ユーザの作成

データベースに接続します。
上記で確認した接続情報で接続します。

$ psql -d xxxxxxxxxx -h xxxxxxxxxx -U xxxxxxxxxx

開発環境と同様、テーブル、ユーザを作成します。

xxxxxxxxxx=> CREATE TABLE users (id serial, name varchar(50), age int, sex int, birthday timestamptz, password varchar(128), note varchar(256));
CREATE TABLE
xxxxxxxxxx=> CREATE TABLE room_access_mng (id serial, room_cd varchar(10), user_id int, entry_dt timestamptz, exit_dt timestamptz, note varchar(256));
CREATE TABLE
xxxxxxxxxx=> INSERT INTO users (name, password, note) VALUES ('admin', 'ba3253876aed6bc22d4a6ff53d8406c6ad864195ed144ab5c87621b6c233b548baeae6956df346ec8c17f5ea10f35ee3cbc514797ed7ddd3145464e2a0bab413', 'password:123456');
INSERT 0 1

デフォルトのタイムゾーンがUTCになっているっぽいので、変更します。

xxxxxxxxxx=> alter database xxxxxxxxxx set timezone = 'Asia/Tokyo';
ALTER DATABASE

DBの設定

Herokuの環境設定で上記の接続情報を登録します。
（実装上、環境設定があればその設定を、なければserver/src/config/common.tsで定義された設定を使用するようにしています。）

heroku config:set DB_USER=xxxxxxxxxx --app xxxxx-xxxxx
heroku config:set DB_PASSWORD=xxxxxxxxxx --app xxxxx-xxxxx
heroku config:set DB_HOST=xxxxxxxxxx --app xxxxx-xxxxx
heroku config:set DB_PORT=xxxxxxxxxx --app xxxxx-xxxxx
heroku config:set DB_NAME=xxxxxxxxxx --app xxxxx-xxxxx

無事、ログインできるようになりました。