60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products

by VTRyo

Slide 1

Slide 1 text

60Ҏ্ͷϓϩμΫτΛ࣋ͭ૊৫ʹ͓͚Δ ։ൃऀମݧ޲্΁ͷऔΓ૊Έ - νʔϜAPIͱBackstageͰߏங͢Δ૊৫ͷՄࢹԽج൫ - Money Foward, Inc - Platform and Reliability Engineering ຊ෦ VTRyo SRE NEXT 2025

Slide 2

Slide 2 text

2021೥10݄ʹϚωʔϑΥϫʔυೖࣾ ੿ஶ ”ITΤϯδχΞͷͨΊͷ ɹɹ ۮવ͔Β࢝ΊΔΩϟϦΞϓϥϯ” - SRE NEXT͸ॳճ͔Βࢀઓ - SRE NEXT2022 ONLINEͰॳొஃ - “Ұਓ͔Β࢝ΊΔϓϩμΫτSRE” - Road to SRE NEXT@໊ݹ԰ - “Ұମ͍͔ͭΒSRE NEXT͕SRE͚ͩͷΧϯϑΝϨϯε ͩͱࡨ͍֮ͯͨ͠ʁ” - ͦͷଞ SREؔ࿈ͷొஃ - SRE Kaigi 2025 - “Ұਓ͔Β࢝ΊͨSREνʔϜ3೥ؒͷาΈ" VTRyo

Slide 3

Slide 3 text

࣮͸α΢φ೤೾ࢣࢿ֨΋͍࣋ͬͯΔΒ͍͠ - ࠓճ͸೦ئͷεϙϯαʔϒʔεઃஔ ! ͋ͦͼʹ͖ͯͶ ʢ͜Ε͸εϙϯαʔηογϣϯͰ͸͋Γ·ͤΜʣ - झຯ - ΫϥϑτϏʔϧͷ৹ࠪһࢿ֨औಘ🍺 - ࠷ۙ͸Πϕϯτ΍ؒआΓͰεύΠεΧϨʔमߦத🍛 VTRyo

Slide 4

Slide 4 text

େ͖ͳ૊৫ʹ͓͚Δ৘ใ෼அͷղܾࡦͱͯ͠ͷɺνʔϜAPIͱ Backstageͷ࣮ફత׆༻๏ ࠓ͔Β࢝ΊΒΕΔࢪࡦͱͯ͠ ᶃνʔϜؒ࿈ܞʹඞཁͳ৘ใͷఆٛํ๏ ᶄBackstageςϯϓϨʔτͷ࣮૷ςΫχοΫ ᶅ૊৫ͷن໛ʹؔΘΒͣԠ༻Ͱ͖ΔऔΓ૊Έ ࠓ೔࣋ͪؼΕΔ͜ͱ ૊৫ͷෳࡶੑʹཱͪ޲͔͏ώϯτ

Slide 5

Slide 5 text

ϚωʔϑΥϫʔυͷ૊৫Λந৅Խͨ͠ਤ

Slide 6

Slide 6 text

৘ใͷ෼அͱ୳ࡧίετͷ૿େ νʔϜ͝ͱʹҟͳΔπʔϧͰ৘ใ؅ཧ Google DocɺGitHub Wiki౳ͷπʔϧ෼ࢄ ٕज़ελοΫ΋όϥόϥɻͲͷνʔϜ͕ԿΛ࢖͍ͬͯΔ͔ෆ໌ ੹೚ͷॴࡏ͕ෆ໌֬ ʮ͜ͷAPIʹ໰୊͕ൃੜͨ͠৔߹ɺ୭ʹ࿈བྷ͢Ε͹͍͍ͷ͔ʯ جຊతͳ৘ใͷ೺Ѳ͕ࠔ೉ എܠͱ՝୊

Slide 7

Slide 7 text

