Vuexの値の更新を監視したい

福岡拠点の宮里です。

vueのコンポーネントからvuexの値の更新を監視して、vuexの値の更新があったときにローカルのデータを更新したい場合どうすればいいの?と調べることがあったので備忘録として記事を書きます。

まずは、vuexの日本語ドキュメントを読みました。
vuexのStoreインスタンスメソッド’watch’が良さそうです。

watch(fn: Function, callback: Function, options?: Object): Function

fnが返す値をリアクティブに監視し、値が変わった時にコールバックを呼びます。fnは最初の引数としてストアのステートを、2番目の引数としてゲッターを受け取ります。 Vue のvm.$watchメソッドと同じオプションをオプションのオブジェクトとして受け付けます。

監視を止める場合は、返された unwatch 関数を呼び出します。

(vuex.vuejs.orgより引用)

うーん、vue.jsに慣れてないので上記の説明を読んでもよくわかりません。
store.watch()で引数に関数を渡して、関数の引数に監視したいstateの値を指定するみたいです。

うーん、もう一声。

‘vuex store.watch’で検索するとそれっぽい参考になりそうなコードがいくつか。
イメージはつかめてきたものの、ただ今回は、複数に分割したストアのモジュールのローカルステートを監視したかったので、mapGettersやmapStateで実際どう書けばいいのと悩むこと数十分。

ありました、ありました!
vue.js開発者の方のブログに「Watch for Vuex State changes!」という記事が!!
探してたのこれこれ!ありがとうございます!と参考にさせていただきましたm(_ _)m

四苦八苦しつつもなんとかこのかたちに落ち着きました。
this.$store.watch()の第一引数にステート/ゲッター、どちらを渡してもうまくいきそうです。

Gitlab第1歩

福岡拠点の宮里です。
社内用にGitlab環境を構築しました。

当初は、必要なミドルウェアをひとつひとつソースからインストールして、Gitlab環境を作ろうとしていたのですがこれが大変。今回はまっさらな環境に構築するというのと、ソースからインストールした場合は導入後の管理の手間もかかるという理由もあり、おとなしく公式パッケージからインストールすることにしました。

公式パッケージを使用すると、当たり前ですが本当に楽ちん。1時間ぐらいで初期設定まで完了します。

Gitlabの公式ドキュメントでも、わざわざ一番最初に”パッケージからインストールすることをおすすめするよ”と書いてあるのですが、ちゃんと言うこと聞いておけば良かったと今回本当に身に染みました。

Omnibusパッケージのインストールを検討する
ソースからのインストールは多くの作業とエラーが発生しやすいので、高速で信頼性の高いOmnibusパッケージのインストール(deb / rpm)を強くお勧めします。

(公式ドキュメントより引用)

あと、最低限の使用でもハードウェアリソースの要件が意外と高く、まず最初に導入するサーバーのスペックが要件を満たしているか確認することをおすすめします。スペックが足りてないと、インストールしたあとに500エラーが頻発します(/д\)

公式ドキュメントのインストール要件ページ

公式パッケージを使用するのであれば、やることは簡単です。

設定ファイルを修正後、Gitlabの再構成コマンドを実行します。

サーバーのIPへアクセスして、Gitlab管理ユーザーのパスワードを変更したらインストールは完了です。

公式ドキュメントをちゃんと読んで確認することはしっかり確認しよう、というお話でした。

すてきなLaradock

福岡拠点の宮里です。
Dockerを勉強し始めました!
DockerでLaravel開発環境を構築する場合に便利なLaradockというパッケージがあり、併せて勉強中です。

Laradockとは

PHP開発環境を構築できるDockerイメージのパッケージです。
DockerでLaravelプロジェクトを実行することに焦点を当てて開発されています。
Laravel以外にもSymfony、CodeIgniter、WordPress、Drupalなどの他のPHPプロジェクトもサポートしています。
officialのDockerイメージをベースに拡張したパッケージなので信頼性があるとのことです。

