a2 Tech blog

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

iPhoneからAzure Web Apps上にNode.jsとMySQLを構築する

f:id:ninna2:20170409132840p:plain:w360

前回の記事で、Azure App ServiceのWeb Appsを用いてiPhoneで書いたコードをDropbox経由でデプロイしてアプリケーションを動かすことを試しました。今回は、Azure上にデータベース(MySQL)を構築して、Node.jsのアプリケーションをデプロイして連携していくことをやってみたいと思います。

前回記事は、下記です。

ninna2.hatenablog.com

Azure上にデーアベースの構築

まず、Azure上にMySQLのデータベースを構築していきましょう。といっても、1から構築というわけではなく、Azure上でDatabase as a Serviceとして提供されているClearDBを使います。MySQLホスティングサービスですね。インフラストラクチャの管理は不要なわけです。

さっそくセットアップしていきましょう。App ServiceからWeb Appsを追加する時と同じように追加を行います。Web Appsの際は、表示されているWeb Appsを選択して構築しましたが、今回はClearDBなので、フィルター欄に"ClearDB"と入力して探します。見つけたら、ポチッと選択します。

f:id:ninna2:20170409004710p:plain:w360

なにやら説明がゴニョゴニョ表示されるので、興味のある部分だけ読んで理解してから作成を押します。

f:id:ninna2:20170409004715p:plain:w360

基本情報の入力が求められるので、適切に入力していきます。データベース名は自分のわかりやすいものをつけて下さい。名前がかぶるとNGなので一意な名前になるものにしないといけないですからはずです。サブスクリプションは、今回は無料版で作成しています。価格が"えっ"ってなりますが、ClearDBには4つぐらいの価格レベルがあって、"Mercury",“Venus”,“Saturn”,“Jupiter"となっています。"Mercury"が無料プランです。直訳するから"水星"なんです。そこまで訳さなくてもいいのでは・・・

f:id:ninna2:20170409004720p:plain:w360

作成すると、デプロイが始まって裏でデータベースの作成を行ってくれます。すぐに終わります。完了するとAzure PortalからMySQLがみえるようになります。

f:id:ninna2:20170409004724p:plain:w360

アクセスするための情報を確認するためには、プロパティを見れば、データベースユーザーやパスワードなどの情報が見れます。

f:id:ninna2:20170409004728p:plain:w360

これでデータベースの器が出来ました。

MySQLへの接続

前にも紹介しましたが、MySQLへの接続には、"queryDB"というアプリを使います。SSH版もありますが今回はSSHを使わないので 無料版 のもので問題ないです。広告がかなり鬱陶しい点だけが不満ですが・・・

プロパティで確認した内容を元に、接続情報を入れて接続して見ましょう。普通につながればOKです。

f:id:ninna2:20170409004732p:plain:w360

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!!');

確認しておきます。

f:id:ninna2:20170409004736p:plain:w360

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

Node.jsでアプリケーションの作成

データベースにアクセスしてデータを取り出すアプリケーションをNode.jsでちょこっと作成してあげましょう。過去記事でもいくつかの書いているのでその流用です。

package.json

まずはpackage.jsonを準備しておきます。今回は、Node.jsのバージョンは、6.9.4を指定し、expressとmysql2を使うように指定しています。

{
  "name": "azure-mysql",
  "version": "0.0.1",
  "description": "azure-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",
    "mysql2": "*"
  }
}

index.js

次に本体のコードを書いていきます。host,user,password,databaseは各環境に合わせて埋めて下さい。中身の説明はするまでもないので省略します。

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

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

var pool = mysql.createPool(db_config);

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

app.get('/', function(request, response) {
    console.log("azure-mysql!!");
    pool.getConnection(function(err, connection){
        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();
        connection.release();
        });
    });
});

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

アプリケーションのデプロイ

Node.jsでアプリケーションが出来たので、デプロイしていきましょう。アプリケーションを乗せるWeb Appsは、事前に作成しておいて下さい。私は前回記事で作成したものを流用してやっていきます。

Web AppsでDropboxをソース管理に使うように設定しているので、DropboxにNode.jsのアプリケーションをアップロードしていきます。

f:id:ninna2:20170409004740p:plain:w360

Azure PortalからWeb Appsを開き、デプロイオプションから同期します。

f:id:ninna2:20170409004744p:plain:w360

デプロイは無事成功したみたいです。

f:id:ninna2:20170409004748p:plain:w360

Node.js特有の設定を何もしていないのに勝手に(!?)対応してくれたようです。Azureすごいです。一応、ログの確認をしておきたいと思います。

