Merge pull request #453 from Bamdoliro/feat/#452

feat: lighthouse ci 추가

.github/workflows/lighthouse-ci.yml

@@ -0,0 +1,85 @@
+name: Lighthouse CI
+
+on:
+    push:
+
+jobs:
+    lhci:
+        name: Lighthouse CI
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+
+            - name: Use Node.js 17.3.1 and pnpm
+              uses: actions/setup-node@v1
+              with:
+                  node-version: 17.3.1
+              run: |
+                  npm install -g pnpm
+
+            - name: Install packages with pnpm
+              run: |
+                  pnpm install
+
+            - name: Build
+              run: |
+                  pnpm run build
+
+            - name: Run Lighthouse CI
+              env:
+                  LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+              run: |
+                  npm install -g @lhci/cli
+                  lhci autorun || echo "Fail to Run Lighthouse CI!"
+
+            - name: Format lighthouse score
+              id: format_lighthouse_score
+              uses: actions/github-script@v3
+              with:
+                  github-token: ${{ secrets.GITHUB_TOKEN }}
+                  script: |
+                      const fs = require('fs');
+                      const results = JSON.parse(fs.readFileSync("/{Github Actions runner directory}/lhci_reports/manifest.json"));
+                      let comments = "";
+
+                      results.forEach((result) => {
+                        const { summary, jsonPath } = result;
+                        const { audits } = details;
+
+                        const details = JSON.parse(fs.readFileSync(jsonPath));
+                        const formatResult = (res) => Math.round(res * 100);
+
+                        Object.keys(summary).forEach(
+                          (key) => (summary[key] = formatResult(summary[key]))
+                        );
+
+                        const score = (res) => (res >= 90 ? "🟢" : res >= 50 ? "🟠" : "🔴");
+
+                        const comment = [
+                          `⚡️ Lighthouse report!`,
+                          `| Category | Score |`,
+                          `| --- | --- |`,
+                          `| ${score(summary.performance)} Performance | ${summary.performance} |`,
+                          { ... }
+                        ].join("\n");
+
+                        const detail = [
+                          `| Category | Score |`,
+                          `| --- | --- |`,
+                          `| ${score(
+                            audits["first-contentful-paint"].score * 100
+                          )} First Contentful Paint | ${
+                            audits["first-contentful-paint"].displayValue
+                          } |`,
+                          { ... }
+                        ].join("\n");
+                        comments += comment + "\n" + detail + "\n";
+                      });
+                      core.setOutput('comments', comments)
+
+            - name: comment PR
+              uses: unsplash/comment-on-pr@v1.3.0
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              with: msg

.lighthouserc.js

@@ -0,0 +1,29 @@
+module.exports = {
+    ci: {
+        collect: {
+            url: ['http://localhost:3000'],
+            collect: {
+                numberOfRuns: 5,
+            },
+        },
+        assert: {
+            assertions: {
+                // performance 카테고리 점수가 90점 미만이면 warning
+                'categories:performance': ['warn', { minScore: 0.9 }],
+                // accessibility 가 100점 미만이면 error
+                'categories:accessibility': ['error', { minScore: 1 }],
+                // seo 가 100점 미만이면 error
+                'categories:seo': ['error', { minScore: 1 }],
+            },
+        },
+        upload: {
+            startServerCommand: 'npm run start',
+            target: 'temporary-public-storage',
+        },
+    },
+    upload: {
+        target: 'filesystem',
+        outputDir: './lhci_reports',
+        reportFilenamePattern: '%%PATHNAME%%-%%DATETIME%%-report.%%EXTENSION%%',
+    },
+};

package.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.8.0",
     "@commitlint/config-conventional": "^17.8.0",
+    "@lhci/cli": "^0.12.0",
     "@maru/eslint": "workspace:*",
     "@turbo/gen": "^1.9.7",
     "eslint": "^7.32.0",