Laradockが魅力的なのは、なんといってもその豊富なソフトウェア群です。
build→upで必要なライブラリを都度追加・更新が行えます。

備忘録としてそのパッケージをリストアップしました。(2018年11月時点)

サポートしているソフトウェア(一部)

Portainer

Docker管理WebGUIツール
公式サイト: https://portainer.io/

Docker Registry

Dockerプライベートレジストリサーバ
Dockerドキュメント: https://docs.docker.com/registry/

Docker Web UI

DockerプライベートレジストリWebUI管理ツール
Github: https://github.com/kwk/docker-registry-frontend

MySQL

データベースサーバ
公式サイト: https://www.mysql.com/jp/

MariaDB

MySQL派生のオープンソースデータベースサーバ。
公式サイト: https://mariadb.org/

phpMyAdmin

MySQLサーバー管理ツール
公式サイト: https://www.phpmyadmin.net/

PostgreSQL

オープンソースデータベースサーバ。
公式サイト: https://www.postgresql.org/

pgAdmin

PostgreSQLサーバー管理ツール
公式サイト: https://www.pgadmin.org/

Microsoft SQL Server

データベースサーバ
公式サイト: https://www.microsoft.com/en-us/sql-server/sql-server-2017

Redis

オープンソースのメモリ内データ構造ストアで、データベース、キャッシュ、メッセージブローカーとして使用。NoSQLデータベースサーバ。
公式サイト: https://redis.io/

Aerospike

KVS。フラッシュ(SSD)に最適化したNoSQLデータベースサーバ。
公式サイト: https://www.aerospike.com/

Minio

Go言語製Amazon S3クラウドストレージサービスと互換性を持ったオブジェクトストレージサーバ。
公式サイト: https://docs.minio.io/

Apache2

世界中でもっとも多く使われているWebサーバ
公式サイト: https://httpd.apache.org/

Nginx

Webサーバ
公式サイト: https://nginx.org/en/

Caddy

Go言語で実装されたwebサーバ
公式サイト: https://caddyserver.com/

Varnish

HTTPアクセラレータ
公式サイト: https://varnish-cache.org/

Certbot

Let’s Encryptのクライアント
公式サイト: https://certbot.eff.org/

Laravel Echo Server

LaravelのSocket.IOサーバライブラリ
Laravel公式ドキュメント: https://laravel.com/docs/5.7/broadcasting
GitHub: https://github.com/tlaverdure/laravel-echo-server

Swoole

PHPネットワークフレームワーク。
公式サイト: https://www.swoole.co.uk/

Solr

オープンソースの全文検索エンジン
公式サイト: http://lucene.apache.org/solr/

Elasticsearch

Lucene基盤の分散処理マルチテナント対応オープンソースの検索エンジン。分散型RESTful検索/分析エンジン。
公式サイト: https://www.elastic.co/jp/products/elasticsearch

Kibana

Elasticsearch用ビジュアライズ/データ可視化ツール
公式サイト: https://www.elastic.co/jp/products/kibana

Grafana

データ可視化ツール。
対応ツール:Graphite、Prometheus、Elasticsearch、InfluxDB、OpenTSDB、MySQL、AWS Cloudwatch
公式サイト: https://grafana.com/

Metabase

オープンソースのデータ可視化ツール
対応:MySQL, Postgres, Mongo, SQL Server, AWS Redshift, Google BigQuery, Druid, H2, SQLite, Oracle, Crate, Google Analytics, Vertica
公式サイト: https://www.metabase.com/

NetData

サーバのリアルタイムパフォーマンスと健全性モニタリングツール
Github: https://github.com/netdata/netdata

Thumbor

画像のクロッピング、リサイズ、フィルタリング等の画像変換サーバー
公式サイト: http://thumbor.org/

Beanstalkd

オープンソースのメッセージキューイング。Laravelがサポート。
公式サイト: https://beanstalkd.github.io/

Beanstalk Console

