WEARフロントエンドにおけるPull Request毎のPreview環境導入とその効果

ZOZO Kubernetes Night (https://zozotech-inc.connpass.com/event/299357/) の登壇資料

Transcript

1. WEARフロントエンドにおける
 Pull Request毎のPreview環境導入とその効果
 株式会社ZOZO
 ブランドソリューション開発本部
 WEARバックエンド部 SREブロック
 山岡 朋樹 Copyright © ZOZO, Inc. ZOZO Kubernetes Night

2. © ZOZO, Inc. 2 自己紹介

3. © ZOZO, Inc. 株式会社ZOZO
 ブランドソリューション開発本部 WEARバックエンド部
 SREブロック
 山岡 朋樹
 • 2023年4月 新卒入社
 • WEARやFAANSのクラウド運用、リプレイスに従事
 • Developer Experience向上が好き
 3
4. © ZOZO, Inc. • WEAR Webにおける現状と課題 • WEAR Webチームにヒアリング • Pull Request毎のPreview環境について考える • 技術選定 • Pull Request毎のPreview環境の仕組み • 導入後の効果 目次
 4
5. © ZOZO, Inc. 5 WEAR Webにおける現状と課題
6. © ZOZO, Inc. WEAR Webにおける現状と課題
 現状
 • 約10年間の技術負債を解消するべく、レガシー技術脱却のた めインフラとアプリケーションのリプレイス中
 
 • インフラはオンプレミスからAWSクラウドへ
 
 • アプリケーションはFastlyを使用してパスベースルーティングで VBScript + jQueryの構成からRuby on Rails + Next.jsへ
 Fastlyのパスベースルーティングで実現する WEARのゆるやかなクラウド移行 : https://techblog.zozo.com/entry/cloud-migration-of-wear-with-fastly WEAR Webフロントエンドリプレイスのアーキテクチャ選定と Next.jsへの移行: https://techblog.zozo.com/entry/wear-web-frontend-replace-with-next-js 6
7. © ZOZO, Inc. WEAR Webにおける現状と課題
 課題
 • レガシー技術が残っているためエンジニア採用や仕様のキャッ チアップが難しい
 
 • 古いシステムはCI/CDの環境が整備されておらず非効率な部 分がある
 7
8. © ZOZO, Inc. WEAR Webにおける現状と課題
 リプレイスの進行を妨げる要因となっていることはない か？SREが何か協力できないか？
 課題
 • レガシー技術が残っているためエンジニア採用や仕様のキャッ チアップが難しい
 
 • 古いシステムはCI/CDの環境が整備されておらず非効率な部 分がある
 8
9. © ZOZO, Inc. 9 WEAR Webチームにヒアリング
10. © ZOZO, Inc. WEAR Webチームにヒアリング
 ヒアリング結果
 • Storybookをデザイナーも確認できるようにしたい
 
 • Fastlyでカナリアリリースできるようにしたい
 
 • オンプレミスのみ確認できる環境が欲しい
 
 • Pull Request毎のPreview環境が欲しい
 10
11. © ZOZO, Inc. WEAR Webチームにヒアリング
 UIレビューの負担を軽減する
 独立したQA環境として活用できるため他の案件に干渉しない etc.
 ヒアリング結果
 • Storybookをデザイナーも確認できるようにしたい
 
 • Fastlyでカナリアリリースできるようにしたい
 
 • オンプレミスのみ確認できる環境が欲しい
 
 • Pull Request毎のPreview環境が欲しい
 11
12. © ZOZO, Inc. 12 よし、Preview環境を作ろう！
13. © ZOZO, Inc. 13 Pull Request毎のPreview環境について考える
14. © ZOZO, Inc. KubernetesにおけるPull Request毎のPreview環境について考える • 私たちのチームではコンピューティングサービスにEKSを使用 している
 
 • どうやってKubernetes上でPull Request毎のPreview環境を実 現するか
 
 　　　　　　　　　　　
 
 GitHubのPull Requestの検知をして、それ毎に「ServiceとPod」の セットを用意する？
 
 どうやって外部からPull Request用Podへアクセス可能にするの か？
 14
15. © ZOZO, Inc. Pull Request毎のPreview環境提供フローについて考える • Pull Requestが作成されたら、Docker Imageのビルド、デプロイおよびルーティングを設定する
 
 • Pull Request毎のPreview環境へアクセス可能なURLが発行される
 
 • 各Preview環境へセキュアかつ容易にアクセスできる
 15
16. © ZOZO, Inc. 16 Pull Request毎のPreview環境について考える (まとめ) • Pull Requestが作成されたら、Docker ImageのBuild
 
 • Pull Requestが作成されたら、Kubernetesリソースのデプロイ
 ◦ デプロイ方式はPush or Pull型どちらでも良く、Pull Requestをもとに
 Kubernetesリソースが作成できれば良い
 
 • Pull Request毎のPreview環境へアクセス可能なURLが発行される
 ◦ pr100.preview.wear.jpのような形式のイメージ
 
 • 各Preview環境へセキュアかつ容易にアクセスできる
 ◦ 特定の人しかアクセスできない
 ▪ IP制限、Basic認証、SSO etc.

17. © ZOZO, Inc. 17 技術選定
18. © ZOZO, Inc. 18 Pull Requestが作成されたら、Docker Imageのビルドを行う
 • GitHub Actions
 ◦ 私たちのチームで皆が最も使い慣れているCI/CDプラットフォーム
 ◦ Docker ImageのBuildなら、GitHub Actions一択

19. © ZOZO, Inc. 19 Pull Requestが作成されたら、Kubernetesリソースのデプロイを行う
 • Argo CD Pull Request Generator
 ◦ 主にGitHub APIを使用してリポジトリ内のOpenなPull Requestを検知し、任意のKubernetesリソース をArgo CD Applicationとして作成
 ◦ 検知するPull Requestを特定のLabelに限定できる
 ◦ 「ApplicationSet」というCustom Resourceを扱う
 ◦ KustomizeやHelmを使うことで、生成するArgo CD Applicationのパラメータのオーバーライドが可能 (imageなど)
 Argo CD Pull Request Generator公式ドキュメント: https://argo-cd.readthedocs.io/en/stable/operator-manual/applicationset/Generators-Pull-Request
20. © ZOZO, Inc. 20 Pull Request毎のPreview環境へアクセス可能なURLが発行される
 • Istio VirtualServiceのホストアドレスルーティング
 
 • ワイルドカードドメイン
 ◦ pr100.preview.wear.jpにアクセスするとpr100のPodに接続できる
 ◦ ワイルドカードドメインとし、任意のサブドメインでアクセスした場合、Istioを介してホストヘッダーを 判別し、特定のPodへアクセスできる

21. © ZOZO, Inc. 21 各Preview環境へセキュアかつ容易にアクセスできる
 • IP制限
 ◦ CloudFront FunctionsでIP制限
 ◦ 弊社の開発ガイドラインでは、IP制限によるアクセス制御で問題ない
 ◦ Basic認証はサブドメインが変わるごとにid/pass認証が必要
 ◦ SSOは外部の認可サーバーにリダイレクトURLを都度変更が必要

22. © ZOZO, Inc. 22 Pull Request毎のPreview環境の仕組み
23. © ZOZO, Inc. 23 Pull Request毎のPreview環境の仕組み
 〜 開発者視点 〜

24. © ZOZO, Inc. 24 Pull Request毎のPreview環境のアーキテクチャ Helm icon from: https://helm.sh
25. © ZOZO, Inc. 25 Pull Request作成によるDocker ImageのBuild 任意のPull RequestのみPreview環境を構築する
 • 「preview」というLabelが貼られている時のみworkflowを実行する
 
 Preview環境は常に新しい状態を保ち続けなければならない
 • 「preview」というLabelが貼られているPull Requestのソースブランチに対してPushなどを行った場合に workflowを実行する

26. © ZOZO, Inc. 26 動的に生成するK8sリソースのHelm Template化 • VirtualService, Service, Deploymentなど、Pull Request毎に必要なKubernetesリソースに関し てはHelm Template化
 
 • {{ .Values.name }}と設定しておくことで動的にパ ラメータを適用できる
 
 Argo CD Pull Request Generatorが values.yamlの値をオーバーライドして適用する
 Helm テンプレート: https://helm.sh/ja/docs/chart_best_practices/templates Istio VirtualServiceドキュメント: https://istio.io/latest/docs/reference/config/networking/virtual-service
27. © ZOZO, Inc. 27 Argo CD Pull Request GeneratorによるPull Requestの検知 • requeueAfterSecondsでGitHub APIを使って Pull Requestを取得するポーリング間隔を設定
 
 • 「preview」というLabelが貼られたPull Request のみ抽出
 
 • Helm Templateが存在するGitHubリポジトリと そのパスを指定
 
 条件に合ったPull Requestがあれば、Argo CD Pull Request GeneratorがArgo CD Application としてKubernetesリソースをPull Request毎に 生成！
 

28. © ZOZO, Inc. 28 Pull Request毎のPreview環境の仕組み
 〜 ユーザー視点 〜

29. © ZOZO, Inc. Pull Request毎のPreview環境のアーキテクチャ S3 29
30. © ZOZO, Inc. 30 導入後の効果
31. © ZOZO, Inc. 導入後の効果 WEAR Webチームの生の声
 31
32. © ZOZO, Inc. 32 結論
33. © ZOZO, Inc. 33 Developer Experience向上は皆を幸せにする
34. © ZOZO, Inc. 34 ご清聴ありがとうございました！