まだプログラマーですが何か?

プログラマーネタ中心。たまに作成したウェブサービス関連の話も https://twitter.com/dotnsf

JavaScript で Cloudant や CouchDB を操作できるようになるライブラリの1つに PouchDB があります:
https://pouchdb.com/

2016031701


PouchDB は CouchDB および CouchDB と互換性のあるローカル NoSQL データベースです。JavaScript を使ってデータを読み書きし、またリモートの CouchDB サーバーにアクセスしたり同期したりすることもできるものです。広い意味ではデータベース本体および JavaScript ライブラリを合わせて PouchDB と呼ぶこともあります。

という特徴をもった、この PouchDB の JavaScript ライブラリを使うと、リモートの CouchDB データベースにアクセスすることができるようになります。JavaScript ライブラリなのでクロスサイトスクリプティング等のセキュリティ制約を意識しながら使う必要があります。

今回、紹介するのはこんな環境で JavaScript を使ってデータベースにアクセスする、というものです。HTML ファイルがローカルディスク内にあるので、普通にアクセスするとクロスサイトスクリプティング制約にかかって使えませんが、その制約を回避する方法と合わせて紹介します:
2016031705


まずは操作先の CouchDB サーバー環境を用意します。外部からアクセスするので Access-Control-Allow-Origin ヘッダのカスタマイズも必要になります。この辺りの手順は以下2つのブログエントリを参照ください:


この CouchDB サーバーの IP アドレスは XX.XX.XX.XX、ポート番号はデフォルトの 5984 であるとして以下を記述します。まずは CouchDB サーバーの管理コンソールにアクセスして、この後リモートから操作するためのデータベースを1つ作成しておきましょう。ウェブブラウザで http://XX.XX.XX.XX:5984/_utils/ にアクセスして管理コンソール画面にアクセスし、"Create Database" と書かれた箇所をクリックします:
2016031701


作成するデータベースの名前を問われるので適当な名称(この例では mydb)を入力して "Create" ボタンをクリックします:
2016031702


指定した名称のデータベースが作成され、その内容が表示されます。この時点では作成直後なのでドキュメントは存在していないはずです。とりあえず元の画面に戻るために "Overview" と書かれた箇所をクリックします:
2016031703


もとの管理コンソールのデフォルト画面に戻ります。先程まではなかった mydb というデータベースが追加されていることがわかります。このデータベースにリモートからアクセスすることが今回の目的です:
2016031704


次にローカル側の準備です。まずなにはともあれ PouchDB ライブラリが必要なので、PouchDB のトップページから最新版の PouchDB をダウンロードします。この記事を書いている時点での最新バージョンは 5.3.0 で、ダウンロードファイル名は pouchdb-5.3.0.min.js でした:
2016031701


次にダウンロードした PouchDB ライブラリを使って、リモートの CouchDB サーバーのデータベースにアクセスするプログラムをローカルに作成します。具体的には以下の様な HTML ファイル(index.html)をダウンロードした pouchdb-5.3.0.min.js と同じディレクトリに作成します:
<html>
<head>
<script src="./pouchdb-5.3.0.min.js"></script>
<script>
var db = new PouchDB('http://XX.XX.XX.XX:5984/mydb');
db.info().then( function( info ){
  console.log( info );
});
</script>
</head>
<body>
</body>
</html>

ソース内の XX.XX.XX.XX は CouchDB サーバーのホスト名または IP アドレスです。また mydb はアクセス先のデータベース名称です。この HTML では同じディレクトリにある pouchdb-5.3.0.min.js を読み込み、http://XX.XX.XX.XX:5984/mydb にアクセスして、成功したらその情報をウェブコンソールに表示する、というものです。繰り返しになりますが、このソースファイルはローカル環境にあり、このようなファイル構成になっています。そして HTML ファイルの読み込みと同時にリモートの CouchDB サーバーにアクセスして mydb データベースの情報を表示する、という内容の処理が記述されています:
2016031706


