Tweet
Tweet

Slide 1

Slide 1 text

Phics Phics Graphics Generation Service. Graphics Generation Service. Created by Service Slide Masahiro Matsui

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

໨࣍ ໨࣍ 1. 2. 3. 4. 5. 6. 7. 8. ΞϓϦέʔγϣϯ֓ཁ δΣωϥςΟϒΞʔτͱ͸ αʔόʔଆ࣮૷ ΫϥΠΞϯτଆ࣮૷ ؀ڥߏங&DeployࣗಈԽ ൓ল఺ ࠓޙͷ՝୊ ࢀߟจݙ

Slide 4

Slide 4 text

ΞϓϦέʔγϣϯ֓ཁ ΞϓϦέʔγϣϯ֓ཁ Ϣʔβʔ͸ϩάΠϯޙɺཪฦ͠ͷΧʔυΛ഑ΒΕ Δɻ λοϓ͢Δ͜ͱͰɺΧʔυΛཪฦ͢͜ͱ͕Ͱ͖ɺΦ Ϟς໘ʹ͸δΣωϥςΟϒΞʔτ͕දࣔ͞ΕΔɻ ϘλϯΛԡ͢͜ͱͰɺը૾Λอଘ͢Δ͜ͱ͕Ͱ͖ Δɻ

Slide 5

Slide 5 text

δΣωϥςΟϒΞʔτͱ͸ δΣωϥςΟϒΞʔτͱ͸

Slide 6

Slide 6 text

αʔόʔଆ࣮૷ αʔόʔଆ࣮૷ Nginx Rails 5.2.1 Ruby 2.3.7 Webpacker devise react-rails

Slide 7

Slide 7 text

αʔόʔଆ࣮૷ αʔόʔଆ࣮૷ αϒυϝΠϯͰͷӡ༻ʢDNS,VPNͷϓϩόΠμͰ ͷઃఆ ʴ NginxͰͷϙʔτϑΥϫʔσΟϯάʣɻ Webpacker ͰΫϥΠΞϯτଆͷίϯύΠϧɻ devise ͰϢʔβೝূɻomniauth ʹΑΔGoogleೝ ূΛ࣮૷ʢબ୒ࢶ͕ଟ͍ͱٯʹ໎ͬͯ໘౗ͱ͍͏࣮ ମݧͱɺ؅ཧͷख͔ܰ͞ΒҰͭʹߜͬͨʣɻ react-rails Ͱ rails ଆͷσʔλΛ React ΫϥΠΞϯ τଆʹ౉͢ɻ

Slide 8

Slide 8 text

Webpacker໰୊ Webpacker໰୊ Webpacker͕ϩάΛు͔ͣʹམͪΔ໰୊ ͦͷଞͷ໘౗͝ͱ ࠷৽൛webpack΁ͷରԠͷ஗Ε

Slide 9

Slide 9 text

ΫϥΠΞϯτଆ࣮૷ ΫϥΠΞϯτଆ࣮૷ React.js 16.7.0-alpha.0 React P5Wrapper Material UI 3.7.1

Slide 10

Slide 10 text

P5Wrapper ͰͷReactͬΆ͍ P5Wrapper ͰͷReactͬΆ͍ σʔλϋϯυϦϯά σʔλϋϯυϦϯά p.setup = function () { p.myCustomRedrawAccordingToNewPropsHandler = propsHandler(p, canvas); }

Slide 11

Slide 11 text

؀ڥߏங&DeployࣗಈԽ ؀ڥߏங&DeployࣗಈԽ capistrano unicorn webpack-dev-server foreman

Slide 12

Slide 12 text

σϓϩΠϑϩʔ σϓϩΠϑϩʔ rails s , webpacker-dev-server, ΛbundleͰ ࣮ߦʢforemanͰ·ͱΊ͓ͯ͘ʣɺ࣮૷ͷ࠷ऴ֬ ೝɻ 1. ໰୊ͳ͚Ε͹cap production deployͰσϓϩ ΠΛ࣮ߦɻ 2. ಺෦Ͱassets:precompile, webpacker:compileΛߦ͍ɺunicornαʔόͷ࠶ ىಈɻ 3. 3ͷλΠϛϯάɺ৔ॴ͕໰୊ͱͳͬͨɻ

Slide 13

Slide 13 text

