LINE Front-end Framework(LIFF)でアプリケーションを開発したい - 7日目

昨日の作業で、Node.jsとPostgreSQLの連携がローカル環境でできるようになりました。本日はこれをHerokuでできるようにします。

データベース接続情報を環境変数にする

ローカル環境とHeroku環境ではデータベースの接続先情報が異なるため、環境変数に設定します。

.env

MY_LIFF_ID=xxxxxxxxxxxxxxx
PG_USER=xxxxxxx
PG_HOST=localhost
PG_DATABASE=develop
PG_PASSWORD=
PG_PORT=5432

2行目以降の「PG_xxxxx」が今回追加した環境変数です。これにあわせて「reservation.js」も修正します。（一部抜粋）

reservation.js

const client = new Client({
   user: process.env.PG_USER,
   host: process.env.PG_HOST,
   database: process.env.PG_DATABASE,
   password: process.env.PG_PASSWORD,
   port: process.env.PG_PORT,
})

「http://localhost:5000/reservation」にアクセスして、正常に動作することを確認します。

ローカルの「.env」ファイルをHerokuに反映しないようにするため、「.gitignore」ファイルを作成します。

.gitignore

.env

Herokuに反映します。

$ git add .
$ git commit -am "Connect DB"
$ git push heroku master

Herokuの「.env」に接続情報が反映されていないことを確認します。

$ heroku run bash
$ tail .env
MY_LIFF_ID=xxxxxxxxxxxxxxx
PG_USER=xxxxxxx
PG_HOST=localhost
PG_DATABASE=develop
PG_PASSWORD=
PG_PORT=5432

反映されてしまいました。どうやら一度gitの対象となったファイルは、あとから「.gitignore」に追加しても駄目なようです。

$ git rm --cached .env

これで次回から反映されなくなるはずです。

HerokuでPostgreSQLを使えるようにする

Herokuのダッシュボード画面「Resources」から「Find more add-ons」を押します。

「Heroku Postgres」を選択します。

「Hobby Dev」を選択し、「Install Heroku …」を押します。

「App to provision to」は、カーソルを入れると入力候補が表示されるはずですので、選択して「Provision add-on」を押します。

わからない方、Herokuのダッシュボードの上に表示されているアレです。

完了するとHerokuのダッシュボードに「Heroku Postgres」が追加されます。クリックすると「DATA」画面が開かれるので、「Settings」の「View Credentials...」を押します。

表示された接続情報をメモします。

Herokuの環境変数に設定します。
※[app]はHerokuのダッシュボードの上に表示されているアレです。

$ heroku config:set PG_USER=[user] -a [app]
$ heroku config:set PG_HOST=[host] -a [app]
$ heroku config:set PG_DATABASE=[database] -a [app]
$ heroku config:set PG_PASSWORD=[password] -a [app]
$ heroku config:set PG_PORT=[port] -a [app]

Herokuのデータベースに接続します。

$ heroku pg:psql -a andywhodreams-20200421

SQLが実行できるか確認します。

[app]::DATABASE=> select now();
             now              
-------------------------------
2020-05-05 07:44:10.795171+00
(1 row)

Herokuでアプリが実行できるか確認する

上記の手順でデータベースに接続し、ローカル環境で実行したSQLを実行します。

create table m_facility (
facility_id int,
name text,
picture text,
primary key(facility_id));

create table t_reservation (
facility_id int,
reservation_date date,
user_id text);

insert into m_facility(facility_id, name, picture) values (1, '会議室1', '001.jpg');
insert into m_facility(facility_id, name, picture) values (2, '会議室2', '002.jpg');
insert into m_facility(facility_id, name, picture) values (3, '会議室3', '003.jpg');
insert into m_facility(facility_id, name, picture) values (4, 'ホールA', '004.jpg');
insert into m_facility(facility_id, name, picture) values (5, 'ホールB', '005.jpg');

ブラウザからHerokuのアプリケーションに接続し、「予約一覧」画面が表示されることを確認します。

LINE公式アカウントから接続できるか確認します。

うまく表示されました。
しかし、画面を閉じてもう一度起動すると、エラーとなります。

デバッグしてみます。

reservation.js

    client.connect(function(err) {
       console.log('conn err');
       console.log(err);
   });

ログには以下のように出力されていました。（一部抜粋）

Error: Client has already been connected. You cannot reuse a client.

どうやら、1回目の処理でconnectして、2回目の処理でもう一度connectしようとするとエラーになるようです。
この辺りは明日改善することにします。

今日はここまで！