showKs開発の舞台裏

Slide 1

Slide 1 text

showKs 開発の舞台裏

Slide 2

Slide 2 text

触れる・作れる・持って帰れる参加型ショーケース [ showKs ] 必要なのは「やってみるか」の気持ちだけ

Slide 3

Slide 3 text

フォームに入力したら

Slide 4

Slide 4 text

あなた専用のキャンバスができていて

Slide 5

Slide 5 text

GitHubリポジトリや

Slide 6

Slide 6 text

CIパイプラインや

Slide 7

Slide 7 text

CDパイプラインができている

Slide 8

Slide 8 text

ポータルでみんなの絵が見られる

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

いろんなことがありました

Slide 11

Slide 11 text

発端

Slide 12

Slide 12 text

発端

Slide 13

Slide 13 text

停滞

Slide 14

Slide 14 text

停滞

Slide 15

Slide 15 text

救世主現る

Slide 16

Slide 16 text

再起動

Slide 17

Slide 17 text

9/6 第1回ミーティング

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

コンセプト決定

Slide 21

Slide 21 text

✔ クラウドネイティブ開発の体験ができる ✔ アプリごとのリポジトリ ✔ CI/CDパイプライン ✔ PRを活用した開発 ✔ お絵かきアプリというテーマで共同作業感出す ✔ アプリ・マニフェスト・ドキュメント　全てお持ち帰り可能

Slide 22

Slide 22 text

スペシャルチーム結成 jacopen amsy180 jyoshise makocchi kojiha inductor tsukaman

Slide 23

Slide 23 text

10/11 よっしゃ開発だ！

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

こんな感じだよねポータルキャンバスキャンバスキャンバス git git git CI

Slide 26

Slide 26 text

って思うじゃん？

Slide 27

Slide 27 text

打ち合わせのたびに複雑化する構成

Slide 28

Slide 28 text

打ち合わせのたびに複雑化する構成

Slide 29

Slide 29 text

CDやりたいよねポータルキャンバスキャンバスキャンバス git git git CI

Slide 30

Slide 30 text

あ、申し込みフォームいるね。Google Formsとかでポータルキャンバスキャンバスキャンバス git git git CI Google Form

Slide 31

Slide 31 text

でも重複チェックとか要るよね･･･ポータルキャンバスキャンバスキャンバス git git git CI Form

Slide 32

Slide 32 text

StagingとProductionわけたいよね Stg ポータル Stg キャンバス Stg キャンバス Stg キャンバス git git git CI Form Stg ポータル Prod キャンバス Prod キャンバス Prod キャンバス git git git

Slide 33

Slide 33 text

てかGitHubに自動でリポジトリ作成しないとね Stg ポータル Stg キャンバス Stg キャンバス Stg キャンバス git git git CI Form Stg ポータル Prod キャンバス Prod キャンバス Prod キャンバス git git git

Slide 34

Slide 34 text

SpinnakerとConcourseのパイプラインも生成要るね Stg ポータル Stg キャンバス Stg キャンバス Stg キャンバス git git git CI Form Prod ポータル Prod キャンバス Prod キャンバス Prod キャンバス git git git

Slide 35

Slide 35 text

アプリ連携アーキテクチャ変えないとね・・・ Stg アグリゲータ Stg キャンバス Stg キャンバス Stg キャンバス git git git CI Form Stg アグリゲータ Prod キャンバス Prod キャンバス Prod キャンバス git git git Stg ポータル Prod ポータル

Slide 36

Slide 36 text

ポータルもちょっと分けて作るわ Stg アグリゲータ Stg キャンバス Stg キャンバス Stg キャンバス git git git CI Form Stg アグリゲータ Prod キャンバス Prod キャンバス Prod キャンバス git git git Stg ポータル Frontend Stg ポータル Backend Prod ポータル Frontend Prod ポータル Backend

Slide 37

Slide 37 text

あ、無くてもうまいこといったわ Stg アグリゲータ Stg キャンバス Stg キャンバス Stg キャンバス git git git CI Form Stg アグリゲータ Prod キャンバス Prod キャンバス Prod キャンバス git git git Stg ポータル Prod ポータル

Slide 38

Slide 38 text

メトリクスをダッシュボードで見たいよね Stg アグリゲータ Stg キャンバス Stg キャンバス Stg キャンバス git git git CI Form Stg アグリゲータ Prod キャンバス Prod キャンバス Prod キャンバス git git git Stg ポータル Prod ポータル

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

活動時間 22:00〜28:00

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

なんとか完成

Slide 45

Slide 45 text

各所解説

Slide 46

Slide 46 text

showks-terraform K8sで開発するとしても、k8s外に必要なものが沢山出てきます。 - k8sそのもの - DNS - オブジェクトストレージ - 踏み台サーバー - スタティックIP ついつい気が緩んで手作業しがちですが、しっかりとコード化して Infrastructure as codeやりましょう https://github.com/containerdaysjp/showks-terraform

Slide 47

Slide 47 text

showks-form https://github.com/containerdaysjp/showks-form Stg ポータル Stg キャンバス Stg キャンバス Stg キャンバス git git git CI Form Prod ポータル Prod キャンバス Prod キャンバス Prod キャンバス git git git

Slide 48

Slide 48 text

showks-form https://github.com/containerdaysjp/showks-form ● ユーザーからの入力に応じて ○ バリデーション ○ GitHubにリポジトリ作成 ○ ベースCanvasのPush ○ Webhookの設定 ○ Collaboratorの設定 ○ Protected Brachの設定 ○ Concourse Pipelineの生成と反映 ○ Spinnaker Pipelineの生成と反映

Slide 49

Slide 49 text

showks-form https://github.com/containerdaysjp/showks-form ● Rails3くらいまで触ったことがあったので、さっくり作るにはいいよねと採用。Rails5.2 ● バリデーション楽ちんで助かった ● GitHubはOctokit、GitはRuggedで操作。割と楽だった ● 依存するものが多いので、安直にイメージ作るとデカい ● Sidekiqで非同期にしたかったけど時間切れで同期処理

Slide 50

Slide 50 text

Concourse Pipeline https://github.com/containerdaysjp/showks-concourse-pipelines showKs関連コンポーネント ● showks-form ● showks-portal-frontend ● showks-aggregator ユーザーのCanvas ● showks-canvas-USERNAME これらの ● Unit test ● Dockerイメージ作成とpush ● Prodリリース時はタグの付け替え ● k8sマニフェスト作成

Slide 51

Slide 51 text

Concourse Pipeline https://github.com/containerdaysjp/showks-concourse-pipelines

Slide 52

Slide 52 text

GitOps的アプローチ showks-manifest-stg Object Storage manifest-committer pipeline showks-form-stg pipeline showks-aggregator-stg pipeline showks-portal-stg pipeline showks-canvas-USER pipeline

Slide 53

Slide 53 text

よかったこと ● 知っているけど試したことがなかった技術を試せた ● すごいチームで一緒に作業できた ● さび付きがちな『現場感』の維持に役立った

Slide 54

Slide 54 text

反省点 ● テストがないコードはやはりクソ ○ 時間が無い･･･の言い訳あぶない ● プロマネ的な大人が1人くらいは欲しい ● ちゃんと寝よう！！！！！

Slide 55

Slide 55 text

showKs’ Continuous Delivery with Spinnaker

Slide 56

Slide 56 text

俺的showKsのコンセプト（なんとなく結果的に） ● 参加者になるべく負担をかけず、かつ「マイクロサービスの開発プロジェクト」のオーナー体験をしてもらう ● アプリ自体そこそこ遊べて、かつ大人数で参加して面白いものにする ● クラウドネイティブ技術全開で行く ● すべて公開/再利用可能なものとするそのために ● スケーラビリティ ● CI/CDのフルオートメーション ● GitHubをSingle source of truthとする

Slide 57

Slide 57 text

