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

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