Webpacker໰୊ Webpacker໰୊ Webpacker͸WebpackͷઃఆϑΝΠϧͳͲΛӅṭ ͯ͘͠ΕΔɻymlදهͰൺֱత؆қʹઃఆՄೳɻ ͦͷ݁Ռ͍Ζ͍Ζแ·ͳ͍ͱ͍͚ͳ͍ͨΊɺ PermissionΤϥʔ΍bundleͷversion؅ཧͷ໰୊ͳ ͲͰߴස౓Ͱ͚͜Δɻ --trace Λ͔͚ͯ΋ϩά͕·ͱ΋ʹు͔Εͳ͍͜ ͱ͕͋Δɻ

Slide 14

Slide 14 text

Webpacker໰୊ Webpacker໰୊ Ͳ͏͢Δ͔ʁ Ͳ͏͢Δ͔ʁ ϩʔΧϧͰ͸ϩά΋ग़Δ͠ɺ͋·Γ͚͜ͳ͍͜ͱʹ ؾͮ͘ɻ Ϣʔβʔ͕σϑΥϧτͰ root ͩͬͨΓɺ΋ͱ΋ͱ system͕ ruby 2.3.0 Λࠅ࢖ͯ͠Δαʔόͩͬͨ ͷͰɺઌड़ͷ༷ͳ໰୊͕ग़ͨͱߟ͑ΒΕΔɻ → ϩʔΧϧͰίϯύΠϧΛ௨ͯ͠͠·͑͹͍͍ɻ → ͦͷޙrsyncͰϑΝΠϧసૹΛߦ͏ capistarano λεΫΛఆٛͯ͠࢖͏ɻ

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

൓ল఺ ൓ল఺ ΍Γ͍ͨ͜ͱʹྗ఺Λஔ͍࣮ͨ૷΍ϥΠϒϥϦͷ࢖ ༻͸ޮ཰Α͘ਐΊΒΕͨͷͰɺͦ͏͍ͬͨํ޲ʹ࣌ ؒΛ΋͏গ͠࢖͑Ε͹Α͔ͬͨɻ ͳΜͲ΋ߦ͏σϓϩΠ͸ޮ཰Խ͓ͯ͜͠͏ͱࢥͬͨ ݁ՌɺͦͪΒʹ࣌ؒΛ࢖͍ա͗ͯ͠·ͬͨɻ ܭըΛશཱͯͣ͘ʹ࡞ͬͨͨΊɺURLͳͲ͕ࡶɻ ͍Ζ͍Ζͱؒʹ߹Θͣɺೝূͷҙຯ͕ͳ͍ͱ͍͏࢒ ೦ͳঢ়ଶɻ

Slide 17

Slide 17 text

ࠓޙͷ՝୊ ࠓޙͷ՝୊ νέοτγεςϜʢ͜ΕΛೖΕͳ͍ͱϩάΠϯͷҙ ຯͳ͠ʣ Email Confirmation ϦηϚϥରࡦ༻ͷΞΧ΢ϯτsoft-deleteʢίϯςϯ πͷՁ஋ͱྔΛ্͛ͳ͍ͱҙຯͳ͠ʣ GANϞσϧͷΞϓϦέʔγϣϯ΁ͷऔΓࠐΈ(Ruby Ͱॻ͖ͨ͘ͳ͍ͷͰGAE/GOͷ༧ఆ) ࣮ࡍͷDB΁ͷը૾ͷอଘʢSaveϘλϯ͸ΧʔυΛ දʹฦ͔ͯ͠Βग़͍ͨ͠ʣ

Slide 18

Slide 18 text

ࠓޙͷ՝୊ ࠓޙͷ՝୊ Ϣʔβʔ͝ͱͷॴ࣋ը૾Ұཡػೳ SNS share ΞΠίϯ PWAରԠ Χʔυͷछྨ૿΍͢ LP࡞Δ

Slide 19

Slide 19 text

ࢀߟจݙ ࢀߟจݙ [ීٴ൛]δΣωϥςΟϒɾΞʔτ―ProcessingʹΑ Δ࣮ફΨΠυ,ɹMatt Pearson (ஶ), ٱอా ߊ߂ (؂ म), ԭ ܒհ (຋༁), ϏʔɾΤψɾΤψ৽ࣾ, 2014/11 1. The Nature of Code (English Edition), Daniel Shiffman, Amazon Services International, Inc. 2.