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

はじめに
---
Angular ＋ Express ＋ PostgreSQLのWEBアプリをHerokuで起動する手順。
[Angular ＋ Expressの開発環境サンプル](https://qiita.com/kyv28v/items/92c0480aef9b77b7880e) を例として説明します。

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

![heroku-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/53a17146-8f08-bdbc-ac2b-c2542f8d46dc.png)


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

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

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

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

![heroku-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/2ed72555-0e7a-1c29-b989-403d39a268a8.png)



・確認した 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-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/ea3aea1f-b9d7-d515-f383-681dc1628441.png)



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

「Resources」→「Add-ons」から、Heroku Postgresを選択します。
![heroku-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/ef786c31-8918-86dc-ae25-90a1c8a2179e.png)

プランを選択します。
とりあえず「Free」で。
![heroku-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/d3d9a365-1eeb-256d-c31d-233b79da7a0e.png)


追加されたデータベースの情報を確認します。
画面下部に「Heroku Postgres」が追加されており、クリックすると別タブでデータベース情報のページが開きます。
![heroku-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/fbc73579-547a-53ba-3ed7-d962987cf2ef.png)
「Setting」→「View Credentials」で、接続情報などが表示されます。
![heroku-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/d1c00dda-9e49-e418-f5f2-427b67473b6d.png)

テーブル、ユーザの作成
---
データベースに接続します。
上記で確認した接続情報で接続します。

$ 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
```

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

![heroku-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/a0c0e757-1323-1dfd-e190-01b866bb766f.png)