2019年 HRBrainの技術的挑戦 / hrbain technology challenge 2019

Slide 1

Slide 1 text

2019年HRBrainの技術的挑戦

Slide 2

Slide 2 text

⾃⼰紹介 @yudppp 株式会社HRBrain CTO 好きな⾔葉: 冪等性  嫌いなモノ: 浮動⼩数点の誤差    Go / TypeScript書いてます

Slide 3

Slide 3 text

⽬標評価管理クラウド

Slide 4

Slide 4 text

HRBrainとは • ⽬標と評価を管理するクラウドSaaSを作っている会社です。 • リリース開始からもうすぐで3年 • Horizontal SaaS (業界を問わずに導⼊されるSaaS)

Slide 5

Slide 5 text

2019年⼈員推移 • 1⽉ • サーバーエンジニア: 3⼈ • フロントエンジニア: 3.5⼈ • デザイナー: 1⼈ • 現在 • サーバーエンジニア: 7.5⼈ • フロントエンジニア: 7⼈ • デザイナー: 1⼈ • スクラムマスター: 1⼈ • QAエンジニア: 1⼈ 2.33ഒ

Slide 6

Slide 6 text

2019年⾏ったこと • ⽬標評価管理クラウドのリニューアル(2019/3/18) • リリース後、週1~2でリリース(合計76回) • 初めての開発合宿@館⼭(2019/08/01~02) • クラウドベンダー移⾏(2019/12/29) • AWSからGCPに移⾏する • ⼈事DBの仕込み • 2020年3⽉リリース予定 • 合わせてマイクロサービス化

Slide 7

Slide 7 text

⽬標評価管理について

Slide 8

Slide 8 text

なぜリニューアルしたか ࢀՃऀݶఆެ։

Slide 9

Slide 9 text

リニューアル後の技術スタック • Go • TypeScript(not strict) • React • Docker • REST API • PostgreSQL • Swagger • Vue/Nuxt(LP/Help) • Netlify CMS(Help) • JAM Stack(LP/Help)

Slide 10

Slide 10 text

アーキテクチャ • マルチテナントアーキテクチャ • 1つのアプリケーションでデータベースを共有 (最も効率的な真のマルチテナンシー)

Slide 11

Slide 11 text

１つのクラウドサーバーに全ての企業 اۀ" اۀ# اۀ$ اۀ"޲͚  "1αʔόʔ اۀ"޲͚  %# اۀ#޲͚  "1αʔόʔ اۀ#޲͚  %# اۀ$޲͚  "1αʔόʔ اۀ$޲͚  %#

Slide 12

Slide 12 text

1つのアプリケーションで異なるDBを使⽤ اۀ" اۀ# اۀ$ اۀ"޲͚  %# "1αʔόʔ اۀ#޲͚  %# اۀ$޲͚  %#

Slide 13

Slide 13 text

1 つのアプリケーションでDBを共有 اۀ" اۀ# اۀ$ "1αʔόʔ %#

Slide 14

Slide 14 text

DBを共有した時のメリット • インフラのコストが安い • スキーマの更新が簡単 • ⼀度のリリースで全てのテナントがリリースされる

Slide 15

Slide 15 text

DBを共有した時のデメリット • 実装難度が⾼い • DBの障害時に全テナントに影響がでる • セキュリティに不安がある • あるテナントが別のテナントのデータを⾒れてしまう可能性がある(data violation)

Slide 16

Slide 16 text

ձࣾ" ձࣾ# ձࣾ# ձࣾ$ こんな感じのusersテーブルがあった時に

Slide 17

Slide 17 text

ձࣾ" ձࣾ# ձࣾ# ձࣾ$ 本来Where句を指定するところを 4&-&$5'30.VTFST  8)&3&UFOBOU@JElձࣾ#z

Slide 18

Slide 18 text

ձࣾ" ձࣾ# ձࣾ# ձࣾ$ 本来Where句を指定するところを 4&-&$5'30.VTFST  8)&3&UFOBOU@JElձࣾ#z

Slide 19

Slide 19 text

ձࣾ" ձࣾ# ձࣾ# ձࣾ$ Where句を指定忘れてしまうと 4&-&$5'30.VTFST

Slide 20

Slide 20 text

