Save 37% off PRO during our Black Friday Sale! »

Lighthouse CI を使って 継続的にスコアを計測しよう! / Lighthouse CI

Lighthouse CI を使って 継続的にスコアを計測しよう! / Lighthouse CI

【mediba社合同勉強会】コネヒトマルシェオンライン でのLT資料です。
https://connehito.connpass.com/event/193896/

資料最後に出てくるブログのリンクはこちらです。
(2020-11-21 追記) ブログを zenn.dev に引っ越したのでリンクが変わりました。
https://zenn.dev/hyiromori/articles/hatena-20201102-124230

279cfc7a1cba4d501123bd15d4e5a417?s=128

Moriya Hiroyuki

November 12, 2020
Tweet

Transcript

  1. Lighthouse CI Λ࢖ͬͯ ܧଓతʹείΞΛܭଌ͠Α͏ʂ 2020/11/12(໦) ίωώτϚϧγΣΦϯϥΠϯ

  2. ࣗݾ঺հ • ΋Γ΍ ͻΖΏ͖ • 2019/09 ίωώτೖࣾ • ϑϩϯτΤϯυΤϯδχΞ •

    ॳLT
  3. Lighthouse ࢖ͬͯ·͔͢ʁ

  4. Lighthouse: Webϖʔδͷ؂ࠪπʔϧ • ύϑΥʔϚϯε • PWA • ΞΫηγϏϦςΟ • ϕετϓϥΫςΟε

    • SEO
  5. Lighthouse Ͱܧଓతʹ είΞΛܭଌͯ͠·͔͢ʁ

  6. Webϖʔδ͸࡞ͬͯऴΘΓͰ͸ͳ͍ • ӡ༻͞Ε͍ͯΔWebϖʔδͰ͋Ε͹৭ʑͳมߋ͕ೖΔ • ܧଓతʹܭଌ͠ͳ͍ͱɺείΞ͕མͪͯ΋ؾ͚ͮͳ͍

  7. ܧଓతʹείΞΛܭଌ͍ͨ͠ ͚Ͳ໘౗ɾɾɾ

  8. ͦΜͳ࣌͸ɺ Lighthouse CI Λ ࢖͍·͠ΐ͏ʂ

  9. Lighthouse CI: CI Ͱ Lighthouse Λ࣮ߦ

  10. Lighthouse CI ͷಋೖ

  11. ઃఆϑΝΠϧΛ௥Ճͯ͠ɺ module.exports = { ci: { collect: { staticDistDir: "./",

    }, upload: { target: "temporary-public-storage", }, }, };
  12. ̍εςοϓ௥Ճ͢Δ͚ͩʂ ʢGitHub Actions ͷྫʣ name: "lighthouse" on: ["push"] jobs: lhci:

    name: Lighthouse runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v1 - name: run Lighthouse CI run: | npm install -g @lhci/cli@0.6.x lhci autorun
  13. ࣮ߦ

  14. ϩάʹ݁ՌURL͕ग़ྗ͞Εɺ

  15. ݁Ռ͕ݟΕ·ͨ͠ʂ

  16. ͔֬ʹܧଓతʹܭଌͰ͖Δ͚Ͳ ͜Ε͡Όݟͳ͍ΑͶɾɾɾɻ

  17. ͦΜͳ࣌͸ɺ Lighthouse CI Server Λ ࢖͍·͠ΐ͏ʂ

  18. Lighthouse CI Server: είΞͷ஝ੵ

  19. Lighthouse CI Server ͷಋೖ

  20. ̏෼Ͱ Heroku ʹσϓϩΠ # ϑΝΠϧͷηοτΞοϓ $ mkdir lhci-heroku && cd

    lhci-heroku && git init $ curl https://raw.githubusercontent.com/GoogleChrome/lighthouse- ci/master/docs/recipes/heroku-server/package.json > package.json $ curl https://raw.githubusercontent.com/GoogleChrome/lighthouse- ci/master/docs/recipes/heroku-server/server.js > server.js $ git add -A && git commit -m 'Initial commit' # Heroku ΁ͷσϓϩΠ $ heroku create $ heroku addons:create heroku-postgresql:hobby-dev $ git push heroku master $ heroku ps:scale web=1 $ heroku open
  21. Ξοϓϩʔυͷઃఆ

  22. ΢Οβʔυͷ࣮ߦ $ lhci wizard ? Which wizard do you want

    to run? new-project ? What is the URL of your LHCI server? https:// lighthouse-hyiromori.herokuapp.com/ ? What would you like to name the project? test ? Where is the project's code hosted? https:// github.com/hyiromori/test ? What branch is considered the repo's trunk or main branch? main
  23. ઃఆϑΝΠϧͷมߋ module.exports = { ci: { collect: { staticDistDir: "./",

    }, upload: { - target: "temporary-public-storage", + target: "lhci", + serverBaseUrl: "https://xxxxxxxxx.herokuapp.com", + token: "(΢ΟβʔυͰग़ͨϏϧυτʔΫϯ)", }, }, };
  24. ࠶࣮ߦ

  25. είΞ͕௥Ճ͞Εͨʂ

  26. είΞ͕૿͑ͨਤ

  27. είΞͷDiff

  28. ·ͱΊ

  29. Lighthouse: Webϖʔδͷ؂ࠪπʔϧ ʢ࠶ܝʣ • ύϑΥʔϚϯε • PWA • ΞΫηγϏϦςΟ •

    ϕετϓϥΫςΟε • SEO
  30. Lighthouse CI: CI Ͱ Lighthouse Λ࣮ߦ ʢ࠶ܝʣ

  31. Lighthouse CI Server: είΞͷ஝ੵ ʢ࠶ܝʣ

  32. ಋೖίετ͸͔ͳΓ௿͍ͷͰɺ ؾʹͳͬͨΒؾָʹಋೖͯ͠Έ ·͠ΐ͏ʂ

  33. ৄ͍͠ղઆΛݟ͍ͨํ΁ Lighthouse CI ͱ Heroku Ͱ΢ΣϒϖʔδͷείΞΛܧଓతʹଌఆͯ͠ਪ ҠΛݟΔ https://hyiromori.hateblo.jp/entry/2020/11/02/LHCI

  34. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