ؔ܎ੑͷՄࢹԽͷ೉͠͞ දܭࢉιϑτͰදݱ͢Δ৔߹ɺνʔϜͱϦιʔεͷෳࡶͳؔ܎ ੑΛදݱ͢Δʹ͸ݶք͕͋Δ ԾʹͦΕͰ؅ཧ͢Δͱɺ৘ใ؅ཧऀ͕தԝूݖԽ͢ΔϦεΫ ඇޮ཰ͳΦϯϘʔσΟϯά ৽͍͠νʔϜʹࢀՃͨ͠ࡍɺͦͷνʔϜ͕ॴ༗͢ΔϦιʔε΍ ϓϩδΣΫτΛ೺Ѳ͢Δ·Ͱͷίετ ޓ͍ʹڠௐ͍ͯ͠ΔαʔϏεʹ͍ͭͯɺ͋ͪͪ͜ͷ৘ใʹΞΫ ηε͢Δඞཁ͕͋Δ എܠͱ՝୊

Slide 8

Slide 8 text

ͦ͜ͰSpotify੡OSS "Backstage"

Slide 9

Slide 9 text

> “Backstage͸Spotifyͷඞཁੑ͔Βੜ·Ε·ͨ͠ɻ ࣄۀ͕੒௕͢ΔʹͭΕͯɺΠϯϑϥ͕அยԽ͠ɺΤϯδχΞͷੜ࢈ ੑ͕௿Լ͍ͯ͠Δ͜ͱʹؾ͖ͮ·ͨ͠ɻ νʔϜ͸ίʔυͷߏஙͱςετΛߦ͏୅ΘΓʹɺ࡞ۀ։࢝ʹඞཁͳ ৘ใΛ୳͢͜ͱʹଟ͘ͷ࣌ؒΛඅ΍͍ͯ͠·ͨ͠ɻ" Backstageͱ͸ ࢀর: https://backstage.io/docs/overview/background

Slide 10

Slide 10 text

αʔϏεɺιϑτ΢ΣΞɺπʔϧɺςετΛBackstageͰ؅ཧ ͲͷαʔϏεͰͲͷΑ͏ͳٕज़ελοΫ͕࢖ΘΕ͍ͯΔͷ͔ ͋ΔαʔϏεʹ͓͍ͯɺ୭͕Φʔφʔͳͷ͔ αʔϏεͷར༻ऀͱͯ͠ɺର৅ͷαʔϏεͷར༻ํ๏ Etc… Backstageͱ͸ ࢀর: https://backstage.io/docs/overview/background

Slide 11

Slide 11 text

BackstageΛ։ൃऀϙʔλϧͱͯ͠ར༻ ৘ใΛՄࢹԽ͢Δ

Slide 12

Slide 12 text

࣮͸͢Ͱʹಋೖ͞Ε͍ͯͨBackstage

Slide 13

Slide 13 text

΋ͱ΋ͱͷӡ༻ঢ়گ Πϯγσϯτൃੜ࣌ͷ੹೚ऀ΍ؔ܎ੑ೺Ѳ͕໨త ֤ϦϙδτϦʹαʔϏε৘ใͱΦʔφʔ໊Λొ࿥ͨ͠ ͨͩ͠ӡ༻ʹ͸՝୊͕͋ͬͨ Φʔφʔ৘ใ͕ෆ଍͍ͯ͠Δʢ࿈བྷઌͳ͠ɺϝϯόʔෆ໌ͳͲʣ YAMLฤू͕ଟ͘ͷ։ൃऀʹͱͬͯෛՙ ԿΛॻ͍͍͍ͯͷ͔ෆ໌ ࣮͸͢Ͱʹಋೖ͞Ε͍ͯͨBackstage

Slide 14

Slide 14 text

BackstageͰ͸ ςϯϓϨʔτΛ࡞੒Ͱ͖Δ

Slide 15

Slide 15 text

͜ΕΛ࢖ͬͯ ొ࿥ͷϋʔυϧΛԼ͛Δ

Slide 16

Slide 16 text

Backstage Software Templates

Slide 17

Slide 17 text