ではこの index.html をダブルクリックしてデフォルトブラウザで開きます。注意点としてウェブサーバー上の HTML ファイルを開いているのではなく、ローカルディスク内の HTML ファイルを開いている(アドレスのプロトコル部分が file:/// で始まっていることに注目)ことを確認してください。そして F12 を押してウェブコンソールを表示すると、上記 HTML 内の JavaScript コードが実行されて XX.XX.XX.XX:5984 の mydb データベースに関する情報が出力されていることを確認してください。ローカル環境から JavaScript でリモート環境の CouchDB サーバーのデータベースの情報を取得することができました!
2016031707


もしもここで以下のようなメッセージが表示されてしまう場合は、クロスサイトスクリプティングの制約にかかって、JavaScript が実行できなくなっている可能性が高いです。その場合はこのページの上部にある「CouchDB の Access-Control-Allow-Origin ヘッダを設定する」のリンク先に書かれている設定が足りない(または間違っている)ので、この内容を確認した上で再度試してみてください:
2016031708


以前のブログエントリで CouchDB サーバーの導入手順(というかビルド手順)を紹介しました:
CentOS に CouchDB をインストールする


上記の方法で自由に使うことのできる CouchDB サーバー1ノードが手元の環境に出来上がります。が、PouchDB などの JavaScript ライブラリを使ってこのサーバー上の DB を操作しようとすると、まだ手順が足りないこともあります。

具体的には、素のままの設定状態で JavaScript を使って CouchDB の REST API を実行しようとすると、クロスサイトスクリプティングのセキュリティ制約にかかってしまい、実行時にエラーを起こしてしまうのです。

クロスサイトスクリプティング制約を回避するには、(CouchDB の)HTTP サーバーに Access-Control-Allow-Origin ヘッダを付与して、明示的に制約を回避できるアクセス元を指定して回避する必要があります。その方法を紹介します。


まずは上記サイトを参照して CouchDB サーバー環境を用意します。以下の手順では上記方法で導入した CouchDB サーバー環境を利用するものとします。

次に /usr/local/etc/couchdb/local.ini をテキストエディタで開き、以下の内容を加えます(この例では Access-Control-Allow-Origin に * を設定して、事実上アクセス元の制約なしにアクセスできるような設定にしています):
  :
  :
[httpd]
port = 5984
bind_address = 0.0.0.0
enable_cors = true

[cors]
credentials = true
origins = *

  :
  :

この状態で CouchDB を再起動すると、CouchDB の REST API はどのサーバーからでもアクセスできるようになります。
# /etc/init.d/couchdb restart


実際に PouchDB を使って外部からのアクセスが可能であることを示すコードは別のエントリで用意する予定です。

CentOS に Apache CouchDB をインストールする手順を紹介します:
2016031602


Apache CouchDB はオープンソースのドキュメント指向 NoSQL データベースシステムです。元 IBM (元 Lotus!)のエンジニアである Damien Katz が Erlang 言語で開発したもので、IBM Bluemix から提供されている Cloudant のベースとなっているデータベースでもあります。

この Apache CouchDB をローカルの CentOS に導入する手順を紹介します。いつものように CentOS 6(64bit) を前提としますが、他のバージョンやアーキテクチャでもほぼ変わらないと思います。また導入する Apache CouchDB のバージョンは 2016/Mar/16 時点の最新版である 1.6.1 を対象とします。


今回は最新版を導入するということもあって、ソースコードからビルドして環境を構築します。というわけで、まずはビルドの前提となるライブラリ群や Erlang 言語関連のライブラリをまとめてインストールしておきます:
# yum install autoconf autoconf autoconf-archive automake ncurses-devel curl-devel erlang-asn1 erlang-erts erlang-eunit erlang-os_mon erlang-xmerl help2man js-devel libicu-devel libtool perl-Test-Harness


次に Erlang 言語本体をソースコードからビルド&インストールします:
# cd /usr/local/src
# wget http://www.erlang.org/download/otp_src_R14B01.tar.gz
# tar xzvf otp_src_R14B01.tar.gz
# cd otp_src_R14B01
# ./configure
# make
# make install


続けて JavaScript エンジンである Mozilla SpiderMonkey を、これもソースコードからビルド&インストールします:
# cd /usr/local/src
# wget http://ftp.mozilla.org/pub/mozilla.org/js/mozjs17.0.0.tar.gz
# tar xzvf mozjs17.0.0.tar.gz
# cd mozjs17.0.0/js/src/
# ./configure
# make
# make install


ここまでの準備ができたら Apache CouchDB を、やはりソースコードからビルド&インストールします:
# cd /usr/local/src
# wget http://mirror.tcpdiag.net/apache/couchdb/source/1.6.1/apache-couchdb-1.6.1.tar.gz
# tar xzvf apache-couchdb-1.6.1.tar.gz
# cd apache-couchdb-1.6.1
# ./configure
# make
# make install


これで Apache CouchDB 本体のインストールは完了です。実行前に CouchDB 実行用のユーザーを作成し、関連モジュールのオーナーをそのユーザーに変更します。またシステム起動時に CouchDB サーバーも起動するように設定しておきます:
# adduser --no-create-home couchdb
# chown -R couchdb:couchdb /usr/local/var/lib/couchdb /usr/local/var/log/couchdb /usr/local/var/run/couchdb
# ln -sf /usr/local/etc/rc.d/couchdb /etc/init.d/couchdb
# chkconfig --add couchdb
# chkconfig couchdb on

ここまでの作業でデータベースサーバーとして動くようになっていますが、HTTP プロトコルからも利用できるよう(REST API で読み書きできるよう)設定しておきます。/usr/local/etc/couchdb/local.ini を編集し、[httpd] セクション以下のコメントを解除して、以下のようにします(ポート番号 5984 で、自分自身のデータベースサーバーを読み書きできるように設定しています):
# vi /usr/local/etc/couchdb/local.ini

[httpd]
port = 5984
bind_address = 0.0.0.0


では CouchDB を実行します:
# /etc/init.d/couchdb start

この状態でウェブブラウザを使って(local.ini で指定した)5984 番ポートにアクセスすると、以下の様な JSON メッセージが表示され、バージョン 1.6.1 の CouchDB が稼働していることを確認できます:
2016031601


また同サーバーの /_utils/ パスにアクセスすると、ウェブコンソールの概要ページにアクセスできます。この画面からであればコマンドによる API を発行しなくても、ウェブの画面から新規にデータベースやドキュメントを追加したり、確認したりすることもできます:
2016031603







 

このページのトップヘ