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(໦) ίωώτϚϧγΣΦϯϥΠϯ
   

   View Slide

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

   View Slide

3. Lighthouse ࢖ͬͯ·͔͢ʁ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Lighthouse CI: CI Ͱ Lighthouse Λ࣮ߦ
   

   View Slide

10. Lighthouse CI ͷಋೖ
    

    View Slide

11. ઃఆϑΝΠϧΛ௥Ճͯ͠ɺ
    module.exports = {
    ci: {
    collect: {
    staticDistDir: "./",
    },
    upload: {
    target: "temporary-public-storage",
    },
    },
    };
    

    View Slide

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
    

    View Slide

13. ࣮ߦ
    

    View Slide

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

    View Slide

15. ݁Ռ͕ݟΕ·ͨ͠ʂ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. Lighthouse CI Server ͷಋೖ
    

    View Slide

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
    

    View Slide

21. Ξοϓϩʔυͷઃఆ
    

    View Slide

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
    

    View Slide

23. ઃఆϑΝΠϧͷมߋ
    module.exports = {
    ci: {
    collect: {
    staticDistDir: "./",
    },
    upload: {
    - target: "temporary-public-storage",
    + target: "lhci",
    + serverBaseUrl: "https://xxxxxxxxx.herokuapp.com",
    + token: "(΢ΟβʔυͰग़ͨϏϧυτʔΫϯ)",
    },
    },
    };
    

    View Slide

24. ࠶࣮ߦ
    

    View Slide

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

    View Slide

26. είΞ͕૿͑ͨਤ
    

    View Slide

27. είΞͷDiff
    

    View Slide

28. ·ͱΊ
    

    View Slide

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

    View Slide

30. Lighthouse CI: CI Ͱ Lighthouse Λ࣮ߦ
    ʢ࠶ܝʣ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide