a2 Tech blog

試したこと・調べたこと・感じたことを発信するITエンジニアの日記です。仕事とは直接関係ないけど興味あることを模索していきます。

Heroku/MySQL/Node.jsをiPhoneだけで構築する

f:id:ninna2:20170409132859p:plain:w360

今回はHerokuとNode.jsに MySQL を足してみたいと思います。HerokuのデータベースはPostgreSQLのようですが、Add-onでMySQLも扱えます。Heroku上のNode.jsアプリケーションからMySQLのDBにアクセスしてデータを取得する環境を構築していこうと思います。

もちろんiPhoneだけで!!

必要なもの

準備が色々必要ですが、とりあえず私が使っているものを列挙しておきます。

  • iPhone6(開発端末⁉︎)
  • MS製 Universal Mobile Keyboard(Bluetoothキーボード)
  • Textastic(エディタ)
  • Dropbox
  • Heroku
  • mysql queryDB(後から説明します)

これぐらいがあれば、iPhoneだけでNode.jsの開発が始められます。本格開発までは行きませんが、簡単な動作確認程度なら可能な兆しがあります。

HerokuにMySQLを構築

最初にHerokuにMySQLを構築していきましょう。HerokuにMySQLを導入するには、ClearDB というAdd-onを利用します。注意点があるとすれば、Herokuで クレジットカード の登録をしないと使えないのと、登録したとしても無料プランだと 5MB しか容量が与えられないという点です。大量データでの確認は無理ですが、簡単な動作確認なら可能なレベルです。もちろん課金して本格的に利用するというのもアリですよ。

Herokuのユーザー登録とクレジットカードの登録が済んでいるものとして話を進めます。クレジットカードの登録は、アカウント設定から行えます。英語ですけどこれぐらいは簡単なので誰でもできると思います。

Add-onを入れましょう。add-onsの検索で"ClearDB"というキーワードを入力する候補が出てきますのでそれを選択します。

f:id:ninna2:20170409004950p:plain:w360

選択するとPlan選択画面が出るので、Planを選んで、Provisionします。

f:id:ninna2:20170409004954p:plain:w360

クレジットカードの登録がまだならここでエラーになります。登録済みなら少し待てば正常に完了して、データベースが構築されます。

f:id:ninna2:20170409004958p:plain:w360

MySQLへの接続

データベースの箱は出来ましたが、中身が何も入っていないので、中身を入れていくために接続してみましょう。接続先ですが、Herokuの変数設定から確認できます。"CLEARDB_DATABASE_URL"に記載されています。

f:id:ninna2:20170409005001p:plain:w360

URLは下記のような形式になってますので、それぞれメモしておきます。あとで使います。

mysql://<username>:<password>@<host>/<dbname>?reconnect=true

MySQLへの接続には、"queryDB"というアプリを使います。SSH版もありますが今回はSSHを使わないので 無料版 のもので問題ないです。広告がすごーく鬱陶しいですが我慢しましょう。他のアプリ使ってもらっても構いませんよ。

MySQL QueryDB クライアント

MySQL QueryDB クライアント

  • Excelsis Consulting
  • ユーティリティ
  • 無料

queryDBをインストール出来たら、早速、構築したMySQLにアクセスしていきましょう。起動して、接続先を入力します。

f:id:ninna2:20170409005005p:plain:w360

f:id:ninna2:20170409005009p:plain:w360

接続テストでオッケーだったら保存します。これでMySQLへの接続ができる状態になりました。

MySQLへデータの投入

サンプルのテーブルとサンプルのデータを入れてみましょう。新しいクエリの追加で、まずはテーブルを作成します。

