ピクシブのコンテンツ配信基盤技術 / pixiv TECH SALON

by Harukasan

Slide 1

Slide 1 text

ϐΫγϒͷ഑৴ج൫ٕज़ pixiv Technologies Inc. Harukasan / ಓҪ ढ़հ

Slide 2

Slide 2 text

Harukasan ಓҪ ढ़հ 2012೥౓৽ଔೖࣾ  Πϯϑϥ෦ˠImageFluxࣄۀ্ཱͪ͛ˠ഑৴ٕज़෦Ϛωʔδϟʔ  ϐΫγϒςΫϊϩδʔζגࣜձࣾࣥߦ໾һ  γχΞςοΫϦʔυ

Slide 3

Slide 3 text

ϐΫγϒͷ੒௕Λࢧ͖͑ͯͨ഑৴ٕज़

Slide 4

Slide 4 text

Infrastructure ImageFlux Live Streaming Future ϐΫγϒͷ੒௕Λࢧ͖͑ͯͨ഑৴ٕज़

Slide 5

Slide 5 text

Infrastructure

Slide 6

Slide 6 text

B28 ϕχϠػ

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

ऩ·Βͳ͍ճઢ ٧·Δہࣷ ᫔᫓͢ΔωοτϫʔΫ ৴པੑ

Slide 9

Slide 9 text

スパゲッティーコード（笑）

Slide 10

Slide 10 text

1G private lines ! SERVER ROOM SHINJUKU DC 1G x 8 Internet Cache Origin

Slide 11

Slide 11 text

! FUKUSHIMA  Shirakawa DC 10G x 8 Internet

Slide 12

Slide 12 text

pixiv͚ͩͰͳ͘શαʔϏεڞ௨Ͱ࢖͑Δը૾഑৴ج൫ ߴूੵαʔόΛಋೖ (2U 24SSD) αʔϏε͔Βಠཱͨ͠ߏ੒ ϑϧ10GωοτϫʔΫ ༰ྔޮ཰UP PXIMG

Slide 13

Slide 13 text

ImageFlux

Slide 14

Slide 14 text

PC iOS Android SP FP 20+ images

Slide 15

Slide 15 text

ॲཧ͕ෳࡶͰख͕෇͚ΒΕͳ͍  ౤ߘʹ͕͔͔࣌ؒΔ ը૾αΠζ͕খ͍͞ ಈతม׵͢Δʹ΋CPUϦιʔε͕ਏ͍ ैདྷͷը૾ม׵ͷ໰୊఺

Slide 16

Slide 16 text

