ブログを支える技術

社内勉強会の発表資料です。
https://tech.feedforce.jp/vue-elasticsearch.html

Transcript

1. εϥΠυதͷ୹ॖURL (goo.gl) ͸Speaker DeckରࡦͰ͢ɻ KeynoteͩͱURL͕ΫϦοΧϒϧʹͳΒͳ͍ͨΊɻ
2. ͋ͷʰ̋̋Λࢧ͑Δٕज़ʱ͔Β10ϲ݄ https://goo.gl/XUlD4p
3. ύϫʔΞοϓͯ͠ؼͬͯࢀΓ·ͨ͠ʂ
4. ̋̋̋Λࢧ͑Δٕज़ 2017.02.17 ૿ాو࢜(@masutaka) 1.5ഒʂ
5. ̋ϩ̋Λࢧ͑Δٕज़ 2017.02.17 ૿ాو࢜(@masutaka)
6. ̋ϩάΛࢧ͑Δٕज़ 2017.02.17 ૿ాو࢜(@masutaka)
7. ϒϩάΛࢧ͑Δٕज़ 2017.02.17 ૿ాو࢜(@masutaka)
8. https://masutaka.net/chalow/
9. ࣮ԋ
11. ࠓճͷݕࡧͷ࢓૊Έ ਓ → search.masutaka.net → nginx → elasticsearch
12. ͬ͘͟Γઆ໌ • ϑϩϯτΤϯυ͔Βɺmasutaka.netʹ͋Δ ElasticsearchͷAPIΛୟ͍ͯϒϩάهࣄΛݕࡧ • Elasticsearchͷهࣄσʔλ͸σϓϩΠͷͨͼʹ ߋ৽͞ΕΔ • ANDݕࡧͱNOTݕࡧ͚࣮ͩ૷ͨ͠
13. Ϟνϕʔγϣϯ
14. • ιʔγϟϧPLUSͷސ٬޲͚ϚχϡΞϧΛ HTMLԽͨ࣌͠ʹɺElasticsearchΛશจݕࡧ Τϯδϯͱͯ͠࢖͑Δ͔ʁͷݕূ • ػೳͱ࣮૷͠΍͢͞ • ElasticsearchΛϩάͷՄࢹԽ͚ͩͰ͸ͳ ͘ɺશจݕࡧΤϯδϯͱͯ͠΋࢖͍͍ͨ
15. ͦ΋ͦ΋ ϚελΧωοτͱ͸ https://masutaka.net
16. https://masutaka.net/chalow/
17. • ͘͞ΒͷVPS্ͰࣗυϝΠϯΛӡ༻ • ٕज़ϝϞͷެ։৔ॴ • ֤छٕज़ͷ࣮ݧ৔ • fluentd, Elasticsearch, Kibana, BigQuery, http2, Mackerel, New Relic, Datadog, Vue.js,…
18. ߏ੒ਤ
19. σϓϩΠ 1. GitHubͷmasterʹcommit͕௥Ճ͞ΕΔͱɺ CircleCI͕capistranoΛ࢖ͬͯࣗಈσϓϩΠ 1. HTMLͷੜ੒ͱElasticsearch΁ͷ౤ೖ 2. pushoverͰiPhoneʹ௨஌
20. • 1ͭͷʮChangeLogϝϞʯϑΝΠϧ͔ΒϒϩάΛੜ੒ • chalowͱ͍͏Perl੡ͷHTMLδΣωϨʔλΛΧελ ϚΠζ • 2001-12-30͔Βॻ͖࢝Ίͨ • 2008-09-25ʹWebαΠτͱͯ͠ެ։ • 2009-05-17͔Βmasutaka.netͱͯ͠Քಇத • 2017-02-17ݱࡏɺ37,268ߦ 1,245هࣄ http://chalow.org
21. ϚελΧͷChangeLogϝϞʢ࣮ମʣ
22. ChangeLogϝϞͱ͸
23. • Unix Magazine 2002೥1݄߸ʰUnixͷϝϞٕज़ʱͰੈʹ஌Β ΕΔ • ChangeLogܗࣜΛ࠾༻ͨ͠1ͭͷςΩετϑΝΠϧ • ৘ใ͕1ͭͷϑΝΠϧʹ·ͱ·Δɻϙέοτ1ͭݪଇ • ৽͍͠ϝϞ͸ඞͣҰ൪্ʹͳΔͨΊɺ੔ཧͷඞཁ͕ͳ ͍ • ςΩετϑΝΠϧͳͷͰɺ࢖͍׳ΕͨΤσΟλͰૉૣ͘ ฤूͰ͖Δɻকདྷʹ౉ͬͯσʔλͷҠߦΛ৺഑͢Δඞ ཁ΋ͳ͍ http://0xcc.net/unimag/1/
24. ͲͷΑ͏ʹ࣮૷͔ͨ͠
25. ࠾༻ͨ͠πʔϧ • Vue.js-2.1.10 + axios-0.15.3 • nginx-1.11.3 • Elasticsearch-5.1.1 • Oga-2.8
26. JavaScript • ҙ֎ͱ΍Δ͜ͱ͕ଟ͔ͬͨ • FlameworkʢVue.jsʣ • HTTP request with Ajaxʢaxiosʣ • ݕࡧΫΤϦ૊Έཱͯʢࣗલʣ • Paginationʢࣗલʣ • Routingʢࣗલʣ
27. • ർΕͨͷͰɺޙ͸URL͚ͩͰࣦྱ͠·͢ • https://masutaka.net/chalow/search.html • https://masutaka.net/chalow/search.js
28. ElasticsearchͷݕࡧΫΤϦ https://www.elastic.co/guide/en/elasticsearch/reference/5.1/ query-dsl-bool-query.html https://goo.gl/WVxFGo
29. “ָ͍͠” { "query": { "bool": { "should": [ { "term": { "title": "ָ͍͠" } }, { "term": { "body": "ָ͍͠" } } ], "minimum_should_match": 1 } } } OR هࣄλΠτϧ هࣄຊจ
30. “ָ͍͠ emacs” { "query": { "bool": { "must": [ { "bool": { "should": [ { "term": { "title": "ָ͍͠" } }, { "term": { "body": "ָ͍͠" } } ], "minimum_should_match": 1 } }, { "bool": { "should": [ { "term": { "title": "emacs" } }, { "term": { "body": "emacs" } } ], "minimum_should_match": 1 } } ] } } } AND
31. ָ͍͠ -emacs { "query": { "bool": { "must": [ { "bool": { "should": [ { "term": { "title": "ָ͍͠" } }, { "term": { "body": "ָ͍͠" } } ], "minimum_should_match": 1 } } ], "must_not": [ { "bool": { "should": [ { "term": { "title": "emacs" } }, { "term": { "body": "emacs" } } ], "minimum_should_match": 1 } } ] } } } NOT
32. nginxͷઃఆ upstream application-elasticsearch { server 0.0.0.0:9200; } server { listen 443 ssl http2; server_name search.masutaka.net; # (snip) location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers Content-Type; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Host $host; proxy_pass http://application-elasticsearch/chalow/article/_search; } } ElasticsearchΛ·Δ͝ͱެ։ ͯ͠͸͍ͳ͍͔Βେৎ෉ͩ ͱ͸ࢥ͏ɻ
33. kuromoji pluginͷΠϯετʔϧ $ cd /usr/share/elasticsearch $ sudo bin/elasticsearch-plugin install analysis-kuromoji $ sudo service elasticsearch restart
34. ςϯϓϨʔτͷ౤ೖ $ curl -X PUT 'http://localhost:9200/_template/chalow' -d ' { "template" : "chalow", "settings": { "index": { "analysis": { "tokenizer": { "kuromoji_user_dict": { "type": "kuromoji_tokenizer", "mode": "search" } } } } }, "mappings": { "article": { "properties": { "title": { "type": "string", "analyzer": "kuromoji", "fielddata": true, "fields": { "keyword": { "type": "keyword" } } }, "body": { "type": "string", "analyzer": "kuromoji", "fielddata": true, "fields": { "keyword": { "type": "keyword" } } } } } } } '
35. هࣄσʔλͷ౤ೖ #!/bin/sh -eu TMP_JSON=chalow-es.json ES_URL=http://localhost:9200 ./script/html2json > $TMP_JSON curl -s -X DELETE $ES_URL/chalow curl -s -X POST $ES_URL/_bulk --data-binary @$TMP_JSON > /dev/null ※ σϓϩΠ࣌ʹ࣮ߦ͞ΕΔɻ./script/html2json͸Oga gemΛ࢖ͬͯHTMLͳهࣄΛύʔ ε͠ɺElasticsearch Bulk POSTͷͨΊͷjsonΛ࡞Δɻίʔυ͸ https://goo.gl/atnXVm
37. Vue.jsͱͷग़ձ͍ • ReactɺAngularʹͳ͡Ίͳ ͔ͬͨ๻ʹखΛࠩ͠৳΂ ͯ͘ΕͨVue.js - Qiita [^1] • ࢲͨͪ͸ͳͥReactͰ͸ͳ ͘Vue.jsΛબΜͩͷ͔ | ϓ ϩάϥϛϯά | POSTD [^2] [^1]: https://goo.gl/kNE5If, [^2]: https://goo.gl/bB5Ej5
38. ྑ͍ͱ͜Ζ • ϋʔυϧͷ௿͞ • JSͷϏϧυ؀ڥΛߏஙͤͣʹ࢝ΊΒΕΔ • jQueryͰࢭ·͍ͬͯΔਓͰ΋ϦΞΫςΟϒϓ ϩάϥϛϯάΛ࢝ΊΒΕΔ • ೔ຊޠΨΠυΛ1೔΍Ε͹ɺಈ͘΋ͷΛ࡞ΕΔ https://goo.gl/mkDKpE
39. Elasticsearchʹอଘͨ͠ͱ͍͏ ͜ͱ͸ʁ
40. KibanaͰՄࢹԽग़དྷΔʂ
41. ࣮ԋ
44. ࣗݾຬ଍͕ಘΒΕ·ͨ͠ɾɾɾʂ
45. ݁ہͷͱ͜ΖɺElasticsearch͸ ݕࡧʹ࢖͑Δʁ
46. • ֶशίετ͸ߴ͍͕ɺݕࡧΤϯδϯͱͯ͠ ͸༏लͩͱࢥͬͨɻ΍͸ΓKuromoji͕σΧΠ • ॳظઃఆͰ΋ͦͦ͜͜࢖͑ΔɻΘ͔ͪॻ͖ ͷνϡʔχϯά͸ඞཁͦ͏ • όοΫΤϯυ͔Β࢖͑͹ɺΞΫηεݖΛߟ ྀͨ͠ݕࡧ΋Ͱ͖Δ͸ͣ • ֶशίετߴ͍ͳʔʢ೰Έʣ
47. ͱ͜ΖͰݕࡧͱ͍͑͹ʁ
49. Google Custom SearchͰ΋ ࣮૷ͯ͠Έͨ
51. ࣮ԋ
53. Google Custom Search • GoogleͷΤϯδϯΛ࢖ͬͯɺ೚ҙͷαΠτΛݕࡧͰ͖ΔαʔϏε • GCP্͔ΒAPI KEYͱENGINE IDΛൃߦ͢Ε͹࢖͑Δ • ແྉ࿮ͷར༻੍ݶ͸100 queries/day • https://goo.gl/DgHyop • ࠷௿ྉۚ͸100USDʢ20,000 queries/yearʣ • https://goo.gl/wdxEXx
54. ײ૝ • ͕͢͞ੈք࠷ڧͷϚωʔδυݕࡧαʔϏε • GETϦΫΤετͰ؆୯ʹ࢖͑ͨ • ͋ΕɺݸਓαΠτఔ౓ͳΒ͜ͷར༻੍ݶͰ΋େৎ෉͔΋ • Elasticsearchͱҧͬͯɺࡉ͔ͳௐ੔͸Ͱ͖ͳ͍ • ϖʔδ಺ͷݕࡧίϯςϯπΛࢦఆ͢Δͱ͔
55. ճސ
56. ೥຤͘Β͍͔Βߏ૝͕ݻ·Γ ࢝ΊΔ
57. (´-`).oO(Elasticsearch͸࠷৽ʹ͠ ͓͔ͯ͘)
58. https://goo.gl/hfXBZe
59. • ʗ(^o^)ʘ Elasticsearch 3೥෼ͷσʔλΛશ ͯϩετ • ʗ(^o^)ʘ ϚΠάϨʔγϣϯΨΠυʹ͸ ै͍·͠ΐ͏ https://goo.gl/VY62Hh
60. (´-`).oO(SSLূ໌ॻʹ search.masutaka.netͷ௥Ճ͕ඞཁͩͳ)
61. https://goo.gl/liOdYN
62. • ʗ(^o^)ʘ StartSSL͕ೝূہͱͯ͠ऴΘͬ ͯͨɻ͔͠͠·ͩൢച͍ͯ͠Δͱ͍͏ҋ • ʗ(^o^)ʘ ஌ࣝෆ଍͔Βແବʹ՝ۚͨ͠ • Let’s EncryptʹҠߦ
63. (´-`).oO(Vue.jsͷྑ͞ΛΠϯϑ ϥͷਓʹ΋஌ͬͯ΋ΒΘͶ͹)
64. ʗ(^o^)ʘ ̏िʹ౉ͬͯ঺հ 1. ঺հฤ 2. Ajaxฤ 3. jQueryͱͷҧ͍ฤ
65. (´-`).oO(ٱʑʹ΋͘΋͘ձʹ ग़ͯΈΔ͔)
67. • ʗ(^o^)ʘ ։ళ࣌ؒΛա͔͗ͯΒɺ߄ͨ ͩ͘͠ళͷਓ͕΍͖ͬͯͨɻ౰൪ͷਓ͕ ৸๥ʁ • ʗ(^o^)ʘ ॳΊͯߦͬͨίϫʔΩϯάε ϖʔεͩͬͨͷͰɺ͏Ζͨ͑ͨ
68. (´-`).oO(΋͘΋͘ձͷ੒ՌΛ ࿩ͨͯ͘͠࢓ํ͕ͳ͍)
69. ʗ(^o^)ʘ ΋͘΋͘ձͷ࠷ޙ ͰωλόϨ
70. ࠓޙͱ΋ϚελΧωοτΛ ΑΖ͓͘͠ئ͍͠·͢ɻ