CREATE TABLE t_message (
    id smallint(6) NOT NULL AUTO_INCREMENT,
    message varchar(100) DEFAULT NULL,
    PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

次にデータを入れます。とりあえず1行だけ入れておきましょう。

INSERT INTO t_message VALUES('1', 'HelloWorld!!MYSQL!!');

この辺りは、別にどのようなテーブルでもデータでも構いませんよ。お好きにどうぞ。 ちゃんと格納されたかどうか、SELECTして確認しておきます。

f:id:ninna2:20170409005013p:plain:w360

1行だけなので寂しいですが、ちゃんとデータがはいってますね。

Node.jsの実装

MySQLの構築とデータの格納ができたので、Node.jsのアプリケーション側の実装をしていきましょう。作るものは3つですね。index.js,Procfile,package.jsonです。

過去記事を読んでいない人は、先に読むことをお勧めします。

ninna2.hatenablog.com

index.js

ざっと前回から追加したコードの説明をしていきます。まず、MySQLを使っているのでモジュールを読み込みます。

var mysql = require('mysql');

コネクションを作成します。host,user,password,databaseは各自の環境のものを入れてくださいね。

var db_config = {
    host: '',
    user: '',
    password: '',
    database: ''
};

var connection = mysql.createConnection(db_config);
connection.connect();

ルート(‘/’)へのアクセス時にMySQLにアクセスしてデータを取得するように変更しています。とりあえず、取得したデータの1つ目([0])のデータのmessageをレスポンスで返すようにしました。

app.get('/', function(request, response) {
    console.log("heroku-mysql!!");
    connection.query('SELECT * FROM t_message WHERE id=1', function(err, rows, fields){
    if(err){
        console.log('error: ', err);
        throw err;
    }
    response.writeHead(200,{'Content-Type': 'text/plain'});
    response.write(rows[0].message);
    response.end();
    });
});

一応、全体像を載せておきます。コードの説明が雑ですいません。簡単なコードなので読めばわかると思いますので。

var express = require('express');
var mysql = require('mysql');
var app = express();

var db_config = {
    host: '',
    user: '',
    password: '',
    database: ''
};

var connection = mysql.createConnection(db_config);
connection.connect();

app.set('port', (process.env.PORT || 5000));

app.get('/', function(request, response) {
    console.log("heroku-mysql!!");
    connection.query('SELECT * FROM t_message WHERE id=1', function(err, rows, fields){
    if(err){
        console.log('error: ', err);
        throw err;
    }
    response.writeHead(200,{'Content-Type': 'text/plain'});
    response.write(rows[0].message);
    response.end();
    });
});

app.listen(app.get('port'), function() {
  console.log('heroku-mysql app is running on port', app.get('port'));
});

Procfile

前回と同じです。

web: node index.js

package.json

ほぼ前回と同じです。MySQLのモジュールを追加しました。nameとかdescriptionも変更してます。

{
  "name": "heroku-mysql",
  "version": "0.0.1",
  "description": "heroku-mysql Node.js app using Express 4",
  "engines": {
    "node": "6.9.4",
    "npm": "2.1.x"
  },
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "4.13.3",
    "mysql": "*"
  }
}

Dropboxに転送してデプロイ

さて、実装ができたので、Herokuへデプロイしましょう。Dropbox経由で行きたいと思いますので、TextasicからDropboxへアップロードしていきます。手順は前回と同じです。

f:id:ninna2:20170409005016p:plain:w360

f:id:ninna2:20170409005020p:plain:w360

デプロイは成功しました!!

実行する

さて、実行してみましょう。

f:id:ninna2:20170409005023p:plain:w360

データベースの中身が出力されているのでうまくいったようです。

これで、Node.jsでMySQLのデータにアクセスすることも出来ました。Heroku,MySQL,Node.jsの組み合わせであれば頑張ってiPhoneだけでも簡単な実装は出来そうですね。そろそろコードのボリュームが多くなってきたし、npmが使えないし、オートコンプリートは効かないしで辛くなってきました。やろうと思えばなんでもできるけど決して効率は良くないかと。もう少しだけiPhoneだけで頑張ってみるかな。