Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ブログを支える技術

D6c5403c0b6ef2f9fd51910ea38323a3?s=47 Takashi Masuda
February 17, 2017

 ブログを支える技術

D6c5403c0b6ef2f9fd51910ea38323a3?s=128

Takashi Masuda

February 17, 2017
Tweet

More Decks by Takashi Masuda

Other Decks in Technology

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. ࣮ԋ

  10. None
  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
  36. None
  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. ࣮ԋ

  42. None
  43. None
  44. ࣗݾຬ଍͕ಘΒΕ·ͨ͠ɾɾɾʂ

  45. ݁ہͷͱ͜ΖɺElasticsearch͸ ݕࡧʹ࢖͑Δʁ

  46. • ֶशίετ͸ߴ͍͕ɺݕࡧΤϯδϯͱͯ͠ ͸༏लͩͱࢥͬͨɻ΍͸ΓKuromoji͕σΧΠ • ॳظઃఆͰ΋ͦͦ͜͜࢖͑ΔɻΘ͔ͪॻ͖ ͷνϡʔχϯά͸ඞཁͦ͏ • όοΫΤϯυ͔Β࢖͑͹ɺΞΫηεݖΛߟ ྀͨ͠ݕࡧ΋Ͱ͖Δ͸ͣ •

    ֶशίετߴ͍ͳʔʢ೰Έʣ
  47. ͱ͜ΖͰݕࡧͱ͍͑͹ʁ

  48. None
  49. Google Custom SearchͰ΋ ࣮૷ͯ͠Έͨ

  50. None
  51. ࣮ԋ

  52. None
  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(ٱʑʹ΋͘΋͘ձʹ ग़ͯΈΔ͔)

  66. None
  67. • ʗ(^o^)ʘ ։ళ࣌ؒΛա͔͗ͯΒɺ߄ͨ ͩ͘͠ళͷਓ͕΍͖ͬͯͨɻ౰൪ͷਓ͕ ৸๥ʁ • ʗ(^o^)ʘ ॳΊͯߦͬͨίϫʔΩϯάε ϖʔεͩͬͨͷͰɺ͏Ζͨ͑ͨ

  68. (´-`).oO(΋͘΋͘ձͷ੒ՌΛ ࿩ͨͯ͘͠࢓ํ͕ͳ͍)

  69. ʗ(^o^)ʘ ΋͘΋͘ձͷ࠷ޙ ͰωλόϨ

  70. ࠓޙͱ΋ϚελΧωοτΛ ΑΖ͓͘͠ئ͍͠·͢ɻ