Backstage Software Templates ※ϦϙδτϦςϯϓϨʔτͱͯ͠࢖͏έʔε͕ଟ͍ ৘ใΛೖྗ͢Δͱඞཁͳ৘ใΛ౥ࡌͯ͠ϦϙδτϦ࡞੒͞ΕΔ ʮXX repoΛίϐϖͯ͘͠Δͱ͍͍ΑʯͷΞϨ

Slide 18

Slide 18 text

Backstage Software Templates ࠓճ͸ʮYAML͠ΜͲ͍ʯʮԿΛॻ͔͘ෆ໌ʯͷղܾࡦͱͯ͠ར༻ Web UI্Ͱඞཁࣄ߲Λೖྗ͢Δ͚ͩͰYAMLࣗಈੜ੒ ϨΠΞ΢τ΍ύϥϝʔλͷ೺Ѳʹ࣌ؒΛऔΒΕΔ͜ͱͳ͘ɺ։ ൃऀ͕؆୯ʹ৘ใΛొ࿥Ͱ͖Δ ඞཁͳ৘ใΛఏࣔͰ͖Δ ೖྗ৘ใΛςϯϓϨʔτΤϯδϯͰಈతʹม׵Ͱ͖Δ

Slide 19

Slide 19 text

AI͕ॻ͚͹ྑ͘ͳ͍ʁ ͱࢥͬͨΈͳ͞Μ

Slide 20

Slide 20 text

͜ͷऔΓ૊Έ౰࣌ɺAI agent͕ࣾ಺ʹීٴ͍ͯ͠ͳ͔ͬͨ AI agentར༻Λલఏͱͨ͠৔߹ɺͦͷηοτΞοϓ͔Β։࢝ʹͳ Δϋʔυϧ͕͋ͬͨ TemplatesΛ࢖ΘͣɺAI agentΛ࢖ͬͯੜ੒͢Δ͜ͱ͸໰୊ͳ͍ ʢத਎͸ͨͩͷYAMLͳͷͰʣ ඞཁͳ৘ใΛ࣮֬ʹੜ੒ͯ͠΋Β͑͹OK ൃද͍ͯ͠Δؒʹ৘ใ͕ݹ͘ͳΔڪΖ͍࣌͠୅ͩ…… ※͏·͘ӡ༻Ͱ͖ΔͳΒྑ͍ͱࢥ͍·͢

Slide 21

Slide 21 text

৘ใͷू໿ઌ͸ܾ·ͬͨ Ͱ͸ԿΛొ࿥͢Δ΂͖͔ʁ

Slide 22

Slide 22 text

ʮΦʔφʔ͸୭͔ʯ໰୊Λಛఆ͢ΔͨΊʹ ͲͷνʔϜ͕ͲͷγεςϜ΍αʔϏεʹ੹೚Λ͍࣋ͬͯΔͷ͔ ͦͷνʔϜ͸ͲͷଞνʔϜͱؔ࿈͕͋Δͷ͔ ͦͷαʔϏεͷυΩϡϝϯτ͸Ͳ͜ʹ͋Δͷ͔ Etc… ԿΛొ࿥͢Δ΂͖͔ʁ

Slide 23

Slide 23 text

νʔϜτϙϩδʔͷߟ͑ํΛ ࠾༻

Slide 24

Slide 24 text

> “Ձ஋͋Διϑτ΢ΣΞΛૉૣ͘ಧ͚ΔదԠܕ૊৫ઃܭ” > “ݱ୅ʹ͓͚Δ૊৫ઃܭͱ͸ɺސ٬ͷ੠ʹԠ͑Δ΂͘ίϥϘϨʔ γϣϯ͢ΔͨΊͷٕज़Λઃܭ͢Δ͜ͱͰ͋Δ” νʔϜτϙϩδʔͱ͸ ࢀর: νʔϜτϙϩδʔ Ձ஋͋Διϑτ΢ΣΞΛ͢͹΍͘ಧ͚ΔదԠܕ૊৫ઃܭ ɹɹ φΦϛɾελϯϑΥʔυʰGuide to Organization Designʱ

Slide 25

Slide 25 text