作ったCD環境 stg prod ns: spinnaker ns: showks ns: showks Halyardでデプロイ Terraformでデプロイ

Slide 58

Slide 58 text

CDパイプライン概要(Portal, Aggregator) deploy-to-stg canary-to-prod deploy-to-prod stg cluster prod cluster stg manifest stg image prod manifest prod image CI (stgブランチへの merge) CI (masterブランチへの merge)

Slide 59

Slide 59 text

CDパイプライン概要(canvas) deploy-to-stg deploy-to-prod stg cluster prod cluster stg manifest stg image prod manifest prod image CI (stgブランチへの merge) CI (masterブランチへの merge) このパイプライン自体が自動生成される

Slide 60

Slide 60 text

なぜSpinnakerか

Slide 61

Slide 61 text

なぜSpinnakerか ● プラットフォームに依存しない

Slide 62

Slide 62 text

なぜSpinnakerか ● プラットフォームに依存しない ● なんかクラウドネイティブ感ある

Slide 63

Slide 63 text

なぜSpinnakerか ● プラットフォームに依存しない ● なんかクラウドネイティブ感ある ● 流行ってるしモテそう

Slide 64

Slide 64 text

CDこだわりの攻めポイント（守りに入った途端人は年老いていくのだよ） ● Kubernetes V2 Providerの採用 ● Pipeline as Codeによるイミュータブルかつ自動的/継続的パイプライン適用 ● Canary release

Slide 65

Slide 65 text

Spinnakerのターニングポイント： Kubernetes V2 Provider Kubernetesの基本的な考え方： ● Kubernetes上で動作するワークロードの全ての真実はManifests(YAML)に記述される ● Kubernetesは自律的に、適用されたManifestsに記述されている状態に実際のクラスタの状態を追従させる ● 宣言的デプロイ、GitOpsといったCloud Nativeベストプラクティスの根本 Spinnaker Kubernetes V2 Providerは上記を尊重→従来のコンテナイメージ中心の CDパイプラインから、Manifest中心のCDパイプラインへの転換期

Slide 66

Slide 66 text

Pipeline as Codeによるイミュータブルかつ自動的/継続的パイプライン適用 ● もともとSpinnakerに欠けていると言われていたところ ○ WebUIからしかパイプラインの管理ができない ○ パイプラインがどのように定義されているのかはブラックボックスだった。

Slide 67

Slide 67 text

Spin CLI ● 大したことはできない ● でもそれによってむしろ Immutableなパイプラインが実現できるのかもやったこと ● Web UIから雛形パイプラインを作成 ● それをspin pipeline getで JSONファイル化 ● Pythonでパラメータを置換して複製

Slide 68

Slide 68 text

カナリアリリース当初やりたかったこと https://www.spinnaker.io/concepts/pipelines.png

Slide 69

Slide 69 text

カナリアリリースただしこれは従来のSpinnakerの世界観 ArtifactはDocker Image

Slide 70

Slide 70 text

つまり現状これはうまくいかないようだ（やりかたがわからなかった）カナリアリリース stgクラスタで動いている deploymentをstg クラスタのアカウントで取ってくる？ stgクラスタで動いている deploymentを prodクラスタのアカウントでデプロイする？

Slide 71

Slide 71 text

困ったちなみに先々週の状況です

Slide 72

Slide 72 text

そんな僕の前に天使が舞い降りた

Slide 73

Slide 73 text

annotation書いとくだけで！

Slide 74

Slide 74 text

nginx-ingress-controller 0.21.0で機能リリース

Slide 75

Slide 75 text

Slide 76

Slide 76 text

その他ハマったこと ● 認証でドハマり ○ Spinnaker自体はユーザー認証の機能を持っていない ○ 当初GitHub OAuthを使おうとしたがGitHub TeamsのOrganizationじゃないとダメっぽい ○ Google OAuthにしようとしたらG SuiteのOrganizationじゃないとダメっぽい ○ 仕方なく単一のgoogleアカウントのみアクセスできるようにした ○ などなど ● Credential管理問題 ○ Kubernetes各クラスタのCredential、GCSのCredential、GitHubのCredentialなどいろんなところにとっ散らかってしまった ○ 最初になにか管理手段を確立すべきだった ● Spinnakerのドキュメントが謎だらけ ○ 特にKubernetes V2 Providerは従来のコンセプトをがらりと変えるので既存のドキュメントとの矛盾が多い、かつ実装が文書化されていないので結局コードを読む羽目に

