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. ઃఆϑΝΠϧΛ௥Ճͯ͠ɺ module.exports = { ci: { collect: { staticDistDir: "./",

    }, upload: { target: "temporary-public-storage", }, }, };
  2. ̍εςοϓ௥Ճ͢Δ͚ͩʂ ʢ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/[email protected] lhci autorun
  3. ̏෼Ͱ 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
  4. ΢Οβʔυͷ࣮ߦ $ 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
  5. ઃఆϑΝΠϧͷมߋ module.exports = { ci: { collect: { staticDistDir: "./",

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