ίϯ΢ΣΠͷ๏ଇʹج͍ͮͯ”ҙࣝతʹ”νʔϜߏ଄ͱΞʔΩςΫ νϟΛઃܭ͢Δ͜ͱ ͱʹ͔͘ૉૣ͘ϦϦʔε͢ΔͨΊʹνʔϜΛઃܭ͢Δ ೝ஌ෛՙΛ؅ཧ͢Δ͜ͱ νʔϜΛ͏·͘૬ޓ࡞༻ͤ͞Δ ڥքΛ໌֬ʹ͢Δ͜ͱͰ੹೚΋໌֬ʹ͢Δ νʔϜτϙϩδʔͱ͸

Slide 26

Slide 26 text

νʔϜ͕ιϑτ΢ΣΞͷΦʔφʔͱͳΔ ιϑτ΢ΣΞͷڥքαΠζΛνʔϜͷೝ஌ෛՙʹ߹ΘͤΔ ద੾ͳڥք͕ೝ஌ෛՙΛԼ͛Δ ੹೚ൣғΛ߹Θ੍ͤͯݶ͢Δ νʔϜτϙϩδʔʹ͓͚ΔνʔϜϑΝʔετࢥߟ ࢀর: νʔϜτϙϩδʔ Ձ஋͋Διϑτ΢ΣΞΛ͢͹΍͘ಧ͚ΔదԠܕ૊৫ઃܭ

Slide 27

Slide 27 text

νʔϜಉ࢜ͷ΍ΓͱΓʹAPIͷΞΠσΞΛ֦ுͨ͠΋ͷ ίʔυɺόʔδϣϯ؅ཧɺυΩϡϝϯςʔγϣϯɺϓϥΫςΟ εɺίϛϡχέʔγϣϯɺؔ࿈৘ใ νʔϜͷ੹೚ൣғɺఏڙαʔϏεɺ࿈བྷํ๏Λ໌֬Խ ଞνʔϜ͔Βར༻͞ΕΔલఏͰఆٛ͢Δ ૬ख͸͙͢ʹཧղͰ͖Δ͔ɻ͙͢ʹཉ͍͠৘ใʹ౸ୡͰ͖Δ͔ νʔϜAPIͱ͸ ࢀর: νʔϜτϙϩδʔ Ձ஋͋Διϑτ΢ΣΞΛ͢͹΍͘ಧ͚ΔదԠܕ૊৫ઃܭ

Slide 28

Slide 28 text

νʔϜAPIͱͯ͠ ৘ใΛఆٛͯ͠ΈΔ

Slide 29

Slide 29 text

CODEOWNERSʹඥ໊ͮ͘લ Slackάϧʔϓϝϯγϣϯ໊ͱϝϯγϣϯID Slackνϟϯωϧ໊ͱϦϯΫ ϓϩδΣΫτ؅ཧπʔϧ΁ͷϦϯΫ αϒνʔϜ໊ νʔϜϝϯόʔϦετ νʔϜλΠϓʢEnablingɺstream-alignedͳͲʣ ྡਓʢར༻ऀɾඇར༻ऀʣͷνʔϜ໊ νʔϜAPIͱͯ͠ఆٛͨ͜͠ͱ GitHub͸ݸਓ·ͨ͸TeamΛ ϦϙδτϦͷ੹೚ऀʹࢦఆͰ͖Δ

Slide 30

Slide 30 text

Backstage × νʔϜAPI

Slide 31

Slide 31 text

αʔϏε৘ใΛҰݩ؅ཧ͢ΔϨΠϠʔͱͯ͠ͷBackstage ͦ͜ʹνʔϜ৘ใ΋ొ࿥͞ΕΔ͜ͱͷϝϦοτ ௐࠪ࣌ؒͷ୹ॖ ΦϯϘʔσΟϯά࣌ؒͷ୹ॖ ίϥϘϨʔγϣϯ࣌ͷ࿈བྷ Backstage × νʔϜAPI

Slide 32

Slide 32 text