ձࣾ" ձࣾ# ձࣾ# ձࣾ$ Where句を指定忘れてしまうと 4&-&$5'30.VTFST ΋ͪΖΜ શͯͷձࣾͷ ϝϯόʔ৘ใ͕ औΕͯ͠·͏

Slide 21

Slide 21 text

開発確認フロー •実装のレビューを2⼈以上必ず⾒る •モック化してテスト •QAによる確認    上記を⾏なっているが複雑になってくると指定を絶対に忘れないとは限らない。

Slide 22

Slide 22 text

PostgreSQLのRowLevelSecurity • データベーステーブル内の⾏へのアクセスを制御することで、このdata violationを防ぐことができる。 • 詳細は「マルチテナント銀の弾丸」でググってください(今年のBuildersconで話しました)

Slide 23

Slide 23 text

HELPページの仕様 • カテゴリーごとに記事を投稿できる • 任意のキーワードで記事本⽂検索できる • 関連記事を登録できる • エンジニアいらず(リリース作業いらず)で記事の更新が⾏える • 弊社のサービスにログインしている⼈だけに⾒える • 公開しないのでSEOは考慮しなくて良い • リリース後の記事の更新頻度は週に1回程度の予定

Slide 24

Slide 24 text

HELPページの構成① → Front Matter → Marked → contents/*.md contents.json ---  id: 1  title:ヘルプページの作り⽅ category: help  ---  ## はじめに  {   "attributes": {  "id": 1,  "title": "ヘルプページの作り⽅", "category": "help"  },  "body": "## はじめに¥n "  } {   "id": 1,  "title": "ヘルプページの作り⽅", "category": "help",  “body": "

はじめに

"  } [{   "id": 1,  "title": "ヘルプページの作り⽅", "category": "help",  “body": "

はじめに

"  }, ]

Slide 25

Slide 25 text

HELPページの構成② • NuxtJSを利⽤ • ①でできたcontents.jsonを⾷わせて、 nuxt generateする • contents.jsonはNustのbuild:beforeのタイミングで⽣成させう

Slide 26

Slide 26 text

Netlify CMS • Headless CMS • サーバーを持たないStaticなアプリケーション • Githubをbackendに指定した場合にGithubのアカウントでログインし、GithubのAPIを叩きMarkdownや画像の書き込みを⾏う • 権限管理⾃体はGithubに準ずる • GithubのGUIをCMS向けに改造しただけのため、データは Githubに⼀元化される。

Slide 27

Slide 27 text

HELPページの構成③ 1.$4 /FUMJGZ$.4  PO/FUMJGZ (JU)VC $JSDMF$* %FQMPZFE &OHJOFFS /VYU Push content/*.md nuxt generate Push

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

⽬標管理クラウドで良かったこと • ⽐較的安全にマルチテナントを作成できた • フロントエンドも型は⼤事 • Netlify/Sentryがすごく便利 • docker-compose upだけすればlocal動いて簡単(外部サービスをMock化) • サブプロダクト(LP/Help)のJAM Stackがイケてる

Slide 32

Slide 32 text

⽬標管理クラウドで気づいた課題 • ドキュメントが全然運⽤されない • 仕様が複雑で新しく⼊ってきた⼈のオンボードが⼤変 • SQLのマイグレーションFileでコンフリクトが⼤量発⽣する(goose) • フロントエンドも型は⼤事(最初からstrictにしておけばよかった)

Slide 33

Slide 33 text

⼈事DBについて

Slide 34

Slide 34 text

⼈事DBを作るにあたって • ⽬標管理クラウドで得た課題を解決しつつ作るべく⾊々考えていきました。

Slide 35

Slide 35 text

ユビキタス⾔語集 • DDDに習ってユビキタス⾔語集を作成。 • 英語もあらかじめ定義することによって表記揺れが減りました。

Slide 36

Slide 36 text

開発合宿@館⼭ • ⼀泊⼆⽇で開発合宿を実施 • 通常の業務を極⼒忘れて、⼈事DBのモデリングをサーバチーム⾏なった。

Slide 37

Slide 37 text

DDDとCQRS • DDDとCQRSのエッセンスを取り⼊れた開発 • ドメインモデルに業務知識を凝集し、Query とCommandを分けて実装

Slide 38

Slide 38 text

⼈事DBのシステム概要 • Go • TypeScript(strict) • React • GraphQL • gRPC • sqldef • PostgreSQL

Slide 39

Slide 39 text

Schema駆動開発 schema.graphql gqlgen ίʔυࣗಈੜ੒ ResolverҎԼΛ࣮૷͢Δ graphql-codegen ίʔυ/TSͷܕΛࣗಈੜ੒ ͦΕΒΛ࢖ͬͯը໘࡞੒

Slide 40

Slide 40 text

Schema駆動開発 • メンテナンスのされなくなりがちなドキュメントがSchemaの受け渡しだけで可能に • 型が⾃動で共通化されるので安全 • 無駄なHTTPリクエストを減らせることになるので嬉しい(GraphQL)

Slide 41

Slide 41 text

sqldef • SQLで羃等にDBスキーマ管理ができるツール • schema.sqlとdbの状態を⽐較してよしなに ALTERしてくれる • PostgreSQLアンカンファレンスで話しているので詳細はこちら

Slide 42

Slide 42 text

マイクロサービス化

Slide 43

Slide 43 text

マイクロサービス • 1サービスの役割が明確になることによって、メンテナブルにしたい • 組織が拡⼤するにあたって技術的な責務を分けたい。 • ユーザー情報や認証など共通化していきたい。

Slide 44

Slide 44 text

API GateWay اۀ" اۀ# اۀ$ ໨ඪධՁ؅ཧ Front ਓࣄDB Front ೝূ ໨ඪධՁ؅ཧ API ਓࣄDB API ϩάΠϯը໘ REST API GraphQL Twirp REST API GraphQL gRPC gRPC gRPC gRPC

Slide 45

Slide 45 text

マイクロサービスのルール • プロダクト間の直接のやり取りはしない • 内部のやり取りは基本的にgRPC • APIは全てAPI Gatewayを経由する

Slide 46

Slide 46 text

API Gatewayと認証・認可 • Goで全て実装 • API GatewayはHTTP/1.1だけ使える。 • 極⼒プロダクトに依存しない設計 • プロダクトが増えてもスケールするように Cloud Firestoreを利⽤

Slide 47

Slide 47 text

Kubernetes + Istio • マイクロサービスにしていくにあたってサービス間のネットワーク管理やスケールが容易である • デプロイフローを⼀元化しやすい

Slide 48

Slide 48 text

GCP移⾏について • なぜAWSに移⾏するのか • Kubernetesを使うにあたってGKEが使いやすい • Kubernetes使う上でのデファクトスタンダードである • 安い/ダッシュボードが標準/ログがいい感じ

Slide 49

Slide 49 text

⽬標評価管理のGCP移⾏ • 年末は第⼀弾として⽬標評価管理ツールの移⾏を⾏う • アプリケーションはもともとDockerで動いていたので細かい⼿直しのみ • DBも移管も⾏う • 深夜にメンテナンスに振る(ご迷惑おかけします。)

Slide 50

Slide 50 text

Infra as a Code • Terraformで全てのInfraをGithub上で管理している(Kubernetesも含めて) • ⼿作業の運⽤を減らすことができ安全に

Slide 51

Slide 51 text

インフラで利⽤しているもの/概念 • GCP • Kubernetes • Istio • Helm • Kustomize • Flux/Flagger • Terraform • GitOps

Slide 52

Slide 52 text

HRBrain UI Library • 各サービスで共通で使うボタンやDatepickerなどを提供するReactのComponent集 • Storybookで管理していてプロダクトからimport して利⽤する。 • デザイナーがSketchでカタログを作成。 • 外部正式公開予定

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

HRBrain SDK • 各プロダクトで共通で使うモジュールのライブラリ • HRBrain UI Libraryと異なりHRBrain固有のもの • 例えばプロダクト⼀覧を出すパネルなど • マイクロフロントエンドの第⼀弾？

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

HRBrain SDKの技術 • Web Component • TypeScript • SkateJS(with lit-html) • Lit ElementでやりたかったけどIE11で上⼿く動かせなかった。 (Vanilla Web Componentでもいいかも) • jsを読み込めばのタグが使えるようになる

Slide 61

Slide 61 text

総括 • 2019年は昨年仕込み続けていたサービスリニューアルをリリースと、MonolithicなサービスからMicroServiceへと進化をするための仕込み期間でした。 • 2020年は複数のサービスが同時に動き出すことにより慌ただしく楽しい1年になるかと思います。

Slide 62

Slide 62 text

全職種積極募集中 ! !