Carpe Diem

備忘録。https://github.com/jun06t

CloudFrontのキャッシュでハマった話

概要 ブラウザのキャッシュ - Carpe Diem を検証している時に期待した挙動をしなくてハマったので、CloudFrontのキャッシュの動作と注意点をまとめます。 CloudFrontのキャッシュ動作 レスポンスヘッダのx-cacheを見ると以下の3つに区別できます。 x-cache …

ブラウザのキャッシュ

概要 Webフロントのパフォーマンス診断 - Carpe Diem で指摘されたブラウザキャッシュの対応をするため調べてみました。 大きく分けて強いキャッシュと弱いキャッシュの2種類のキャッシュがあります。 強いキャッシュ ブラウザ側でリソースを保持し、期限が…

Webフロントのパフォーマンス診断

概要 Webフロントのパフォーマンスをチェックする診断ツールの紹介です。 なんだかもっさりした挙動だけどどこから手を付けたら良いか分からない、といった時に問題点を洗い出すのに便利です。 Audits Chrome DevToolsに標準で付いています。 ページを開いた…

GolangでBigQueryにデータを追加する

概要 GolangでのBigQueryの使い方です。 認証周りが以前と変わっており、JWTを使ってゴニョゴニョしてた部分をライブラリ側で吸収してくれるようになったのか使う側は簡単になりました。 環境 go 1.8.3 サービスアカウントキーの作成 API Console Credentials…

Golangのnilについて

Go

概要 先日の golang.tokyo #6 - connpass で独自のエラー型でnilにハマった点に触れられていて、自分でもふわっとしか覚えてなかったのでまとめ。 覚えること 以下を覚えておけばとりあえず大丈夫です。 nilは型を持つ interfaceの場合のみ、型もnilでないと…

Docker Imageのバージョン管理について

概要 development, staging, productionといった環境に分けてdocker imageを利用する場合のバージョン管理について考えてみました。 環境 AWS ECS AWS ECR Docker 17.03.1 要件 今回対応する時に考慮した要件は以下。 gitのtagと連動 ただし最新のimageのTAG…

macOS Sierraでulimitを変更する方法

Mac

概要 SierraのPCに変更した際、.bash_profileを過去のPCから引き継いだところulimitのところで設定が変わっていたのでメモ。 デフォルトの確認 $ ulimit -a core file size (blocks, -c) 0 data seg size (kbytes, -d) unlimited file size (blocks, -f) unl…

SPAを S3+CloudFront で表示する方法

概要 AngularなどのSPAをS3+CloudFrontで表示する方法についてです。 要件 SSL/TLSを使いたい https://example.com/hoge のようなサブディレクトリのようなパスで403にならないようにしたい ↑のようなパスでもOGPがきちんと表示される リロードしても404にな…

B TreeとB+ Treeの違い

概要 インデックスに対してMongoDBはB Treeを採用し、MySQLのInnoDBはB+ Treeを採用しています。 どうして採用しているアルゴリズムが違うのだろう?と思って調べてみました。 主な違い B+ TreeはほとんどB Treeと同じですが、以下の点が異なります。 リーフ…

Webフロントの実装で利用したChrome extension

概要 Angularを使ってWebフロントを実装しているのですが、その過程で便利だったChrome extensionを紹介します。 Chrome extension Page Ruler chrome.google.com 画面上でのピクセルを測るのに使う。デザイナーさんからPNGだけ頂いた時など。 ColorZilla ch…

署名と暗号強度について

概要 署名ロジックを選ぶ際に、どのアルゴリズムにするか、どれくらいの鍵長が適切なのかが分からなかったので調べてまとめました。 対象 共通鍵暗号(対称暗号) AES 公開鍵暗号 RSA ECC

GolangでJWTの具体的な実装

概要 以前JWTを認証用トークンに使う時に調べたこと - Carpe Diemで紹介した内容の具体的な実装の紹介です。 環境 golang 1.8.1 署名アルゴリズムと鍵長は以下とします。 署名アルゴリズム 鍵長 RSA-SHA256 4096bit 成果物 今回の完成形はこちら github.com

docker-compose で Kibana 5.x を使う

概要 Kibanaを5.xにメジャーアップデートする際、Elastic社公式のdocker imageも用意されたのでdocker-composeでまとめて作ることにしました。 その際調べたこと、ハマったことをまとめます。 環境 docker 17.03.1-ce docker-compose 1.11.2 Elasticsearch 5…

Webフォントのファイルサイズを小さくする

概要 Webフォントを当てると途端にサイトが良く見えるようになりますが、一方でフォントファイルに入っている文字数が多いため、必然的にファイルサイズが大きくなってしまいます。 そこでフォントのサブセット化と呼ばれる、使用する文字だけをフォントから…

RxJSのfinallyの挙動

概要 Angularにはリクエストのクエリパラメータを取得する方法として、 @Component({...}) export class MyComponent implements OnInit { constructor(private activatedRoute: ActivatedRoute) {} ngOnInit() { this.activatedRoute.params.subscribe((par…

Tasks(Macrotasks), Microtasksについて

概要 Angularで出てきたfakeAsyncやwhenStableを使う時に、microtasksの話が出たのでちゃんと理解しようと調べてみました。 実験 以下のjsのログ順はどうなるでしょうか? console.log('script start'); setTimeout(function() { console.log('setTimeout');…

AngularでAsync pipeを使う

概要 AngularのPipeの中にはAync PipeというPromiseやObservableな非同期オブジェクトをそのままtemplateで表示できるPipeがあります。 今回はその使い方を紹介します。 環境 angular 2.4.8 rxjs 5.2.0 async pipeのメリット 主なメリットは以下の2つです。…

Dockerでのdev, stg, prd環境分け

概要 dockerを扱う上で、dev, stg, prdの環境で動かす際の分け方について考えてみました。 環境 docker 1.13.1 docker-compose 1.11.1 主な分け方 思いつくのは以下の5つです。 imageを分ける 全環境のconfigファイルをimageに保持させ、RUN時に指定 templa…

Elasticsearchの前方一致について考える

概要 以前Prefix Query の注意 - Carpe Diemで述べたように、PrefixQueryはsearch queryがnot_analyzedになるので意図しない結果になることがあります。 一方で前方一致は検索の利便性を向上させる上でメリットが大きいので、入れておきたい要素でもあります…

Cold Observable と Hot Observable

概要 Observableを学ぶ上でCold ObservableとHot Observableの違いを理解していた方が良いと聞いたので調べてみました。 環境 rxjs 5.1.0 ざっくり表 Cold Observable Hot Observable イメージ オンデマンド再生のような、選んだら再生。再生するシーンは開…

RxのflatMapの使い方

概要 AngularでHttpModuleを連続して使う必要が出た時に、「毎回subscribeでネストが深くなるのが嫌だなぁ」と思ってぐぐったところ、「flatMapを使うと良いよ!」という記事を見つけて使ってみようとしたのがきっかけです。 他のmapやfilterなどと違ってパ…

Angularで中身を動的に変えられるModalを作る【応用編】

概要 前回の続きです。 前回の要件に加え、今回対応したいのは以下です。 開く時にパラメータを渡して、Modal内のComponentで利用したい 例えばエラーメッセージを渡して上部に通知バーを表示するなどを作る時にこういった仕組みが必要になると思います。 今…

Angularで中身を動的に変えられるModalを作る【基本編】

概要 確認用ダイアログなど、モーダルが必要になるシーンは多々あると思います。 今回はAngular2で実装する方法を紹介します。 環境 angular 2.4.7 angular-cli 1.0.0-beta.32.3 要件 今回満たしているのは以下の項目です。 serviceとしてどこからでも呼べる…

Papertrailでエラーログ監視

概要 以前Logentriesでエラー監視 - Carpe Diemでエラーログの監視方法を紹介しました。 ところがこのLogentriesで利用できていたアラート機能が有料プランのみになってしまったため、なにか無料で使えるサービスはないかと探したところ、この Papertrail - …

S3 + CloudFrontにした時にハマったこと

AWS

概要 静的Webサイトを用意して、HTTPSでアクセスできるようCloudFrontを前に用意したのですがそこでハマったことをまとめます。 ERR_SSL_VERSION_OR_CIPHER_MISMATCH 問題 SSL証明書を設定したのにERR_SSL_VERSION_OR_CIPHER_MISMATCHというエラーがでてペー…

Angularで作ったサイトでリロードすると404エラー

概要 Angular2で作ったサイトをS3のstatic website hostingで動かし、 https://www.mysite.com/login というURLにいる状態でリロードしたところ、Not Foundエラーが出てしまったのでその対応方法をまとめます。 環境 angular 2.4.7 angular-cli 1.0.0-beta.2…

Slackで新規チャンネルが作られたら通知する

概要 チームの人数が増えるとSlackのチャンネルも個々人が作っていつの間にかどんどん増えていきます。 知らずに同じようなチャンネルを作ったりしないよう、新規チャンネルが作成された時に#generalに自動で通知されたら便利だと思い設定してみました。 Zap…

AngularでFormのCustom Validation

概要 AngularでのFormのカスタムバリデーションには主に以下の方法があります。 Directiveで用意する ビルトインのValidatorsのような関数を用意する 今回は後者の実装例を紹介します。 validationロジック 今回はクレジットカードの簡易チェックをするvalid…

golang.tokyo#3でLTしました

Go

概要 golang.tokyo #3でLTをさせていただきました。 今回はパフォーマンスについてのイベントでした。 golangtokyo.connpass.com スライド 内容は先日ブログに書いたGolangでのstreamの扱い方を学ぶ - Carpe Diemと同じですが、今まで知らなかった人(僕も含…

Angular2でのForm 〜Model Driven編〜

概要 前回はTemaplate Drivenなフォームの作り方を紹介しました。 今回はModel Drivenなフォームの作り方を紹介します。 環境 angular-cli 1.0.0-beta.25.5 Angular 2.4.3 完成形 成果物はこちら github.com

Angular2でのForm 〜Template Driven編〜

概要 AngularのFormの書き方は主に2つあります。 1つはTemplate Drivenなやり方。 もう1つはModel Driven(Reactive Form)なやり方。 フォームの作り方を調べた時にどっちがどっちの情報なのか分からず混乱したのでまとめてみました。 今回はTemplate Dr…

Angular2でComponentをまたがったデータのやり取り

概要 Angular2でComponent間でデータをやり取りしたい状況が出てくると思います。 例えば「このボタンを押したら外部APIを叩いて状態を更新したい。その状態を他のComponentでも使っているので更新を反映したい」ときなどです。 今回はServiceにデータを保持…

Homebrewで過去のバージョンを使いたい

Mac

概要 新しいMacBookを使い始めたところ以前利用していた古いバージョンのツールを使う必要が出てきたのですが、意外と手間だったので忘れないようにまとめ。 環境 OSX El Capitan 10.11.6 Homebrew 1.1.6 旧バージョンをインストールしたことがある場合 brew…

Golangでのstreamの扱い方を学ぶ

Go

概要 結論から言うと、Streamで扱っているものはStreamのまま扱うです。 具体的にはio.Readerを毎回ioutil.ReadAllで[]byteに変換せずにそのまま使いましょうです。 なぜStreamを使うべきか Node.jsの例ですが、こちらで非常に分かりやすく説明されています…

負荷が低いのにアクセスを捌けきれない時の対応

概要 MongoDBでCPU使用率やロードアベレージが高くないのに処理が詰まっている現象が起きました。 その時間にbatchが動いていてアクセスが急に増えることが原因と言うのは分かっているのですが、負荷的には十分余裕があり不思議な状態でした。 そこでdstatで…

sync.Poolを使って省コスト&高速化

Go

概要 golangにはsync.PoolというFreeListの仕組みがあります。 役割としては既に割り当てられたメモリが不要になった時、解放する代わりにListにとして保持しておいて、メモリが必要になったらそこから取るというものです。なのでGCコストやメモリのallocati…

うるう秒対応

概要 2017/01/01 09:00:00(JST)にうるう秒が挿入されますが、ちゃんと問題点や対応方法を理解してなかったのでまとめ。 うるう秒発生でどうなるか ntpを入れているか、tzdataが更新されているかによって動作が異なります。 JST ntp(stepモード) tzdata 未対…

Packerでソースに使う公式AMIの場所

AWS

概要 Packerでsource_amiとして使用する公式のAMIが探しにくいので、利用するものだけまとめました。 Ubuntu Ubuntu Amazon EC2 AMI Finder こちらで検索します。Searchのところに16.04などバージョンを入れれば出てきます。 その中でInstance Typeがややこ…

サーバサイドのCORS対応

概要 No 'Access-Control-Allow-Origin' header is present on the requested resource.というエラーが出た際に外部API(サーバ側)でどう対応すべきかをまとめました。 CORSでググると幸せになれます。 環境 go 1.7.4 gin 1.1.4 CORSが必要になるのはどんな…

ldflagsを使おうとしてハマったこと

Go

概要 golangではbuild時にldflagsというオプションをつけると、変数に値を埋め込んだ状態でバイナリを生成することができます。 よく使われるのはビルド時のgitのcommitのハッシュを埋め込んで、そのバイナリがどのcommitで作成されたのかを明らかにして「想…

angular-cliで手軽にAngular2を始める

概要 Angular2のチュートリアルを終えた後で「いざ作ってみよう」となると 「package.jsonやtsconfigとかどうしよう」 「system.jsよりwebpackがいいって聞くけどどうなんだろ」 「テストフレームワークは何がいいんだろう」 みたいなことで悩んでなかなか進…

Elasticsearchでスコアに重み付けを行う

概要 SEO対策という言葉があるように、Googleの検索結果は単なる文字列の一致率ではなくホームページ自体にスコアが付けられており、それを元に検索の順位が決まります。 今回はElasticsearchでそのようなスコア順に並べる方法を説明します。 環境 Elasticse…

ECSでコンテナのrolling update

概要 ECS上のコンテナをダウンタイム0で更新(デプロイ)する方法をまとめます。 環境 ALB ECS container agent 1.13.0 Docker 1.11.2 Amazon ECS Container Agent Versions - Amazon EC2 Container Service ポイント minimumHealthyPercentとmaximumPercen…

.ioドメインに障害が起きたのでDNSの仕組みを勉強

概要 先日.ioドメインで障害が起きました。.ioのトップレベルDNSサーバがサブドメインの権威サーバ一覧を返さなくなったので名前解決ができなくなったためです。 今回はDNSの流れと確認方法をまとめました。 DNSの流れ www.example.comにアクセスしたい クラ…

dockerのlog周りの対応

概要 dockerを本番運用する際にログの扱いに悩んだので情報をまとめてみました。 環境 docker v1.12.1 コンテナのログは何処に渡すべきか 主に以下の3通りになると思います。 コンテナ内に保存 volume先に指定してに永続保存 log driverを使って転送

remote_addrとかx-forwarded-forとかx-real-ipとか

概要 ECSでNginxのコンテナをプロキシとして立てたところ、APIサーバのアクセスログのクライアントIPがNginxのコンテナIPになっていたのでその修正をしたのがきっかけです。 環境 Nginx 1.10.2 Docker1.12.1 構成 Client -> ELB -> Nginx -> API という構成…

golangのpresentで発表用スライドを作成する

Go

概要 先日Goオールスターズ2で登壇させて頂き、その時プレゼン作成のために使ったpresentの使い方を紹介します。 presentを使うと↓のようなスライドを作れます http://go-talks.appspot.com/github.com/jun06t/go-all-stars/main.slide#1 メリット・デメリ…

Expressでroutingの後にmiddlewareを置きたい

概要 あるサーバ用のライブラリを使ったときにrouting後にmiddlewareを挟む必要が出てきました。 そのときに幾つかハマったことがあったので、それをまとめます。 環境 Node.js 6.6.0 Express 4.13.4 Express4のミドルウェアの流れ まずはミドルウェアの実行…

ESLintを設定する

概要 以前はJSLint, JSHintなどが使われていましたが、最近はplugableなESLintがコードの検証に使われる様になってきました。 今回はその設定方法を簡単に説明します。 環境 Node.js 6.6.0 ESLint 3.5.0 インストールと設定 npmでインストールします。 $ npm…

TerraformでECS環境の構築【オートスケール編】

概要 TerraformでECS環境の構築 - Carpe Diemでは書いてなかったオートスケールについてです。 terraform 0.7からServiceでのオートスケールにも対応したので、それを使って構築します。 環境 Ubuntu 14.04 Terraform 0.7.3 実装 完成形はこちら github.com