docker nginxでcontainer --> hostへプロキシしたい

前提 docker-composeを使う nginxはコンテナを使う host(mac)上でNodejsサーバが動いている browser --> nginx --> nodejs という通信を実現したい 課題1 Nginx側でプロキシする先のIPがわからない。具体的には proxy_passで設定するIPのこと host側で if…

vuexざっとみ

Vue.jsのFluxフレームワークたるvuexのドキュメント。 非同期Actionをどう扱うかフレームワーク内で明記している https://vuex.vuejs.org/ja/actions.html

2017Advent Calenderベースやりたいこと

読む Serverless Advent Calendar 2016 - Qiita Groonga Advent Calendar 2016 - Qiita 一人トランザクション技術 Advent Calendar 2016 - Qiita Ansible Advent Calendar 2016 - Qiita 書く

google-map-reactの使い方とoptions

What's this シンプルで使いやすいGoogle Maps APIのreact向けwrapper GitHub - istarkov/google-map-react: universal google map react component, allows render react components on the google map maps options Google Maps JavaScript API V3 Referen…

fetch markers with AJAX (dynamic loading markers)

Map MarkerはJavaScript API。住所 <--> 緯度経度変換はGeocoding API。経路検索はDirections API or distance matrix API Airbnb 南西と北東の座標値をサーバに送信している。これでfetchすべき四角形がわかるので、サーバ側でDBから検索するイメージ https…

code splittingのchunkのしくみ

疑問 異なるchunkA Bそれぞれで、同じモジュール(例えばlodash)をimportしている場合、ビルド後のA Bのサイズはどうなるのか Answer require.ensure System.import bundle-loader どれを用いても結果は変わらず。 A B 双方「200kb」ほどサイズ増加しており…

react-universallyがよさげ

github.com Feature Code Splitting with System.import() ExtractTextPlugin for bundling CSS 感触 割りと必要最低限なものだけ入っていて、SSRできそう。 gaearon/react-hot-loader は不要かも react-hot-loader自体のバグとかSystem.import()のためにい…

create-react-appのwebpack + CSS設定。

// `ExtractTextPlugin` first applies the "postcss" and "css" loaders // (second argument), then grabs the result CSS and puts it into a // separate file in our build process. This way we actually ship // a single CSS file in production ins…

Enabling assets for Server-Side Rendering in Webpack (file-loader, url-loader, css-loader/locals)

medium.com file-loader and url-loader support not-emitting-files themselves now, so fake-file-loader and fake-url-loader are deprecated. fake-style-loader can be replaced by using css-loader/locals as explained in fake-style-loader#3. So, …

isomorphic-style-loaderの使い方

github.com 概要 Critical CSS を <head></head> の中にサーバ側で展開するためのプラグイン。クライアント側もサーバ側も同じwebpack設定で用いる。 ただのstyle-loaderだとサーバ側は使用できない(DOM操作を伴うのでビルド時にエラーになる)。そのためサーバ側でHTML…

webpack server side rendering

結局問題なのは、CSSとか画像とか動画とか、webpackのrequire() or import に依存したReact Componentが存在するということ。 Server Side Renderingしたい場合、Nodeサーバ側もそれらのリソースを解釈できないとエラーになる。つまり、サーバ側も事前にwebp…

create-react-app と 自前expressサーバをどう組み合わせるか(ビルドの話)

Server Renderingを考えると、server側でもComponent使いまわしたい。 create-react-appでつくった既存のComponentは、Webpackに依存している(CSS Importの部分) それをserver側でも使えるようにするためには、必然的にserver側もcreate-react-appと同じよ…

Dispatcher, Actions, Constantsのファイル分割粒度とReduceStoreでの注意点

Dispatcher アプリケーション全体で単一のインスタンスで良いのではないか。ファイル分割の必要は特に無いと思う。 ただしその場合、生きている全てのStoreが全てのdispatch()を拾うので、下記のようにdefault:でいらないイベントはスルーする必要がある。同…

flux-utilsを使ったアプリ構築

reduxのほうが勢いはあるけど、基本に忠実で分かりやすいのは facebook / flux ではないかと感じている。 tech.connehito.com qiita.com 基本構成 dispatcher --> fluxリポジトリ内に簡易実装あり stores --> flux-utils container --> flux-utils actions -…

認証をどう作るか

サーバ側でチェックするだけで十分かと思ったが、そうでもない? frontendinsights.com FLUXと絡めた話(AUTH0というサービス) Adding authentication to your React Flux app stormpathというサービス Tutorial: Build a React.js Application with User A…