go-thumber Gopher image was created by Takuya Ueda (https://twitter.com/tenntenn).  Licensed under the Creative Commons 3.0 Attributions license. https://github.com/pixiv/go-thumber αϜωΠϧม׵ϓϩΩγ

Slide 17

Slide 17 text

͏·͍ ΍͍͢ ͸΍͍

Slide 18

Slide 18 text

ߴ඼࣭ লϝϞϦ ௿஗Ԇ

Slide 19

Slide 19 text

Faster JPEG resizing Decode Y'CbCr→RGB RGB→Y'CbCr Encode Resize Buﬀer ImageMagick

Slide 20

Slide 20 text

Faster JPEG resizing Decode Y'CbCr→RGB RGB→Y'CbCr Encode Resize Buﬀer ImageMagick Decode Encode Resize go-thumber Buﬀer

Slide 21

Slide 21 text

Faster JPEG resizing Decode Y'CbCr→RGB RGB→Y'CbCr Encode Resize Buﬀer ImageMagick Decode Encode Resize go-thumber Buﬀer 3x  faster

Slide 22

Slide 22 text

αϜωΠϧϚελͷੜ੒ ΦϦδφϧը૾ αϜωΠϧϚελJPEG Ξοϓϩʔυ࣌ੜ੒ go-thumberͰੜ੒

Slide 23

Slide 23 text

pixivͷશαϜωΠϧΛಈతੜ੒ʹஔ͖׵͑ ޷͖ͳαΠζͷαϜωΠϧΛੜ੒Ͱ͖ΔΑ͏ʹ ଞαʔϏεʹಋೖ͢Δʹ͸αϜωΠϧϚελ͕ඞཁ go-thumberʹΑΔը૾ม׵

Slide 24

Slide 24 text

શαʔϏεԣஅͰ഑৴ج൫͕ར༻Ͱ͖Δঢ়ଶͰ͸ͳ͍ ը૾ϑΥʔϚοτʹର͢Δਖ਼֬ͳ஌͕ࣝཁٻ͞ΕΔ αʔϏεΛ࡞Δͨͼʹը૾ʹ͍ͭͯߟ͑Δͷ͸ਏ͍ ͦ΋ͦ΋ը૾ม׵͕΍Γ͍ͨΘ͚Ͱ͸ͳ͍ go-thumberͷ໰୊఺

Slide 25

Slide 25 text

ϐΫγϒ͕ը૾ม׵ٕज़ʹ౤ࢿ͠ଓ͚Δʹ͸ શαʔϏεԣஅͰར༻Ͱ͖Δ഑৴ج൫Λ։ൃ͢Δʹ͸ ը૾ม׵͸ΠϯϑϥαʔϏεͰ͋Δ΂͖Ͱ͸

Slide 26

Slide 26 text

։ൃαΠΫϧΛଅਐ͢ΔΫϥ΢υը૾ม׵αʔϏε

Slide 27

Slide 27 text

։ൃαΠΫϧΛଅਐ͢ΔΫϥ΢υը૾ม׵αʔϏε Base:  go-thumber  pixiv഑৴Ϋϥελ Format:  JPEG, PNG, GIF  and WebP Origin:  HTTPS and S3 Infrastructure: ͘͞ΒΠϯλʔωοτ  ίϯςϯπ഑৴ج൫ JPEG PNG WebP HTTPS

Slide 28

Slide 28 text

γεςϜ։ൃ Ӧۀ/αϙʔτ Πϯϑϥӡ༻ " ͓٬༷

Slide 29

Slide 29 text

ImageFluxΛ͝ར༻ͷ͓٬༷

Slide 30

Slide 30 text

PXIMG Ϋϥ΢υαʔϏε ࣾ಺഑৴ج൫ ίʔυϕʔεɾϊ΢ϋ΢Λڞ༗ ͘͞ΒΠϯλʔωοτӡ༻ ࣾ಺Πϯϑϥ෦ӡ༻ ߴՄ༻ੑ ௿ίετ ؅ཧίϯιʔϧ ϨΨγʔͳઃఆϑΝΠϧ

Slide 31

Slide 31 text

JPEGɺPNGɺGIFʹՃ͑ͯWebPग़ྗʹରԠ ύϥϝʔλॺ໊ػೳ ύε͝ͱͷσϑΥϧτύϥϝʔλ ΧϥʔϓϩϑΝΠϧ΁ͷରԠɺద༻ํ๏ݟ௚͠ ෳ਺ຕͷΦʔόʔϨΠʹରԠ ϦϦʔεޙͷػೳ௥Ճ

Slide 32

Slide 32 text

JPEGɺPNGͷຒΊࠐΈΧϥʔϓϩϑΝΠϧʹରԠ ೖྗઐ༻ɺຒΊࠐΈग़ྗͰ͖ͳ͍৔߹͸sRGBʹม׵ Color ProfileରԠ ICC ICC ICC ICC ICC LittleCMS2

Slide 33

Slide 33 text

type ScanLineReader interface {    // Config returns the image configuration. Config() *Config    // ReadScanLines reads scan lines into the p for each component. ReadScanLines(ctx context.Context, p [][]uint8) (int, error)  } ֤ը૾ม׵ίϯϙʔωϯτΛؔ਺ͱ࣮ͯ͠૷ ը૾ม׵ύΠϓϥΠϯ func Scale(src ScanLineReader, width, height int) ScanLineReader

Slide 34

Slide 34 text

c := Decode(src) c = Clip(c, image.Rect(10,10,410,310)) c = Scale(c, 200, 150) Encode(rw, c) ը૾ม׵ύΠϓϥΠϯ Decode Clip Scale Encode ෳ਺ͷը૾ॲཧΛ࿈݁

Slide 35

Slide 35 text

Decode Scaling ඞཁͳॲཧΛඞཁͳ͚ͩͭͳ͛Δ Decode Y'CbCr→RGB Compositing Scaling RGB→Y'CbCr Encode Color transform

Slide 36

Slide 36 text

ImageFluxࣄۀ෦ͷൃ଍ʢݱ഑৴ٕज़෦ʣ ը૾഑৴ٕज़୯ମͰ։ൃαΠΫϧΛ·ΘͤΔΑ͏ʹ ར༻Ϣʔβ͕֦େ͢Δ͜ͱͰɺΑΓ඼࣭ɺػೳ͕޲্ ߴ౓ͳը૾ม׵ٕज़ʹ௅ઓͰ͖ΔΑ͏ʹ ImageFluxޙͷੈք

Slide 37

Slide 37 text

Live Streaming

Slide 38

Slide 38 text

pixiv Sketch LIVE ͓ֆ͔͖ΛΈΜͳͰϦΞϧλΠϜϥΠϒ഑৴

Slide 39

Slide 39 text

ϦϦʔε౰ॳͷ໰୊ WebRTC SFU͔Β௚઀ࢹௌऀʹ഑৴ ਺ઍਓͷಉ࣌ࢹௌΛ࣮ݱͰ͖ͳ͍ WebRTC - HLSม׵Λ࣮૷Ͱ͖ͳ͚Ε͹࣍ʹਐΊͳ͍

Slide 40

Slide 40 text

WebRTC - HLS WebRTC SFU Sora Streamer Transcoder RTP forwarding spawn GPU MPEG-TS PIPE M3U8 # " Cache ഑৴ऀ ࢹௌऀ

Slide 41

Slide 41 text

Live Streaming ߴ඼࣭ͳϥΠϒ഑৴Λखܰʹ࣮ݱ͢Δ  ϦΞϧλΠϜಈըม׵

Slide 42

Slide 42 text

ϐΫγϒΛࢧ͖͑ͯͨ഑৴ٕज़ ௿ίετɺߴ඼࣭ͳ഑৴Λ࣮ݱͨ͠Πϯϑϥ؀ڥ ࣗࣾ։ൃΛଓ͚͖ͯͨը૾ɺಈըม׵ٕज़

Slide 43

Slide 43 text

Future

Slide 44

Slide 44 text

ίϯςϯπ͸ΑΓϦονʹɺΑΓߴ඼࣭ʹ ΑΓԕ͘ͷɺΑΓͨ͘͞ΜͷϢʔβʔʹಧ͚ΒΕΔΑ͏ʹ

Slide 45

Slide 45 text

ߴ଎ɺେ༰ྔ഑৴ͷݚڀ։ൃ Format:  VP9 HEIF (HEVC) AV1 Protocol:  WebRTC LHLS Infrastructure:  100G network ෳ਺Ϧʔδϣϯ CDNͱͷ౷߹ Research:  ػցֶश ετϦʔϜม׵

Slide 46

Slide 46 text

Fluent Delivery ͳΊΒ͔ͳ഑৴

Slide 47

Slide 47 text

1ຕ͚ͩը૾͕ग़ͳͯ͘  ΨΫοͱͳΔͷ͸͍͢͝ετϨε pixivΛӾཡͨ͠ͱ͖ʹ  ετϨεͳ͘ӾཡͰ͖Δ ੈքதͰۉҰͳ඼࣭Λఏڙ͢Δ ͳΊΒ͔ͳ഑৴

Slide 48

Slide 48 text

ߴ଎ େ༰ྔ ͳΊΒ͔

Slide 49

Slide 49 text

Infrastructure ImageFlux Live Streaming Future

Slide 50

Slide 50 text

ಧ͚͍ͨ΋ͷΛɺ͋ͨΓ·͑ʹಧ͚Δ

Slide 51

Slide 51 text

ͳΊΒ͔ͳ഑৴ٕज़ ը૾ɾಈըม׵ ϥΠϒετϦʔϛϯά ΤϯδχΞΛืू͍ͯ͠·͢ʂ