Help us understand the problem. What is going on with this article?

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,
  databese: 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を導入する方法をまとめた。
また、サンプルコードは、筆者が作ったアプリから抜粋してきたものなので、そのままコピペしてもうまくいかない可能性があるのでご注意を。
間違いなどあれば、コメントにお願いします。

参考文献

c6tower
メモついでに書いている記事多め。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした