2016/12/06

Vue.js+Vuex、Express4、Dockerなどを使ってさくらのクラウドのAPIクライアントを作った

Labels: , , , ,
この記事は「さくらインターネット Advent Calendar 2016」の6日目の記事です。

さくらのクラウドのAPIドキュメントはご存知だろうか？
ドキュメントにはAPIの一覧やパラメータの詳細などが載っている。curlコマンドのサンプルも載っているので、APIを実行することはできるのだが......。


なんかイケてない。


macOSやLinuxを使っている人は問題ないが、Windowsユーザに優しくない。curl？なにそれ？
もっとインタラクティブでダイナミックに動かせるドキュメントだったらいいのに…。


ということで、さくらのクラウドのAPIをブラウザから実行できる「sacloud-api-tester」をつくった。

APIキーを入力し、左のAPIリストから試したいリクエストを選択、実行するだけでリソース操作やレスポンスを確認できる。
※「SwaggerやPostmanを使え」はNGワード



使い方


※ デモページ（APIは実行されません）


1. さくらのクラウドのAPIキーを作成

さくらのクラウドにログインし、コントロールパネル右上の「設定」から「APIキー」に進み、APIキーを作成する。APIキーが外部に漏れてしまうと、リソースの作成・削除・更新などができてしまうので取り扱いには要注意。


2. sacloud-api-testerにAPIキーを入力し、「RUN」をクリック

さきほど取得したAPIキーを、sacloud-api-testerの「Access token」「Secret token」に入力し、「RUN」ボタンをクリックする。
たったこれだけで、さくらのクラウドのAPIをテストすることができる。

Request paramsに条件を入力すれば、取得するフィールドやフィルタ、ソートなどが指定できる。パラメータの詳細については、さくらのクラウド API v1.1 ドキュメントを参照してほしい。



3. APIを検索する

サイドバーにある検索フォームを使うことで、APIを検索することができる。



4. 実行履歴を確認する

APIを実行したときの結果を履歴として保持しているので、過去の実行結果を参照することができる。

ちなみにデフォルトでは、タブを閉じると履歴が消えてしまう。
設定から履歴の保存先を「LocalStorage」に変更することで、ブラウザを閉じても履歴を保持することができる。


このサービスを公開するにあたり、さくらのDockerホスティングサービス Arukas.io での公開も考えたが、さすがに証明書が入ったイメージをパブリックにするのは怖い。
またAPIキーをお漏らしすると、高額請求や重要データの削除をされる可能性がある。


という経緯から、Webサービスとして公開することは断念した。

その代わりデプロイ用のスクリプトを用意した。
たとえばさくらのクラウドで最小構成のCentOS7.2のサーバを作り、以下の手順にそって証明書の作成、スクリプトの実行をすれば、すぐにsacloud-api-testerを使うことができる。（初回実行時はDockerイメージなどをダウンロードするので、3〜5分ほどかかる）

# リポジトリをクローンする
git clone https://github.com/BcRikko/sacloud-api-tester.git
cd sacloud-api-tester

# オレオレ証明書を作成する
yum install mod_ssl -y
cd keys

# 秘密鍵を作成する
openssl genrsa 2048 > server.key

# 証明書署名要求で国名や組織名を入力する（すべて空白EnterでもOK）
openssl req -new -key server.key > server.csr

# 30日間有効なサーバ証明書を作成する（-days 365にすれば1年間有効)
openssl x509 -in server.csr -days 30 -req -signkey server.key > server.crt

cd ..

#　環境セットアップ
bash ./script/setup.sh

# デプロイ（https://IPアドレス で利用できる）
bash ./script/deploy-multi.sh

#----------------------
#　停止
bash ./script/stop.sh



使っているライブラリや環境

フロントエンド



バリデーションにvue-validatorを使いたかったのだが、Vue.js 2.0版はまだalpha.1だったので自前で実装することにした。中の人のお話しを伺うといろいろ大変らしい。

HTTP通信はFetch APIを使おうとしたのだが、4xxや5xxエラーがキャッチできずに断念。どうやらそういう仕様らしい。なのでvue-resourceを使うことに。
しかし、vue-resourceも公式から外れてしまった。公式ブログではAxiosを推奨している。

ちなみにサイドバーのAPI一覧は、スクレイピングしたものをJSONファイルに加工して読み込んでいる。スクレイピングの処理はJSFiddleにあげているので、ご参考までに。


サーバサイド




実行環境





さいごに


本当はVue.js+Vuexの勉強のためにサービスを作り始めたはずなのだが、CORSで怒られるので仕方なくサーバサイドも実装。
どうせならローカル環境だけでなく、ちゃんとサービスとして提供できるようにするためNginxについて勉強。
環境構築も自動化したかったので、Dockerについて勉強。
Webで公開するならとSSL/TSLなどのセキュリティについても勉強。
HTTPS化したらシングルコンテナではうまくいかなくなったので、docker-composeについて勉強。


yak shavingかよと思いつつも、いろんなことについて勉強できたのは良い機会だった。

サーバサイドというか、ミドルウェアというか、はまだまだ初心者でおかしな構成・設定があるかもしれない。「こうしたほうが良い」などアドバイスをいただけると幸いです。


さいごに、さくらのクラウドの中の人へ。
ドキュメントからAPIを実行できるようにしてください。
あとパラメータをもうちょっと詳しく載せていただけると助かります！
お願いします、なんでもしｍ


余談だが、さくらのクラウド関連でずいぶん前に「Slackからサーバ操作できるbot」を作った。
「エンジニアなら彼女のひとりやふたり"創"れないと！」と思い立ち作り、自分だけのAIを目指して始めたものなのだが、機械学習やディープラーニング、数学、統計学などがあまりにも難しすぎて挫折した。あれは片手間にやるもんじゃない。
不完全なものだが、興味のある方はぜひ触ってみてください。




以上

written by @bc_rikko
時刻:
Labels: , , , ,

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )