#recotech_WIZY開発の裏側

© Recochoku Co.,Ltd. Proprietary and Conﬁdential
2016/10/06
WIZY開発の裏側
Yuto Matsuki

© Recochoku Co.,Ltd. Proprietary and Conﬁdential 2016/10/06
Index
2
1. WIZYの構成
2. WIZYの裏側
1. フロント
2. バックエンド
3. インフラ
3. まとめ

WIZYのシステム構成
3

WIZYのシステム構成
4

WIZYの裏側
5

WIZYを支える技術
6

WIZYのメイン言語
Python
7

メイン言語にPythonを選択した理由
8
• 環境構築の容易さ(virtualenv/pip)
• 環境構築手順がシンプルで面倒くさい事が起きにくい
• システム環境を汚さずにインストールできる。不要になれば消すだけ
$ python -V
Python 2.7.12
$ brew install python3
$ pyvenv-3.5 venv
$ source venv/bin/activate
$ python -V
Python 3.5.2

メイン言語にPythonを選択した理由
9
• 書きやすい。読みやすい。チーム開発に向いていそう
ちょっとしたことがシンプルに書けて嬉しい
括弧の代わりにインデントでブロックを表すことによるメリット
• コードが短くなる
• 人によって書き方の差が発生しにくい
読みやすいコードを書く文化がある「Readability counts.」
if -1 < item.limit < item_supports:
raise Exception(‘在庫切れ’)

Pythonのバージョンについて
10
AWSのAmazon Linuxは標準で2.7がインストールされているため
プロトタイプまではPython2.7で開発していたが
この本にPython3系を使うべきと
書いてあったためPython3で書き直しました。
(ほぼ互換性があったためすぐに対応できた)

WIZYのフロントエンド
11

WIZYを支える技術(フロントエンド)
12

WIZYのフロントエンド
13
• Semantic-UI
• オープンソースのCSSフレームワーク
• 他と比較してHTMLが綺麗に書けるのが特徴
• 見た目だけでなく入力チェックなどの機能も備える
• Backbone.js
• フロントMVCを実現するJavaScriptフレームワーク
• 低機能な分シンプル。AngularJSなどと比べると学習コストが低い
• アイテム購入画面をシングルページで作成するために採用

アイテム購入画面
14
• checkout.html
• view.js
• validator.js
アイテム選択配送先入力支払い方法選択入力確認▶ ▶ ▶
… Backbone.jsのView(普通は画面ごとに分けて作ります)
… Semantic-UIの入力チェック定義

レイアウト部分
Semantic-UI+Backbone.jsで作る購入画面
15
checkout.html (レイアウト部分)
← アイテム選択画面
← 配送先入力画面
←支払い方法選択画面
← 入力確認画面
checkout.html (配送先入力画面)
最初はシンプルだったのでこの方式でも良かったが、
色々と修正しているうちに1000行ほどのHTMLになってしまった。。

16
ビューの切り替え処理
view.js (ビュー定義) view.js (next_pageイベント)
class=nextのクリックイベント

17
入力チェック
http://semantic-ui.com/behaviors/form.html
validator.js (入力チェック定義)

WIZYのバックエンド
18

WIZYを支える技術(バックエンド)
19

20
• Swagger
• 言語に依存しないAPI仕様記述のための書式
• API仕様からAPIドキュメントを生成できる
• 言語ごとのクライアントを生成することも可能
• Redis
• APIレスポンスのキャッシュ
• DBの負荷軽減/パフォーマンス向上には欠かせない存在
• 安定したパフォーマンスを出すための実装も必要(後述)

Swagger
21

swagger-codegen
22
YAMLで仕様を管理。YAMLから生成
https://github.com/swagger-api/swagger-codegen

Swaggerを導入するメリット
23
複数の言語にも対応しているのでAPIとクライアントを綺麗に分離できる
APIドキュメントとソースコードの同期が自動的に保たれる
APIの実装APIの仕様クライアントの実装

Redis
24

© Recochoku Co.,Ltd. Proprietary and Conﬁdential 2016/10/06 25
WIZYでは更新がほとんど無く参照の割合が非常に高いため
APIのレスポンスをRedisにキャッシュしています
APIの実装APIの仕様クライアントの実装
キャッシュ実装

26
• 有効期限を設定してキャッシュする場合
キャッシュがある場合はキャッシュを返す
キャッシュにない場合はDBから取得してキャッシュに保存する
APIリクエスト
キャッシュを更新
有効期限
時間の流れ
この期間にアクセスが集中すると
パフォーマンスが低下してしまう

27
• この問題に対応するキャッシュの使い方
キャッシュの更新は最低１人が行えば良いので
誰かがDBを見に行っている間は古い情報を返しておく
APIリクエスト
キャッシュを更新
有効期限
時間の流れ
キャッシュ更新中は古いデータを返す
フラグ
データ
次来た人が更新しに来ないよう
フラグを立ててから更新

WIZYのインフラ
28

WIZYを支える技術(インフラ)
29

WIZYのインフラ
30
• docker
• 仮想化技術/アプリケーションをイメージで配布できる
• 画面のテスト/開発環境/デモ環境として利用
• EC2よりも起動が早いので今後は本番サービスでも検討
• Packer
• AMI(Amazon Machine Image)の作成に利用
• 各種ミドルウェアのインストールや設定の変更を自動化
• EC2の起動 > AMI作成 > EC2破棄の手順を自動で行える

開発〜リリースの流れ
31
wizy.jp
ステージ環境
検証環境
AWS開発環境 AWS検証環境 AWS本番環境
develop release master

32
wizy.jp
ステージ環境
検証環境
ソースコードをpush
UnitTestが通ったら
dockerイメージ作成
作成したイメージを
立ち上げてUIテスト
開発環境
結果を通知
capybara
dockerイメージ
dockerコンテナ

33
wizy.jp
ステージ環境
検証環境
Packerのリポジトリ
Packerが自動でEC2
を起動しAMIを作成
作成したAMIから
EC2を立ち上げる
検証環境
Python用AMI
Web/APIサーバ
構成管理のリポジトリ

34
wizy.jp
ステージ環境
検証環境
v1.0
本番環境(1/5)
本番環境ELB
wizy.jp
Web/APIサーバ
CloudFormation

35
wizy.jp
ステージ環境
検証環境
v1.0
本番環境(2/5)
本番環境ELB
wizy.jp
Web/APIサーバ
v1.1
ステージ環境ELBWeb/APIサーバ
CloudFormation

36
wizy.jp
ステージ環境
検証環境
v1.0
本番環境(3/5)
本番環境ELB
wizy.jp
Web/APIサーバ
v1.1
CloudFormation

37
wizy.jp
ステージ環境
検証環境
v1.0
本番環境(4/5)
本番環境ELB
wizy.jp
Web/APIサーバ
v1.1
CloudFormation

38
wizy.jp
ステージ環境
検証環境
develop release master本番環境(5/5)
本番環境ELB
wizy.jp
v1.1 Web/APIサーバ
CloudFormation

WIZY初期開発を振り返って
39
• Semantic-UIの入力チェック機能は便利だが万能ではないので注意
• Swaggerの導入でAPIの仕様管理がしやすくて良かった
• キャッシュの実装は最初からそこまでいらなかったかも
今後について
• 環境立ち上げ/切り替えが手作業なので慣れたら自動化したい
• dockerを検証/本番環境でも利用したい

#recotech_WIZY開発の裏側

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to #recotech_WIZY開発の裏側

Similar to #recotech_WIZY開発の裏側 (20)

More from recotech

More from recotech (6)

#recotech_WIZY開発の裏側