Backstage × νʔϜAPI

Slide 33

Slide 33 text

Backstage × νʔϜAPI

Slide 34

Slide 34 text

Backstage Software Templates Tips

Slide 35

Slide 35 text

ొ৔ਓ෺ 1. Backstage ϦϙδτϦ Backstageͦͷ΋ͷ 2. ೚ҙͷϦϙδτϦʢTemplatesίϯςϯπΛஔ͘৔ॴʣ template.yaml catalog-info.yaml(template༻) 3. ϓϩμΫτͷϦϙδτϦʢαʔϏε͝ͱʹஔ͘ʣ catalog-info.yaml Tips ϑϩϯτΤϯυ΍ϓϥάΠϯͷ֦ ு͸BackstageʹมߋΛՃ͑Δ

Slide 36

Slide 36 text

Ͳ͏΍ͬͯTemplatesΛͭ͘Δͷ͔ Backstage Software Templates ࣗମ͸ YAML 😨 ެࣜͷExample Λͥͻɻࠓͷ࣌୅ͳΒVibe coding Ұ୒ https://github.com/backstage/software-templates ςϯϓϨʔτΤϯδϯ Nunjucks Λ࢖ͬͯೖྗ஋Λૠೖ͢Δ ݕূʹ͸ Nunjucks ͷ PlaygroundΛ࢖͓͏ https://nunjucks.r0b.io/ Tips: ೚ҙͷϦϙδτϦ

Slide 37

Slide 37 text

Templates ίϯςϯπͷσΟϨΫτϦߏ੒ └── team-api └── group ᵓ── content │ └── catalog-info.yaml └── template.yaml Tips: ೚ҙͷϦϙδτϦ BackstageͰೖྗ͞ΕΔ templateϑΝΠϧ NunjucksΛ࢖ͬͨϑΝΠϧ system, component ͱ͍ͬͨผͷΧςΰϦ͕Ͱ͖Δ͔΋͠Εͳ͍ͷͰ "groupϦιʔε"ͱ໋໊ͯ͠

Slide 38

Slide 38 text

Tips: ೚ҙͷϦϙδτϦ template.yaml

Slide 39

Slide 39 text

content഑Լͷcatalog-info.yamlʹ஋Λ୅ೖ͍ͯ͠Δ Tips: ೚ҙͷϦϙδτϦcatalog-info.yaml

Slide 40

Slide 40 text

Array TagsͷΑ͏ʹ͍͔ͭ͋͘Δલఏͷ΋ͷ Arrayͷதʹ͞Βʹ߲໨Λ௥ՃͰ͖Δ ui:field PickerΛ͔ͭͬͨೖྗิॿ Tips: ೚ҙͷϦϙδτϦ template.yaml

Slide 41

Slide 41 text

templatesঢ়ଶͷcatalog-info.yaml Array͸ forͰϧʔϓ If෼ذͰඞਢͰͳ͍߲໨Λ੍ޚ Templatesͷ੔ܗ͸Nunjucks PlaygroundͰ Tips: template༻ͷcatalog-info.yaml

Slide 42

Slide 42 text

ϓϩμΫτϦϙδτϦͷσΟϨΫτϦߏ੒ team_api └── group └── catalog-info.yaml Tips: ϓϩμΫτͷϦϙδτϦ ৘ใ͕୅ೖ͞ΕͨϑΝΠϧ

Slide 43

Slide 43 text

࣮ࡍͷϖʔδ Tips

Slide 44

Slide 44 text

࣮ࡍͷϖʔδ Tips

Slide 45

Slide 45 text

LinksͳͲͷ΢ΟδΣοτɺϓϥάΠϯʹ͍ͭͯ Backstage͸OSSͷͨΊɺࣗ਎ͰΧελϜՄೳ දࣔ͢Δɾ͠ͳ͍΋ࣗ༝ CoreϥΠϒϥϦɾϓϥάΠϯ͸ReactͰ࣮૷ ๛෋ͳϓϥάΠϯ༗ ࣗ෼ͨͪͰ࣮૷Մೳ Tips

