ExpressからHeroku Postgresを使う

はじめに

HerokuでHeroku Postgresを使うアプリケーションを初めて公開する際に色々と手間取ったので、本記事に一連の流れをまとめる。
なお、アプリケーションの作成にはExpressを用いた。

環境変数を使う

環境変数を使うことで、ソースコードにべた書きしたくない情報（DB接続情報やAPIキーなど）を隠すことができる。

前提・環境

• Heroku CLIインストール済み
• Herokuに該当プロジェクトをあげてある
• windows 10
• node 10.15.3
• heroku 7.26.2

Heroku Postgresの準備

Heroku上のアプリにHeroku Postgresを導入

1. 「Resources > Find more add-ons > Heroku Postgres」の順に移動。
2. 「Install Heroku Postgres」でインストール。
3. 「Hobby Dev」という無料プランを選択。
4. Heroku Postgresを導入するアプリケーションを選択し、「Provision addo-ons」をクリック。
5. 導入完了

Heroku Postgresへの接続

command

heroku pg:psql -a [Heroku上のアプリ名]

データ用意

基本的なSQL文の書き方は割愛。

テーブル作成

command

CREATE TABLE Rank(
id SERIAL,
hands INTEGER NOT NULL,
name VARCHAR(10) NOT NULL,
level INTEGER NOT NULL,
PRIMARY KEY(id)
);

ダミーレコード挿入

command

INSERT INTO Rank (hands, name, level) VALUES (10, 'taro', 2);

Heroku Postgresの環境変数設定

接続情報入手

メニューから、「DATA > アプリ名 > Settings > （Database Credentialsの）View Credentials」の順に移動。
Host, Database, User, Port, Passwordなどの情報が入手できる。
注意点として、これらの情報をソースコードにべた書きしてGitHub上に上げる、などということは絶対にしないように！！
（この情報使えば、誰でもデータベースいじれてしまうので…）

環境変数設定

command

$ heroku config:set [任意のKEY]=[環境変数を指定] --app [アプリ名を指定]

# 例えば、HOST情報を環境変数に設定したい場合
$ heroku config:set ENV_HOST=xxxxxxxxxxxxxxxx --app SAMPLEAPP

上記のようにして、Host, Database, User, Port, Passwordを環境変数に設定すれば、基本的にデータベース接続に必要な情報は十分。
もちろん、ENV_HOSTなどのKEYは自由に命名して問題ない。

設定できたかの確認・削除

command

# 環境変数一覧の取得
$ heroku config:get -a [アプリ名]

# 特定の環境変数の取得
$ heroku config:get [KEY] -a [アプリ名]

# 環境変数の削除
$ heroku config:unset [KEY] -a [アプリ名]

環境変数を使う

例えば、Expressアプリの場合は下記のようにして扱う。

node-dotenvをインストール

command

npm install --save dotenv

process.env.KEYとすることで、Herokuで設定した環境変数を使えるようになる。

db/db.js

const pg = require('pg');
require('dotenv').config();

exports.pool = pg.Pool ({
  host: process.env.ENV_HOST,
  database: process.env.ENV_DB,
  user: process.env.ENV_USER,
  port: 5432,
  password: process.env.ENV_PASSWORD,
});

一応接続できるか確認する簡単なサンプルコードも以下に。
※express-generatorで作成したアプリに手を加えています。

route/index.js

const express = require('express');
const router = express.Router();

const db = require('../db/index');

router.get('/', (req, res, next) => {
  db.pool.connect((err, client) => {
    if (err) {
      console.log(err);
    } else {
      client.query('SELECT name, hands FROM rank', (err, result) => {
        console.log(result.rows);
      });
    }
  });
  res.render('index', {
    title: 'hello express',
  });
});

ちなみに、.envファイルをプロジェクト直下に用意することで、ローカルではローカルのPostgreSQLを参照することができる。

.env

ENV_HOST = localhost
ENV_DB = [ローカルの任意のdb名]
ENV_USER = postgres
ENV_PASSWORD = [ローカルのpostgresのパスワード]

.envファイルの内容はgitに上げてはいけないので、.gitignoreファイルに下記の記述も忘れずに。

.gitignore

.env

おわりに

本記事ではは、Node.jsのフレームワークExpressで作ったアプリケーションにHeroku Postgresを導入する方法をまとめた。
また、サンプルコードは、筆者が作ったアプリから抜粋してきたものなので、そのままコピペしてもうまくいかない可能性があるのでご注意を。
間違いなどあれば、コメントにお願いします。

参考文献

• 環境変数をNode.jsで利用する方法、node-dotenvを使う
  • https://www.npmjs.com/package/dotenv
  • https://daiki-sekiguchi.com/2018/08/29/nodejs-dotenv/
  • https://qiita.com/ueokande/items/80048f886082fea5b776
• herokuコマンド、環境変数まわり
  • https://qiita.com/chihiro/items/b8a3ef54716842dd115a