PHP製Beanstalkd管理ツール
Github: https://github.com/ptrofimov/beanstalk_console

RabbitMQ

メッセージキューイング
公式サイト: https://www.rabbitmq.com/

HHVM

PHP実行環境
公式サイト: https://hhvm.com/

PHP-FPM

PHP FastCGI実装
公式サイト: https://php-fpm.org/
PHPドキュメント: http://php.net/manual/ja/install.fpm.php

JupyterHub

Jupyter Notebook用のマルチユーザーサーバ
公式サイト: https://jupyterhub.readthedocs.io/en/stable/

ICEcoder

PHP製のWebブラウザIDE。
公式サイト: https://icecoder.net/

Coding WebIDE

クラウドベースのWebIDE
公式サイト: https://ide.coding.net/

Codiad

PHP製のWebブラウザIDE。
公式サイト: http://codiad.com/

Theia

クラウド版Visual Studio Code
公式サイト: https://www.theia-ide.org/

Mailu

DockerベースのWebUI付きメールサーバ
公式サイト: https://mailu.io/

MailDev

Eメールテストツール。
SMTP Server + Web Interface for viewing and testing emails during development.
Github: https://github.com/djfarrelly/MailDev

MailHog

Go言語製Eメールテストツール。
Web and API based SMTP testing
Github: https://github.com/mailhog/MailHog

Selenium

ブラウザ自動化ツール
公式サイト: https://www.seleniumhq.org/

Blackfire

PHPプロファイリングツール。パフォーマンステストツール。結果をWebUIで確認できる。
公式サイト: https://blackfire.io/

Jenkins

Java製オープンソース継続的インテグレーションツール
公式サイト: https://jenkins.io/

GitLab

Gitリポジトリ管理
公式サイト: https://about.gitlab.com/

積極的に活用していきたいですね。

AWSでインスタンスを停止し、再起動した時にパブリックIPが割り振られない場合

AWS特訓中の宮里です。

AWSでインスタンスを作成したときに、少し困った現象があったため情報共有したいと思います。

AWSで作成したインスタンスを一旦停止後、ネットワークインターフェイスを追加し、再起動した後にパブリックIPが割り振られない現象が発生しました。

?????となりながら、再起動を何度か試すもパブリックIPは復活せず。
作成したばかりのインスタンスだったので、インスタンスを一から作成し直し、特に問題は起こりませんでした。
その後、気になったので原因を調べてみると、AWS公式のドキュメントに今回の現象の解答がありました。

下記、公式のドキュメントから一部引用します。

手動でパブリック IP アドレスをインスタンスに関連付けること、また、手動でインスタンスから割り当て解除することはできません。場合によって、パブリック IP アドレスはインスタンスから解放されたり、新しいインスタンスに割り当てられたりします。
インスタンスが停止または終了されると、インスタンスのパブリック IP アドレスは解放されます。停止していたインスタンスが再起動されると、そのインスタンスには新しいパブリック IP アドレスが送信されます。
VPC 内のインスタンスのパブリック IP アドレスが既に解放されている場合には、複数のネットワークインターフェイスがインスタンスにアタッチされていると、インスタンスに新しいパブリック IP アドレスは送信されません。

出典:
AWS ドキュメント「パブリック IPv4 アドレスと外部 DNS ホスト名」

インスタンスを再起動するときは、プライマリENI以外はインスタンスにアタッチしてはいけないということでした。。。

少しづつ身につけていきたいと思います。

AWSのタイムゾーン設定でハマった件

福岡拠点の宮里です。
先日、アパッチのアクセスログをアーカイブして一定期間保存する作業を行っていたのですが、

apache-loggenでダミーアクセスログの生成

ログを確認していると、何か違和感が…

|02/May/2018:09:24:59 +0000|

私「あれ?もう出社して9時間は経ってて、もう今日も終わっちまうのかなぁって気がしていたけど」

心の中の金子賢「バカヤロー、まだ始まってもいねーよ」


