Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Phics
Search
Matts966
December 18, 2018
Programming
0
80
Phics
Web application of generative art
Matts966
December 18, 2018
Tweet
Share
More Decks by Matts966
See All by Matts966
OSS分散ベクトル検索エンジンValdと最新の取り組み
matts966
0
71
Grafana Dashboard as Code using Grafana Foundation SDK
matts966
3
140
nilarg
matts966
0
160
Static Analysis in Go
matts966
0
3k
Other Decks in Programming
See All in Programming
旅行プランAIエージェント開発の裏側
ippo012
2
890
AI時代のUIはどこへ行く?
yusukebe
18
8.8k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
520
複雑なドメインに挑む.pdf
yukisakai1225
5
1.1k
rage against annotate_predecessor
junk0612
0
160
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
290
AIでLINEスタンプを作ってみた
eycjur
1
230
為你自己學 Python - 冷知識篇
eddie
1
350
OSS開発者という働き方
andpad
5
1.7k
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.8k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
420
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
GitHub's CSS Performance
jonrohan
1032
460k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cult of Friendly URLs
andyhume
79
6.6k
Agile that works and the tools we love
rasmusluckow
330
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Site-Speed That Sticks
csswizardry
10
810
Visualization
eitanlees
148
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Six Lessons from altMBA
skipperchong
28
4k
Transcript
Phics Phics Graphics Generation Service. Graphics Generation Service. Created by
Service Slide Masahiro Matsui
None
࣍ ࣍ 1. 2. 3. 4. 5. 6. 7. 8.
ΞϓϦέʔγϣϯ֓ཁ δΣωϥςΟϒΞʔτͱ αʔόʔଆ࣮ ΫϥΠΞϯτଆ࣮ ڥߏங&DeployࣗಈԽ ল ࠓޙͷ՝ ࢀߟจݙ
ΞϓϦέʔγϣϯ֓ཁ ΞϓϦέʔγϣϯ֓ཁ ϢʔβʔϩάΠϯޙɺཪฦ͠ͷΧʔυΛΒΕ Δɻ λοϓ͢Δ͜ͱͰɺΧʔυΛཪฦ͢͜ͱ͕Ͱ͖ɺΦ Ϟς໘ʹδΣωϥςΟϒΞʔτ͕දࣔ͞ΕΔɻ ϘλϯΛԡ͢͜ͱͰɺը૾Λอଘ͢Δ͜ͱ͕Ͱ͖ Δɻ
δΣωϥςΟϒΞʔτͱ δΣωϥςΟϒΞʔτͱ
αʔόʔଆ࣮ αʔόʔଆ࣮ Nginx Rails 5.2.1 Ruby 2.3.7 Webpacker devise react-rails
αʔόʔଆ࣮ αʔόʔଆ࣮ αϒυϝΠϯͰͷӡ༻ʢDNS,VPNͷϓϩόΠμͰ ͷઃఆ ʴ NginxͰͷϙʔτϑΥϫʔσΟϯάʣɻ Webpacker ͰΫϥΠΞϯτଆͷίϯύΠϧɻ devise ͰϢʔβೝূɻomniauth
ʹΑΔGoogleೝ ূΛ࣮ʢબࢶ͕ଟ͍ͱٯʹ໎ͬͯ໘ͱ͍͏࣮ ମݧͱɺཧͷख͔ܰ͞ΒҰͭʹߜͬͨʣɻ react-rails Ͱ rails ଆͷσʔλΛ React ΫϥΠΞϯ τଆʹ͢ɻ
Webpacker Webpacker Webpacker͕ϩάΛు͔ͣʹམͪΔ ͦͷଞͷ໘͝ͱ ࠷৽൛webpackͷରԠͷΕ
ΫϥΠΞϯτଆ࣮ ΫϥΠΞϯτଆ࣮ React.js 16.7.0-alpha.0 React P5Wrapper Material UI 3.7.1
P5Wrapper ͰͷReactͬΆ͍ P5Wrapper ͰͷReactͬΆ͍ σʔλϋϯυϦϯά σʔλϋϯυϦϯά p.setup = function ()
{ p.myCustomRedrawAccordingToNewPropsHandler = propsHandler(p, canvas); }
ڥߏங&DeployࣗಈԽ ڥߏங&DeployࣗಈԽ capistrano unicorn webpack-dev-server foreman
σϓϩΠϑϩʔ σϓϩΠϑϩʔ rails s , webpacker-dev-server, ΛbundleͰ ࣮ߦʢforemanͰ·ͱΊ͓ͯ͘ʣɺ࣮ͷ࠷ऴ֬ ೝɻ 1.
ͳ͚Εcap production deployͰσϓϩ ΠΛ࣮ߦɻ 2. ෦Ͱassets:precompile, webpacker:compileΛߦ͍ɺunicornαʔόͷ࠶ ىಈɻ 3. 3ͷλΠϛϯάɺॴ͕ͱͳͬͨɻ
Webpacker Webpacker WebpackerWebpackͷઃఆϑΝΠϧͳͲΛӅṭ ͯ͘͠ΕΔɻymlදهͰൺֱత؆қʹઃఆՄೳɻ ͦͷ݁Ռ͍Ζ͍Ζแ·ͳ͍ͱ͍͚ͳ͍ͨΊɺ PermissionΤϥʔbundleͷversionཧͷͳ ͲͰߴසͰ͚͜Δɻ --trace Λ͔͚ͯϩά͕·ͱʹు͔Εͳ͍͜ ͱ͕͋Δɻ
Webpacker Webpacker Ͳ͏͢Δ͔ʁ Ͳ͏͢Δ͔ʁ ϩʔΧϧͰϩάग़Δ͠ɺ͋·Γ͚͜ͳ͍͜ͱʹ ؾͮ͘ɻ Ϣʔβʔ͕σϑΥϧτͰ root ͩͬͨΓɺͱͱ system͕
ruby 2.3.0 Λࠅͯ͠Δαʔόͩͬͨ ͷͰɺઌड़ͷ༷ͳ͕ग़ͨͱߟ͑ΒΕΔɻ → ϩʔΧϧͰίϯύΠϧΛ௨ͯ͠͠·͍͍͑ɻ → ͦͷޙrsyncͰϑΝΠϧసૹΛߦ͏ capistarano λεΫΛఆٛͯ͠͏ɻ
None
ল ল Γ͍ͨ͜ͱʹྗΛஔ͍࣮ͨϥΠϒϥϦͷ ༻ޮΑ͘ਐΊΒΕͨͷͰɺͦ͏͍ͬͨํʹ࣌ ؒΛ͏গ͑͠ΕΑ͔ͬͨɻ ͳΜͲߦ͏σϓϩΠޮԽ͓ͯ͜͠͏ͱࢥͬͨ ݁ՌɺͦͪΒʹ࣌ؒΛ͍ա͗ͯ͠·ͬͨɻ ܭըΛશཱͯͣ͘ʹ࡞ͬͨͨΊɺURLͳͲ͕ࡶɻ ͍Ζ͍Ζͱؒʹ߹Θͣɺೝূͷҙຯ͕ͳ͍ͱ͍͏ ೦ͳঢ়ଶɻ
ࠓޙͷ՝ ࠓޙͷ՝ νέοτγεςϜʢ͜ΕΛೖΕͳ͍ͱϩάΠϯͷҙ ຯͳ͠ʣ Email Confirmation ϦηϚϥରࡦ༻ͷΞΧϯτsoft-deleteʢίϯςϯ πͷՁͱྔΛ্͛ͳ͍ͱҙຯͳ͠ʣ GANϞσϧͷΞϓϦέʔγϣϯͷऔΓࠐΈ(Ruby Ͱॻ͖ͨ͘ͳ͍ͷͰGAE/GOͷ༧ఆ)
࣮ࡍͷDBͷը૾ͷอଘʢSaveϘλϯΧʔυΛ දʹฦ͔ͯ͠Βग़͍ͨ͠ʣ
ࠓޙͷ՝ ࠓޙͷ՝ Ϣʔβʔ͝ͱͷॴ࣋ը૾Ұཡػೳ SNS share ΞΠίϯ PWAରԠ Χʔυͷछྨ૿͢ LP࡞Δ
ࢀߟจݙ ࢀߟจݙ [ීٴ൛]δΣωϥςΟϒɾΞʔτ―ProcessingʹΑ Δ࣮ફΨΠυ,ɹMatt Pearson (ஶ), ٱอా ߊ߂ ( म),
ԭ ܒհ (༁), ϏʔɾΤψɾΤψ৽ࣾ, 2014/11 1. The Nature of Code (English Edition), Daniel Shiffman, Amazon Services International, Inc. 2.