flux + URL設計

検索クエリ flux on url change flux react router 前提 全てのURLはアプリへのエントリーポイントになる。ユーザのほとんどのアクションはURL transition actionのみをdispatchするイメージ。通信は各componentのcomponentDidMount任せ。URLを降ることが出…

Code Splitting + Server Side Rendering with react-router and Webpack

Code Splitting + Server Side Rendering with react-router and Webpack react + react-router + webpackでのコード分割の方法 → わかった 初期描画前にDBなど非同期操作を行い、その結果を見てデータを返したい場合のサーバ側実装 → わからない さらに、Se…

WebpackによるCode Splitting

code splitting

2016年夏、ナウい、クライアントJSエコシステム

クライアントJSのエコシステム react + flux + react-router + material-ui + axios + ES6 + babel + webpack + ESLint + Airbnb JavaScript Style Guide Flux Utils facebook社内でreactjsを運用する中で見えてきたベストプラクティスをライブラリ化したも…

自己嫌悪中。誠実さが足りていないという話

「誠実さが長所だ。」などと思い込んでいたが、実際全く誠実さが足りていないと痛感している。 頭で考えていること(思っていること)と、実際の言行が度々矛盾する ことがあるな、と。反省している。特に酔っている時、冷静でない時、余裕が無い時にこそ誠…

深層学習。ディープラーニング。特徴表現学習。基礎とか書籍学ぶのに良さそうなものまとめ

基礎イメージ、理論を知りたい人向け。自分の学習がてら。 Qiita 特にプログラマーでもデータサイエンティストでもないけど、Tensorflowを1ヶ月触ったので超分かりやすく解説 - Qiita 深層生成モデルのtensorflowによる実装(Importance Weighted Autoencode…

シャーディング時のデータ分散、ID採番戦略

データをどう分散するかに加えて、ID採番も考える必要がある データ分散の戦略 fixed mapping id % shard で求めるやつ。shard数が変わると計算結果が変わるのがネック dynamic mapping user_to_shard のようなマッピングテーブルをつくる。shardキーのカー…

シャーディング時のクエリ発行

use db1; select * from table1; 上記でもいいが、複数コネクション張っている場合、1番目と2番目の操作の間に他のコマンドがはいるかも create table test.personal(id int, name varchar(20)); insert into test.personal (id,name) VALUES (11, "abc"); s…

MySQL Scaling with Sharding

Sharding Pinterest: How we scaled our MySQL fleet - pinterest enginnering 8台の物理サーバに1つずつMySQLインスタンス。それぞれのインスタンスは master - master replicated onto a backup host in case the primary fails use master, not slave... …

GlobalDBの意義

DBシャーディングの際に、シャーディングしない GlobalDB の必要性を考えてみた。 auto_increment したい場合。 例えば foo テーブルの id (auto_increment) が bar baz など別テーブルの shard_key になるケース。この場合fooテーブル自体はシャーディング…

MySQLにおけるレプリケーション遅延の傾向と対策

レプリケーションは非同期。 漢(オトコ)のコンピュータ道: MySQLにおけるレプリケーション遅延の傾向と対策 遅延の原因 ネットワークの遅延 巨大なトランザクションを実行した スレーブの負荷が高すぎる

MySQL Sharding: Tools and Best Practices for Horizontal Scaling

MySQL Sharding: Tools and Best Practices for Horizontal Scaling from Mats Kindahl www.slideshare.net shardingの意味 Smaller index size Smaller working set working set innodb_buffer_pool_size の大きさとでも考えておけば良い。読み書き共にこの…

Dispose

C#

Dispose 正式な実装 class SomeClass : IDisposable { public void Dispose() { Dispose(true); GC.SuppressFinalize(this); } protected virtual void Dispose(bool disposing) { if (disposing) { // 管理(managed)リソースの破棄処理をここに記述します…

継承よりコンポジションとは

どちらが良いという話ではない。ただし、安易に継承を多用するなという話だ。 継承が適する場面 ほぼ下記の1ケースのみ。 サブクラスがスーパークラスの全ての性質を持つ場合 よく言われる「is-a ならば継承、 has-a ならばコンポジション」と意味合いは同…

C#におけるクラス型を引数で受けた時のnull判定

C#

タイプセーフを保証するために、 object ではなくちゃんとしたクラス型で引数を受けたいことがある その際に 指定しなかったパラメタ をどうやって弾くかという話 例えば // a class public class Person { public string Name { get; set; } public int Age…