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

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

Lighthouse ࢖ͬͯ·͔͢ʁ 

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

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

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

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

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

Lighthouse CI: CI Ͱ Lighthouse Λ࣮ߦ 

Lighthouse CI ͷಋೖ 

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

̍εςοϓ௥Ճ͢Δ͚ͩʂ ʢ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 

࣮ߦ 

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

݁Ռ͕ݟΕ·ͨ͠ʂ 

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

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

Lighthouse CI Server: είΞͷ஝ੵ 

Lighthouse CI Server ͷಋೖ 

̏෼Ͱ 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 

Ξοϓϩʔυͷઃఆ 

΢Οβʔυͷ࣮ߦ $ 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 

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

࠶࣮ߦ 

είΞ͕௥Ճ͞Εͨʂ 

είΞ͕૿͑ͨਤ 

είΞͷDiff 

·ͱΊ 

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

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

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

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

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

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