【SlabCache】httpsへのcurlの罠

ことの起こり

muninプラグインのhttprespを使わせていただいてます。

tsuchinoko.dmmlabs.com

プラグインの中身は、curlでurlを叩いて、名前解決〜転送終了までを細かく時間を計測できます。

問題は、監視対象をhttpsにしたときに起こりました。

問題点

  • メモリが増えていく。

f:id:tama1029hq:20161212103240j:plain

上記がcurlを叩いているサーバですが、徐々に黄色の部分が増えていっていることが分かります。 これはslab_cacheという部分です。

slab_cacheとは何か また何が使われているのか

  • slab_cacheとはカーネルが使うキャッシュ
  • 調べていくうちに dentry_cacheが大量に作られていて、しかも使われていないことが分かった。
  • ためしにecho 2 > /proc/sys/vm/drop_cachesでキャッシュを消してみるも、またslab_cacheが増えてくことが分かった。

こりゃ根本対処するしかない(´°̥̥̥̥̥̥̥̥ω°̥̥̥̥̥̥̥̥`)

ぐぐったら同じ状況の人にあたる

s-tajima.hateblo.jp

結局、原因はcurlのバグのようなものです。

対処方法

Bug 1044666 – Can curl HTTPS requests make fewer access system calls?

  • 上記で報告されてますが、nss-softokn-3.14.3-12.el6より上のバージョンにする。
  • curl叩く直前にexport NSS_SDB_USE_CACHE =yes入れる。

結果

綺麗にslab_cacheが減った。めでたしめでたし。

f:id:tama1029hq:20161212105059j:plain

【angular1.x】お世話になっているライブラリ3種類

前置き

この記事はSpeee Advent Calendar 2016 - Qiitaの9日目の記事です。

前日の記事はこちらです。

eva-hashimoto.hatenablog.com

本題

自分で機能作るのは何かと大変ですよね。 今回はangular使う上でお世話になったライブラリを紹介します。

※angular1.x系を対象としていますので、angular2使ってる方は対象外となります。

ngImgCrop

ソースコード

https://github.com/alexk111/ngImgCrop

デモサイト

http://jsfiddle.net/alexk111/rw6q9/

特徴

  • 画像の切り取りが簡単にできる
  • リアルタイムの切り取り後の表示ができる

使い方

ライブラリを読み込んだ後、img-cropディレクトリを記述します。

<img-crop
    image="{string}"
    result-image="{string}"
></img-crop>

image : 読み込んだ画像 result-image : 切り取った後の画像 ここではcroppedImageとする

切り取った後の画像を表示

<img ng-src="{{croppedImage}}">

wu.masonry

ソースコード

https://github.com/passy/angular-masonry

デモサイト

http://passy.github.io/angular-masonry/

特徴

  • jqueryのmasonryと同様で、並べた要素をいい感じに整列してくれます。

使い方

公式にあるとおりですが、ライブラリを読み込んだ後、masonryディレクティブを配置し、その下でng-repeatで繰り返すものを表示するだけです。

<div masonry>
    <div class="masonry-brick" ng-repeat="brick in bricks">
        <img ng-src="{{ brick.src }}" alt="A masonry brick">
    </div>
</div>

ngDialog

ソースコード

https://github.com/likeastore/ngDialog

デモサイト

http://likeastore.github.io/ngDialog/

特徴

  • ポップアップを実現するのに適しています。
  • データの受け渡しが容易
  • 終了時のコールバック受取が容易

使い方

今回は、アラートをポップアップで出すことを例にします。

ライブラリを読み込む(app.jsとかにいれてください)

controllerで宣言したあと

angular.module('xxx')
  .controller('ModalAlertCtrl',['$scope', function ($scope) {
  }]);

ポップアップの見た目のhtmlを置いておきます。(今回はalert.htmlとします。)

<div class="modal">
    <div class="modal-container">
        <div class="modal-head">
            <h2>{{ngDialogData.alertHead}}</h2>
        </div>
        <div class="modal-body">
            {{ngDialogData.alertBody}
        </div>

        <div class="modal-button">
            <button class="form-submit" ng-cloak ng-click="closeThisDialog()">OK</button>
        </div>
    </div>
</div>

ポップアップ呼び出し側で、下記のように呼び出すことでアラートが出せます。

ngDialog.open({
            template: 'alert.html',
            data: { alertHead: 'エラーやで' , alertBody: '保存に失敗しました'},
            className: 'class-name',
            controller: "ModalAlertCtrl",
            preCloseCallback: function(value) {
              window.onbeforeunload = function(){};
              location.href='/';
            }
          });

data : データの受け渡しの時にここにいれます。 preCloseCallback : ポップアップが閉じられた時に動作します。上記例だと強制的に / に戻させています。

まとめ

自分で作るよりもライブラリを使うと、短時間で機能ができていいですよね。 特にngDialogなどは自分でカスタマイズして使うことで、より時間の短縮が可能になります。