Command: "D:\home\site\deployments\tools\deploy.cmd"
Handling node.js deployment.
Using start-up script index.js from package.json.
Generated web.config.
Node.js versions available on the platform are: 0.6.20, 0.8.2, 0.8.19, 0.8.26, 0.8.27, 0.8.28, 0.10.5, 0.10.18, 0.10.21, 0.10.24, 0.10.26, 0.10.28, 0.10.29, 0.10.31, 0.10.32, 0.10.40, 0.12.0, 0.12.2, 0.12.3, 0.12.6, 4.0.0, 4.1.0, 4.1.2, 4.2.1, 4.2.2, 4.2.3, 4.2.4, 4.3.0, 4.3.2, 4.4.0, 4.4.1, 4.4.6, 4.4.7, 4.5.0, 4.6.0, 4.6.1, 5.0.0, 5.1.1, 5.3.0, 5.4.0, 5.5.0, 5.6.0, 5.7.0, 5.7.1, 5.8.0, 5.9.1, 6.0.0, 6.1.0, 6.2.2, 6.3.0, 6.5.0, 6.6.0, 6.7.0, 6.9.0, 6.9.1, 6.9.2, 6.9.4, 6.9.5, 6.10.0, 7.0.0, 7.1.0, 7.2.0, 7.3.0, 7.4.0, 7.5.0, 7.6.0.
Selected node.js version 6.9.4. Use package.json file to choose a different version.
Selected npm version 2.1.17
Updating iisnode.yml at D:\home\site\wwwroot\iisnode.yml
(node:8684) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
npm WARN package.json azure-mysql@0.0.1 No repository field.
npm WARN package.json azure-mysql@0.0.1 No README data
express@4.13.3 node_modules\express
├── escape-html@1.0.2
├── merge-descriptors@1.0.0
├── array-flatten@1.1.1
├── cookie@0.1.3
├── utils-merge@1.0.0
├── methods@1.1.2
├── cookie-signature@1.0.6
├── vary@1.0.1
├── content-type@1.0.2
├── fresh@0.3.0
├── etag@1.7.0
├── parseurl@1.3.1
├── range-parser@1.0.3
├── content-disposition@0.5.0
├── path-to-regexp@0.1.7
├── depd@1.0.1
├── qs@4.0.0
├── on-finished@2.3.0 (ee-first@1.1.1)
├── finalhandler@0.4.0 (unpipe@1.0.0)
├── debug@2.2.0 (ms@0.7.1)
├── proxy-addr@1.0.10 (forwarded@0.1.0, ipaddr.js@1.0.5)
├── accepts@1.2.13 (negotiator@0.5.3, mime-types@2.1.14)
├── type-is@1.6.14 (media-typer@0.3.0, mime-types@2.1.14)
├── send@0.13.0 (destroy@1.0.3, statuses@1.2.1, ms@0.7.1, mime@1.3.4, http-errors@1.3.1)
└── serve-static@1.10.3 (escape-html@1.0.3, send@0.13.2)

mysql2@1.2.0 node_modules\mysql2
├── object-assign@4.1.1
├── sqlstring@2.2.0
├── generate-function@2.0.0
├── safe-buffer@5.0.1
├── seq-queue@0.0.5
├── denque@1.1.1
├── lru-cache@4.0.2 (pseudomap@1.0.2, yallist@2.0.0)
├── named-placeholders@1.1.1 (lru-cache@2.5.0)
├── long@3.2.0
├── readable-stream@2.2.2 (buffer-shims@1.0.0, inherits@2.0.3, string_decoder@0.10.31, util-deprecate@1.0.2, process-nextick-args@1.0.7, core-util-is@1.0.2, isarray@1.0.0)
├── iconv-lite@0.4.15
└── cardinal@1.0.0 (ansicolors@0.2.1, redeyed@1.0.1)
Finished successfully.

“Using start-up script index.js from package.json"となっているので、package.jsonをちゃんと参照してくれている様子がわかります。"Selected node.js version 6.9.4"となっているので、指定したNode.jsを使ってくれているようですね。 "Updating iisnode.yml"から、iisnodeを内部的に使用している事がわかります。Azureはやはりiisベースなのですね(公式サイト読んだらちゃんと書いてありました)。"express@4.13.3 node_modules\express”,“mysql2@1.2.0 node_modules\mysql2"でちゃんと外部パッケージも取得してデプロイしてくれています。さすがです。

アプリケーションの実行

最後にちゃんと実行できるか確認しておきます。

f:id:ninna2:20170409004753p:plain:w360

しっかりデータベースの中身が表示出来ました。Node.jsのアプリケーションはpackage.jsonをしっかり書いておけば、デプロイもほぼWeb Apps側に任せて大丈夫なようです。理解してしまえばすごく簡単ですね。一応、iPhoneだけでここまで出来ました。

みなさんの参考になれば幸いです。