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

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

Moriya Hiroyuki

November 12, 2020
Tweet

More Decks by Moriya Hiroyuki

Other Decks in Programming

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/[email protected]
    - uses: actions/[email protected]
    - name: run Lighthouse CI
    run: |
    npm install -g @lhci/[email protected]
    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