#83 Vue.js & appサーバをスケーリングする

どうも、esuiです。

2017-04-07 13.56.56.jpg

先週は春の特別編として、勉強会を会社のすぐ横の金王八幡宮さんの敷地で行わせていただきました。

お寿司・ピザ・ハイネケンドラフトケグ5L・ウイスキー・泡盛の一升瓶などを持ち寄りまして、みんなでワイワイガヤガヤと楽しい勉強会となりました。
2017-04-05 13.15.54.jpg

勉強会の様子
2017-04-07 14.21.04.jpg

今年は寿司が若干の余り気味になるという展開になりながらも、なんとかほぼ完食。
天気にも恵まれ、ちょうど良い感じで春の訪れを感じることが出来ました。

平日の真昼間だったりしましたが、たまにはこういうのも良いですね。




Vie.js


さて、いつもの勉強会レポートに戻りまして、本日の1本目はVie.jsについての発表でした。

Vie.jsとは


https://jp.vuejs.org/
Vie.jsとは、シンプルなJavaScriptのMVVMフレームワークで、以下のような特徴となっています。

- 双方向データバインディングに特化されているので軽量
- シンプルゆえに学習コストが低い(実際低かった)
- シンプルゆえに機能は限定的(Ajaxとかない)
- =既存のシステムや他のライブラリと併用しやすい

MVVMとは


Model,View,ViewModelの頭文字(MとVとVM)から取ったGUIアプリケーションのアーキテクチャパターンのことで、
View ⇔ ViewModel間で双方向にデータバインドする、
ViewModel ⇔ Model間でデータの取得、更新を行う、といったものとなっています。

双方向データバインディングとは、
ざっくり言うとUIからの情報書き換えが発生したら対応するデータもだいたい同時に書き変わる、
逆に別の場所からデータが書き換えられた場合もそこに対応するUIがあれば表示が書き換わるようなものとなっています。

スクリーンショット 2017-04-28 00.22.05.png

実践編


ということで早速実践編へ。
実際に画面表示デモをしながら動作を確認されていました。

# 導入
## CDN


## npm

### $ npm install vue

## Download
https://jp.vuejs.org/v2/guide/installation.html

## HELLO VUE

{{ message }}





のようにすると、

Hello Vue!



のようにテンプレート構文からDOMが描画されます。

## 条件分岐

{{ message }}





とすると、

見えておるぞ



のようにレンダリングされ、
その後コンソールから
app.visible = false

と入力するとメッセージが消える事が確認できました。

## ループ


  1. {{ station.name }}






のように `v-for` ディレクティブを使うと、



  1. 渋谷

  2. 武蔵小杉

  3. 横浜




のようにアイテムのリストを配列内のデータを使って表示することができるようになっています。

## イベント
`v-on` ディレクティブを使うとイベントの登録を行うことが可能となっています。
https://jp.vuejs.org/v2/guide/#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%85%A5%E5%8A%9B%E3%81%AE%E5%88%B6%E5%BE%A1


応用編として、
Ajaxで取ってきたJSONから一覧表示するサンプルや、
リアルタイムでHTMLプレビューできるもの
2017-04-14 14.22.04.jpg
などのデモをされていました。

まとめ


Vue.jsを触ってみたまとめとして、

- あれやって~これやって~あのDOM消して~リライトして~とか考えなくていい世界が平和
- とにかく少ないコード記述量で済む
(=メンテナンス性が低下しづらい)
- シンプルゆえに余計なことしないのでありがたい
- 全体的に疎結合でよい(JSONを返してもらえればよい)

で、かなり良い印象でした、とのことでまとめとされていました。




クラウドのappサーバをスケーリングする


第二部は弊社インフラの発表でした。

現在、シーサーブログではappサーバをさくらのクラウド上に作成しており、
ブログ以外でもSeesaa Wiki, したらばなどのサーバもクラウドに移行が行われており、
可能な限りコストを抑えたい、ということでオートスケールしてみようとして試してみた内容についてでした。

サーバーのスケールイン/スケールアウト


スケールアウトとは、仮想マシンの台数を増やすこと。
リクエストの増加や全体の負荷が高くなってきたときに行います。

スケールインとは、仮想マシンの台数を減らすこと。
アクセスが少ない時間などに行います。

シーサーブログの場合


シーサーではサーバ監視にMackerelを利用させてもらっていますが、このグラフを見ると、以下の事が分かります。

- 深夜帯(0:00~)は負荷が現象していっている
- 8:00~負荷が増えていっている
- 12:00~13:00はお昼休みでちょっと負荷が増える
- 17:00~負荷が増える
→ 負荷やCPUが落ち着いてきている1:00~8:00くらいが台数を減らしてもよさそう

オートスケールの方法 1.


- appサーバの負荷を監視し、ある閾値を超えたら、スケールアウトする方法
→ 予期しないスケールアウトが行われる可能性があるので、今回はなし

オートスケールの方法 2.


- 負荷が少ない時間帯はスケールインする
→ 深夜に突発的にアクセスが急増した場合が怖いが、その他はなんとかなりそうで、またシンプルなので今回はこれで行う事にしたそうです。

やらなければいけないこと


- サービスから抜く
- 監視を止める
- サーバーの電源を停止する

※戻すときは逆の順で行う。

さくらのクラウドでは、サーバ停止状態では非課金となるため、使用していない時はサーバを停止します。

サーバの停止・起動ですが、
さくらのクラウドのAPIが用意されているため、こちらを利用しています。
http://developer.sakura.ad.jp/cloud/api/1.1/server/

実際には、cronの方でサーバの停止・起動時間を設定しました。
深夜1時、2時にサーバを順次停止し、朝7時、8時で再度起動しています。

ざっくりと料金を計算


現状の台数・スペックですと、

(内訳
5時間停止が2台 => 10時間
7時間停止が2台 => 14時間     計24時間

ということで、約1台分のコスト削減となりました。

ただし、この方法は現状ではロードバランサの出し入れをしなくても良い構成であるシーサーブログでしか使えない点、
サーバ負荷は曜日によっても違ってきたりするので、ちょうどよい台数を見極めるのが難しいため、
まだ日々調整を行っています、とのことでまとめとされていました。

この記事へのコメント