Slide 1

Slide 1 text

Private Cloudを支える “最高”のユーザーガイド運用技術 Shin Ando / @andoshin11

Slide 2

Slide 2 text

Shin Ando ● @andoshin11 ● Ex-Frontend / Backend / DevOps Engineer ● BizDev at LINE Corporation ● Verda Customer Relation Committee Lead

Slide 3

Slide 3 text

昨日ちょっとバズったやつ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

LINE開発者が利用するPrivate Cloud基盤 2021.02現在

Slide 6

Slide 6 text

Verda CRC Customer Relation Committeeとは? ● Verdaは社内サービスとはいえ、Potential Userは2,500+名 ● Verdaの構成メンバーはインフラエンジニアがほとんど ● CRC = クラウド基盤の価値を最大化するための組織 ○ User Guideの運用補助・コンテンツディレクション ○ Release Notesのデリバリー設計 ○ Service Roadmapの提供 ○ RFC Processの設計 ○ サポートオペレーション最適化・顧客の利用状況の分析 ○ etc...

Slide 7

Slide 7 text

Verda CRC Customer Relation Committeeとは? ● Verdaは社内サービスとはいえ、Potential Userは2,500+名 ● Verdaの構成メンバーはインフラエンジニアがほとんど ● CRC = クラウド基盤の価値を最大化するための組織 ○ User Guideの運用補助・コンテンツディレクション ○ Release Notesのデリバリー設計 ○ Service Roadmapの提供 ○ RFC Processの設計 ○ サポートオペレーション最適化・顧客の利用状況の分析 ○ etc... 今日はここの話をします

Slide 8

Slide 8 text

最高のUser Guide運用 スケールする 開発支援技術 高品質なコンテンツ を維持するカラクリ アクセシビリティを 最大化するCDと基盤 DX Testing Deployment

Slide 9

Slide 9 text

01DX - Developer Experience - スケールする開発支援技術

Slide 10

Slide 10 text

Developer Experience

Slide 11

Slide 11 text

Developer Experience SSG可能なNuxt ContentでMarkdown Fileを管理

Slide 12

Slide 12 text

Developer Experience

Slide 13

Slide 13 text

● 非Node.jsエンジニアが編集環境を立ち 上げやすいよう、Docker Imageを用意

Slide 14

Slide 14 text

● 非Node.jsエンジニアが編集環境を立ち 上げやすいよう、Docker Imageを用意 ● タスクランナーにはMakeを利用

Slide 15

Slide 15 text

● 非Node.jsエンジニアが編集環境を立ち 上げやすいよう、Docker Imageを用意 ● タスクランナーにはMakeを利用 ● 効率的なコンテンツレビューを行うため のPR Template

Slide 16

Slide 16 text

● 非Node.jsエンジニアが編集環境を立ち 上げやすいよう、Docker Imageを用意 ● タスクランナーにはMakeを利用 ● 効率的なコンテンツレビューを行うため のPR Template ● Contributorを増やすための Development Guide

Slide 17

Slide 17 text

02Testing 高品質なコンテンツを維持する カラクリ

Slide 18

Slide 18 text

Linting

Slide 19

Slide 19 text

Linting typoの検知 + より良い記述の提案

Slide 20

Slide 20 text

Visual Regression Testing ✖

Slide 21

Slide 21 text

● contentsディレクトリのファイル構成から URLを生成し、対象ページのキャプチャ を撮影するクローラーを自前で用意

Slide 22

Slide 22 text

● contentsディレクトリのファイル構成から URLを生成し、対象ページのキャプチャ を撮影するクローラーを自前で用意 ● CI上でreg-suitによるpixel by pixelの画 像回帰テストを実行

Slide 23

Slide 23 text

● contentsディレクトリのファイル構成から URLを生成し、対象ページのキャプチャ を撮影するクローラーを自前で用意 ● CI上でreg-suitによるpixel by pixelの画 像回帰テストを実行 ● キャプチャ画像の保存にはVerda Object Storageを利用 (S3 API Compatible)

Slide 24

Slide 24 text

03Deployment アクセシビリティを 最大化するCDとインフラ基盤

Slide 25

Slide 25 text

Hosting Environment

Slide 26

Slide 26 text

Hosting Environment Manifest Repo 1. Webhook 2. Push Image Drone CI harbor 3. Update Manifest 4. Webhook 5. Update Nginx Pod Argo CD User Guide Pod User Guide Repo Ingress Controller Verda User 6. Pull Image CRC Cluster

Slide 27

Slide 27 text

Indexing on Elasticsearch

Slide 28

Slide 28 text

● Markdownからコンテンツ情報とmeta情 報をパースしてElasticsearchにバルク インサート

Slide 29

Slide 29 text

● Markdownからコンテンツ情報とmeta情 報をパースしてElasticsearchにバルク インサート ● ネイティブのSearch Box(client fuzzy search)をscoringベースのESバックエ ンドに差し替え → 検索精度向上

Slide 30

Slide 30 text

● Markdownからコンテンツ情報とmeta情 報をパースしてElasticsearchにバルク インサート ● ネイティブのSearch Box(client fuzzy search)をscoringベースのESバックエ ンドに差し替え → 検索精度向上 ● 全文検索APIをカスタマーサポートにも 利用予定(開発中)

Slide 31

Slide 31 text

おまけ

Slide 32

Slide 32 text

Other Works プレビュービルド Staging Env モニタリングツールを利用し たアクセス・行動分析 Analytics 英語/韓国語/日本語 i18n 積極的なNuxt Contentへの コントリビュート + patch運用 OSS 顧客満足度サーベイの実施 RFC Process Community 全員参加型の改善提案 アクティビティ Workshop

Slide 33

Slide 33 text

ユーザーと開発者の”楽しい”のために

Slide 34

Slide 34 text

Thank you!!