Tweet
Tweet

Slide 1

Slide 1 text

ϙέϞϯͷબग़ը໘Λ ղੳ͢ΔWebΞϓϦΛ࡞ͬͨ

Slide 2

Slide 2 text

໨࣍ • WebΞϓϦͷ֓ཁ • ϑϩϯτΤϯυ • όοΫΤϯυ • Πϯϑϥ • ػೳ໘ͷ՝୊ • ײ૝ • ·ͱΊ

Slide 3

Slide 3 text

WebΞϓϦͷ֓ཁ • ࠷ۙͷϙέϞϯ͸ ΦϯϥΠϯରઓ͕Մೳ • ૬खͷख͕࣋ͪ ӈͷਤͷΑ͏ʹදࣔ͞ΕΔ γʔϯ͕͋Δ • Կ͕͍ࣸͬͯΔ͔ࣗಈͰ ൑ఆ͍ͨ͠

Slide 4

Slide 4 text

WebΞϓϦͷ֓ཁ • ·ͣ࠷ॳʹσϞ͠·͢ • ιʔείʔυ odanado/TeamPreviewAnalyst • ͍ΘΏΔSPA(Single Page Application) • αʔό͸APIΛ௨ͯ͡JSONͳͲΛൃߦ • ΫϥΠΞϯτ͸JSONΛड͚औͬͯDOMΛૢ࡞ • HTMLͷੜ੒͸αʔόଆͰ͸ͳ͘ ΫϥΠΞϯτଆͰߦ͏

Slide 5

Slide 5 text

WebΞϓϦͷ֓ཁ Πϯϑϥ ϑϩϯτΤϯυ όοΫΤϯυ

Slide 6

Slide 6 text

ϑϩϯτΤϯυ ϑϩϯτΤϯυ

Slide 7

Slide 7 text

ϑϩϯτΤϯυ • React(+redux)Ͱॻ͍ͨ • Facebook͕։ൃ͍ͯ͠ΔOSS • ίϯϙʔωϯτࢦ޲ • Ծ૝DOMͰޮ཰తʹDOMΛߋ৽ • JSXͱݺ͹ΕΔJSΛ֦ுͨ͠ݴޠͰهड़ • ޙड़͢Δը૾ղੳAPIʹϦΫΤετΛ౤͛ͯ ͦͷ݁ՌʹԠͯ͡ը໘ΛมԽͤ͞Δ

Slide 8

Slide 8 text

όοΫΤϯυ όοΫΤϯυ

Slide 9

Slide 9 text

όοΫΤϯυ • REST API • Bottle(Python)Ͱ࣮૷ • ݱঢ়࢓༷͕؆୯ͳͷͰബ͍frameworkͰ΋େৎ෉ • ࣮૷଎౓తʹ࠷଎ • ը૾ղੳ • OpenCVͱscikit-image • ΞϧΰϦζϜ͸୯७(࣍ͷεϥΠυ)

Slide 10

Slide 10 text

όοΫΤϯυ • ը૾ղੳΞϧΰϦζϜ OpenCVͷinRangeؔ਺Ͱ ΦϨϯδ৭ͷ෦෼͚ͩநग़ ྖҬݕ஌Λߦ͍ Ұ൪େ͖͍ྖҬΛ੾ΓऔΓ

Slide 11

Slide 11 text

όοΫΤϯυ • ը૾ղੳΞϧΰϦζϜ ϙέϞϯ͕͍ࣸͬͯͦ͏ͳ ෦෼Λ੾Γग़͢

Slide 12

Slide 12 text

όοΫΤϯυ • ը૾ղੳΞϧΰϦζϜ ຊ෺ͷը૾ HOGಛ௃ྔͷϚϯϋολϯڑ཭͕ ࠷΋খ͍͞΋ͷΛબ୒ (༁ Ұ൪ࣅ͍ͯΔ΍ͭΛબͿ) ºϙέϞϯͷ਺

Slide 13

Slide 13 text

Πϯϑϥ Πϯϑϥ

Slide 14

Slide 14 text

Πϯϑϥ Dockerίϯςφ্ͰόοΫΤϯυ͸ಈ࡞ nginxͷϦόʔεϓϩΩγͰ αϒυϝΠϯׂΓ౰ͯ APIΛhttpsͰ഑৴͢Δඞཁ͕͋ͬͨͷͰ Let’s Encrypt Ͱূ໌ॻΛൃߦ ͍ͭ͜΋Dockerίϯςφ (jwilder/nginx-proxy) ͍ͭ͜΋Dockerίϯςφ (jrcs/letsencrypt-nginx-proxy-companion) docker-compose Ͱ؅ཧ

Slide 15

Slide 15 text

ػೳ໘ͷ՝୊ • ΋͏Ұ౓σϞ͠·͢ • ݱࡏͷղੳਫ਼౓͸6ׂఔ౓ • Ұൠެ։͠σʔλΛऩूத • ࠓͷͱ͜Ζ400ຕू·ͬͨ • σʔλ͕ू·Ε͹ػցֶशͰղੳͰ͖Δ͔΋ • twitterͱ࿈ܞͯ͠Ϣʔβʔ؅ཧ͍ͨ͠

Slide 16

Slide 16 text

ײ૝ • WebΞϓϦΛΠϯϑϥ͔ΒϑϩϯτΤϯυ ·Ͱ࡞Δͷ͸ॳΊͩͬͨ • ҰਓͰ৭ʑࢼͤΔͷͰָ͔ͬͨ͠ • ओཁͳ෦෼͸3೔ؒϓϩάϥϛϯά͚ͩΛͯ͠ ࡞͕ͬͨɼମௐΛյ͔͚ͨ͠ • ·ͩ·ͩػೳվળ͍ͨ͠ • Docker͸͍͍ͧ

Slide 17

Slide 17 text

·ͱΊ • ϙέϞϯͷબग़ը໘ͷղੳΛߦ͏WebΞϓϦ Λ࡞ͬͨ • ϑϩϯτΤϯυʹReact όοΫΤϯυʹBottle(Python) ΠϯϑϥʹDockerΛ࢖ͬͨ • ࠓޙ͸ղੳਫ਼౓ͷ޲্΍ twitterͷ࿈ܞΛ༻͍ͯϢʔβʔ؅ཧػೳͷ ࣮૷Λߦ͍͍ͨ