@astrojs/web-vitals

소개

이 Astro 통합을 사용하면 실제 웹사이트의 성능을 추적하고 데이터를 Astro DB에 저장할 수 있습니다. 이 데이터는 StudioCMS 대시보드에서 실제 웹사이트의 시간에 따른 성능 지표를 보여주는 데 사용됩니다.

설치

Astro를 통한 설치

1. 다음 명령을 사용하여 패키지를 설치하고 Astro 구성에 추가합니다.

   npm

   npx astro add @astrojs/web-vitals

   pnpm

   pnpm astro add @astrojs/web-vitals

   yarn

   yarn astro add @astrojs/web-vitals

2. 새 구성을 원격 데이터베이스에 푸시합니다.

   npm

   npx astro db push

   pnpm

   pnpm astro db push

   yarn

   yarn astro db push

직접 설치하기

1. 다음 명령을 사용하여 패키지를 설치합니다.

   npm

   npm i @astrojs/web-vitals

   pnpm

   pnpm add @astrojs/web-vitals

   yarn

   yarn add @astrojs/web-vitals

2. Astro 구성 파일에 @astrojs/web-vitals를 추가합니다.

   astro.config.mjs

   import node from '@astrojs/node';
   import studioCMS from 'studiocms';
   import db from '@astrojs/db';
   import webVitals from '@astrojs/web-vitals';
   Error ts(2307)  ― Cannot find module '@astrojs/web-vitals' or its corresponding type declarations.
   import { defineConfig } from 'astro/config';
   
   export default defineConfig({
      site: 'https://demo.studiocms.dev/',
      output: 'server',
      adapter: node({ mode: "standalone" }),
      integrations: [
          db(), // 필수
          webVitals(),
          studioCMS(),
      ],
   });

   npm

   npm i @astrojs/web-vitals

   pnpm

   pnpm add @astrojs/web-vitals

   yarn

   yarn add @astrojs/web-vitals

3. 새 구성을 원격 데이터베이스에 푸시합니다.

   npm

   npx astro db push

   pnpm

   pnpm astro db push

   yarn

   yarn astro db push