Slide 46

Slide 46 text

ݱ࣌఺Ͱͷ੒ՌϙΠϯτ

Slide 47

Slide 47 text

ؔ܎ੑͷՄࢹԽ νʔϜͱγεςϜͷ1:Nؔ܎ͷදݱ Ұཡද͚ࣔͩͰ͸ͳཱ͍ମతͳ৘ใߏ଄ ৘ใؒͷؔ࿈ੑΛΑΓҰ૚୳ࡧ͕Մೳ ͜ͷνʔϜ͸ͲͷϦιʔεΛ୲౰͍ͯ͠Δ͔ݟ͑Δ ৘ใొ࿥ͷϋʔυϧ ٕज़తͳ஌͕ࣝͳͯ͘΋νʔϜ৘ใΛొ࿥Ͱ͖Δ ݱ࣌఺Ͱ࣮ݱͰ͖͍ͯΔϙΠϯτ

Slide 48

Slide 48 text

ࠓޙ΍͍ͬͯ͘΂͖͜ͱ

Slide 49

Slide 49 text

ଞνʔϜ΁ͷਁಁ ࣗ෼͕؅׋͍ͯ͠ΔνʔϜҎ֎΋ొ࿥͢Δ ొ࿥ɾߋ৽࣌ɺΑΓͻͱͷख͕͔͔Βͳ͍Α͏ʹ͢Δ࢓૊Έ ΦϯϘʔσΟϯά΁ͷ׆༻ େ࿮Λ೺Ѳ͠ͳ͕Βɺࣗ਎Ͱ৘ใΛ୳ࡧͰ͖ΔΑ͏ʹͳΔ ͞ΒͳΔࣗಈԽ ྫ: YAMLϑΝΠϧ͕ࣗಈతʹGitHubʹPush͞ΕΔ etc… ߋ৽৘ใΛͲ͏΍ͬͯऩू͢Δ͔ ׬੒΋ͳ͘ɺ௕͘ബ͘ɺऔΓ૊Έଓ͚Δඞཁ͕͋Δ

Slide 50

Slide 50 text

ࠓ͔ΒऔΓ૊ΊΔ͜ͱ

Slide 51

Slide 51 text

ೝ஌ෛՙΛ౿·͑ͨڥքઢΛݕ౼ʢνʔϜτϙϩδʔࢀরʣ ʢ੹೚ͷڥքઢ͕Ͱ͖ͨΒʣνʔϜAPIͷఆٛ ଞνʔϜʹެ։͢΂͖৘ใΛ໌֬ʹఆٛ͠ɺڞ௨ೝࣝΛ࡞Γ· ͢ɻ͜Ε͸νʔϜ਺͕গͳ͚Ε͹ಋೖ͕༰қ ΦʔφʔͱϦιʔεؔ܎ΛදݱͰ͖Δ࢓૊ΈΛಋೖ ϦϙδτϦʹରͯ͠ɺ࡞੒ॳظ͔ΒνʔϜ৘ใͱϦιʔε৘ใ Λೖྗ͢ΔΑ͏ͳ࢓૊ΈΛಋೖ͓ͯ͘͠ɻ͋ͱͰ਺ඦͷϦϙδ τϦʹ͍ΕΔίετ΍࿙ΕΛ๷ࢭͰ͖Δ ࠓ͔ΒऔΓ૊ΊΔ͜ͱ

Slide 52

Slide 52 text

·ͱΊ

Slide 53

Slide 53 text

BackstageʹΑΔ৘ใͷҰݩ؅ཧ 1:Nؔ܎ͷՄࢹԽ νʔϜτϙϩδʔ: νʔϜAPIͷΞΠσΞΛར༻ͨ͠৘ใެ։ ৘ใొ࿥͸ͳΔ΂͔͘ΜͨΜʹ ෳࡶԽ͢ΔલʹઃܭΛ! ։ൃऀͷೝ஌ෛՙܰݮͷͨΊʹ

Slide 54

Slide 54 text

No content