サーバー時刻をUTCからJSTへ変更

あれあれあれと心を鎮めながら、サーバーに設定されているタイムゾーンを確認してみると、

このサーバーのタイムゾーンはUTC。
このままだとなにかと不都合です。
心臓にもわるいので、JST時間帯へ変更したいと思います。

sysconfigディレクトリの設定ファイル(clock)からタイムゾーンを修正します。
ひとまずバックアップ取って、

シンボリックリンクの向き先Asia/Tokyoへ変更します。

サーバーのタイムゾーンがUTCからJSTに変わりました。

これでひと安心かと思いきや、
この作業を行う前にすでに記録されているログの時刻をJSTに修正しないと何かと収まりがわるいです。
なので、USTで記録されているログをJSTへと変換するスクリプトを作りたいと思います。


既に出力されているログの時刻をJSTへ修正

スクリプトは、サーバーに標準でインストールされているpythonで作成してライブラリをひとつだけ追加します。

pytzの取得

JSTへ変換するスクリプト
changeJst.py

粗いスクリプトですが、ひとまず期待通りに動くことが確認できましたので、作業するサーバーのhttpdを停止してスクリプトを実行しました。ちなみにAWSのELBがunhealthyを認識して振り分けを開始するまで約1分~2分ほどかかるようです。認識する前にhttpdを止めると502で振り分けもされなくなるので注意が必要です。

処理するディレクトリのバックアップを取って実行。

なんとか完了です。
サーバー時刻もUTCからJSTへ変更します。
その後、httpdを再起動。
無事に現在時刻が18時に修正されました。
やっと終わっちまえます。


あれ、cronの実行がおかしい

それから様子をみること数日。
dateコマンドやログに出力される時刻はしっかりUTCからJSTに変更がされているけど、cronに設定したタスクの実行時間がおかしい!どうにも9時間遅れて実行されている!と気づきました。
調べてみるとサーバーのタイムゾーンを変更しただけではcronの実行時刻への反映がされないようです。crondを再起動してJSTタイムゾーンの反映が必要でした。。。

crontabの設定ファイルへtimezoneを記述して、crondの再起動。

これでcronの実行時間にもJSTが反映されました。

apache-loggenでダミーアクセスログの生成

はじめまして、福岡拠点の宮里です。
今後ともよろしくお願いします。

先日、アパッチのアクセスログをアーカイブして一定期間保存する作業を行いました。その一定期間を「過ぎた」「過ぎていない」の判定のテストに、アクセスログのダミーデータをたくさん使いたかったので、Rubyで動く「apache-loggen」というツールを使用してダミーデータを作成しました。

また使用する機会がありそうなので、備忘録として記事に残します。

前準備

local環境
CentOS6.9

まずは、Apache-2.4からインストールしていきました。

makeに必要なライブラリをyumでインストール。

次に、aprをwgetしたソースからインストール。

apr-utilもソースからインストール。

ライブラリが揃ったので、httpdをwgetしてソースからインストール。

ここからいろいろ設定を記述して、無事アパッチの起動が確認できました。
ブラウザからlocalhostにアクセスすると、しっかりアクセスログが作成されています。

apache-loggenでダミーアクセスログの生成

「apache-loggen」を動かすのにRubyが必要なので、
またyumで必要なライブラリを追加インストールします。

Rubyの最新安定版をwgetしてソースからインストール。

Rubyのインストールが完了したので、pathを通して、やっとgem install。

「apache-loggen」が/usr/local/bin/へインストールされます。
必要であればpathを通します。

これで準備は完了です。

うっかりapache-loggenと叩くと、
apache-loggen
ドキドキしました。
こうならないためにオプションでダミーデータの生成件数と、秒あたりの生成件数、必要であれば件数でローテート(区切り)も指定して、出力先を指定します。

あとは、一万件/1日のダミーログを30日分を生成するスクリプトで、

ダミーデータがたくさん生成されてほくほくです。
ありがとうございました。