Slide 77

Slide 77 text

showKsのアプリケーション実装について @inductor(Twitter: @_inductor_) Kohei Ota @ ZOZO Technologies, Inc

Slide 78

Slide 78 text

アプリで実現したかったこと - ユーザーにただ見せるだけではなく、何らかの形で参加させたい - お絵かきのアプリ！！ - マイクロサービスが動いてることを可視化 - ただ一覧を出すだけじゃなくて、それぞれが独立していること - 管理画面的なもの（ポータルアプリ）を作成してそれぞれのアプリケーションにアクセスできるように - （当たり前だけど）コンテナで動くやつ

Slide 79

Slide 79 text

アプリケーションのアーキテクチャ

Slide 80

Slide 80 text

できたもの - Aggregator - Node.jsのKubernetesクライアントを使って、他のPodの情報を取得、JSONに出力 - Socket通信でサムネなどの情報をリアルタイムに取得して描画 - Canvasからデータを取ってフロントに投げる

Slide 81

Slide 81 text

できたもの - Canvas - お絵かきアプリ - 各コンテナは完全に独立して動く（マイクロサービス的なナニカ） - gRPC等内部のAPI通信は今回要件的に不要だったのためやっていない - データの永続化はスケジュールの都合と要件的にやらず - BFF的な何か

Slide 82

Slide 82 text

できたもの - Portal - シンプルなNuxt.jsベースのアプリ - APIとって表示するだけの簡単な処理とBulmaを使った一覧表示 - 無駄にPWA対応（簡単すぎた） - Universal App的な何かができた - なぜNuxtにしたのか？ - 使ってみたかったから！！！！！ - という気軽な気持ちでやってみれるのがこういうプロジェクトのいいところ

Slide 83

Slide 83 text

結果的に - マイクロサービス的な何か - マイクロサービスからデータを取ってきていい感じにフロントに投げるBFF的な何か - APIと通信してデータを表示するUniversalアプリの3つからなる今っぽい典型的なアプリケーション構成ができた！

Slide 84

Slide 84 text

やりたかったけどやれなかったこと - やっぱデータの永続化やりたかった（要件と時間が主に足りなかった） - RDBもだけどAPIのあたりでメモリキャッシュとか使う案もあるにはあった - パフォーマンスとキャパシティの兼ね合いとかまで詰める時間がなかった - Nuxtというかフロントの勉強不足でデータの動的書き換え処理が間に合わなかった - あんまり普段手を動かさないことをやってみるの面白いのでいいですね - アプリ書ける人の割合少ない問題 :innocent:

Slide 85

Slide 85 text

つらみ

Slide 86

Slide 86 text

やってよかったこと - 日本の中ではK8sに関することをいろいろ知ってるメンツがそこそこ集合しながらいろんな事ができたというのは本当によかった - 今まで知識では知っていたけど机上の空論でしか話せていなかったことを実際に実現しながらいろいろハマって学ぶことができた - それぞれみんなが、自分のできることでお互いに貢献できた

Slide 87

Slide 87 text

showKsのこれから

Slide 88

Slide 88 text

やりたいこと沢山ある - サービスメッシュもやりたい - もっとk8sネイティブにしたいし - いろんなアプリを載せてみたいし - アプリ・インフラどちらのエンジニアも学びがある - もっといろんな人に楽しさを分かって欲しい

Slide 89

Slide 89 text

次回もやります

Slide 90

Slide 90 text

最後に - We are hiring! - 一緒にshowKsを発展させられる人を募集しています - アプリ書けるって人一緒にやりましょう！！！！！