@astrojs/ vercel
Astro는 이 어댑터를 사용하여 요청 시 렌더링되는 라우트를 Vercel에 배포할 수 있게 해줍니다.
Astro를 정적 사이트 빌더로 사용하는 경우 추가 Vercel 서비스 (예: Vercel Web Analytics, Vercel Image Optimization)를 사용하는 경우에만 이 어댑터가 필요합니다. 그렇지 않으면 static
사이트를 배포하는 데 어댑터가 필요하지 않습니다.
Vercel 배포 가이드에서 Astro 사이트를 배포하는 방법을 알아보세요.
왜 Astro Vercel인가?
섹션 제목: 왜 Astro Vercel인가?Vercel은 GitHub 저장소에 직접 연결하여 사이트를 호스팅할 수 있게 해주는 배포 플랫폼입니다. 이 어댑터는 Vercel을 통해 배포할 프로젝트를 준비하기 위해 Astro 빌드 프로세스를 향상시킵니다.
Astro는 공식 통합을 설정을 자동화하기 위한 astro add
명령을 포함하고 있습니다. 원한다면, 수동으로 통합 설치할 수도 있습니다.
Astro 프로젝트의 SSR을 활성화하기 위해 다음 astro add
명령을 사용하여 Vercel 어댑터를 추가하세요. 이를 통해 @astrojs/vercel
이 설치되고 astro.config.mjs
파일이 한번에 적절히 변경됩니다.
수동 설치
섹션 제목: 수동 설치먼저, 선호하는 패키지 관리자를 사용하여 프로젝트의 종속성에 @astrojs/vercel
어댑터를 추가합니다.
그런 다음, astro.config.*
파일에 어댑터와 원하는 요청 시 렌더링 모드를 추가하세요.
Vercel에 프로젝트를 배포하는 방법에 대해 자세히 알아보세요.
CLI (vercel deploy
)를 사용하여 배포하거나, Vercel 대시보드에서 새 레포지토리를 연결하여 배포할 수 있습니다. 또는 로컬에서 프로덕션 빌드를 생성할 수 있습니다.
이 어댑터를 구성하려면, astro.config.mjs
파일의 vercel()
함수 호출에 객체를 전달하세요.
webAnalytics
섹션 제목: webAnalytics타입: VercelWebAnalyticsConfig
사용 가능한 모드: Serverless, Static
@astrojs/vercel@3.8.0
webAnalytics: { enabled: true }
를 설정하여 Vercel 웹 분석을 활성화할 수 있습니다. 이렇게 하면 Vercel의 추적 스크립트가 모든 페이지에 삽입됩니다.
imagesConfig
섹션 제목: imagesConfig타입: VercelImageConfig
사용 가능한 모드: Serverless, Static
@astrojs/vercel@3.3.0
Vercel의 이미지 최적화 API에 대한 구성 옵션입니다. 지원되는 매개변수의 전체 목록은 대한 구성 옵션입니다. 지원되는 모든 매개변수에 대해서는 Vercel의 이미지 구성 문서를 참조하세요.
domains
및 remotePatterns
속성은 Astro의 해당 image
설정을 통해 자동으로 채워집니다.
imageService
섹션 제목: imageService타입: boolean
사용 가능한 모드: Serverless, Static
@astrojs/vercel@3.3.0
활성화되면 Vercel 이미지 최적화 API에 의해 구동되는 이미지 서비스가 자동으로 구성되고 프로덕션에서 사용됩니다. 개발 모드에서는 devImageService
에 지정된 이미지 서비스가 대신 사용됩니다.
devImageService
섹션 제목: devImageService타입: 'sharp' | string
사용 가능한 모드: Serverless, Static
@astrojs/vercel@3.8.0
기본값: sharp
imageService가 활성화된 경우 개발모드에서 사용할 이미지 서비스를 구성할 수 있습니다. 이는 개발 기기에 Sharp의 종속성을 설치할 수는 없는 경우 Squoosh와 같은 다른 이미지 서비스를 사용하여 개발 환경에서 이미지를 미리 볼 수 있으므로 유용할 수 있습니다. 빌드는 영향을 받지 않고 항상 Vercel의 이미지 최적화를 사용합니다.
Astro의 내장 서비스 대신 사용자 정의 이미지 서비스를 사용하기 위해 임의의 값으로 설정할 수도 있습니다.
isr
섹션 제목: isr타입: boolean | VercelISRConfig
사용 가능한 모드: Serverless
@astrojs/vercel@7.2.0
기본값: false
첫 번째 요청 후 사전 렌더링된 페이지와 동일한 방식으로 주문형 렌더링된 페이지를 캐시하는 ISR (증분 정적 재생성) 함수로 프로젝트를 배포할 수 있습니다.
이 기능을 활성화하려면 astro.config.mjs
파일의 Vercel 어댑터 구성에서 isr
을 true로 설정하세요.
ISR 함수 요청에는 정적 모드의 요청과 유사한 검색 매개변수가 포함되지 않습니다.
ISR 캐시 무효화
섹션 제목: ISR 캐시 무효화기본적으로 ISR 함수는 배포 기간 동안 캐시됩니다. 만료 시간을 설정하거나 캐싱에서 특정 경로를 완전히 제외하여 캐싱을 추가로 제어할 수 있습니다.
시간 기반 무효화
섹션 제목: 시간 기반 무효화expiration
값을 초 단위로 구성하여 경로를 캐시하는 시간을 변경할 수 있습니다.
캐싱에서 경로 제외
섹션 제목: 캐싱에서 경로 제외Vercel의 초안 모드 또는 주문형 증분형 정적 재생성 (ISR)을 구현하려면 bypass 토큰을 생성하고 이를 캐싱에서 제외할 경로와 함께 isr
구성에 제공할 수 있습니다.
includeFiles
섹션 제목: includeFiles타입: string[]
사용 가능한 모드: Serverless
파일을 함수와 번들링하기 위해 이 속성을 사용합니다. 이는 누락된 파일을 발견했을 때 유용합니다.
excludeFiles
섹션 제목: excludeFiles타입: string[]
사용 가능한 모드: Serverless
이 속성을 사용하면 포함된 파일을 번들링 프로세스에서 제외할 수 있습니다.
maxDuration
섹션 제목: maxDuration타입: number
사용 가능한 모드: Serverless
이 속성을 사용하여 서버리스 함수가 타임아웃되기 전에 실행될 수 있는 최대 시간(초)을 연장하거나 제한할 수 있습니다. 계정 플랜의 기본 및 최대 한도는 Vercel 문서를 참조하세요.
skewProtection
섹션 제목: skewProtection타입: boolean
사용 가능한 모드: Serverless
@astrojs/vercel@7.6.0
이 속성을 사용하여 Vercel Skew protection (Vercel Pro 및 Enterprise 계정에서 사용 가능)을 활성화합니다.
Vercel Edge Functions에서 Astro 미들웨어 실행
섹션 제목: Vercel Edge Functions에서 Astro 미들웨어 실행@astrojs/vercel
어댑터는 코드 베이스의 Astro 미들웨어에서 에지 함수를 생성할 수 있습니다. edgeMiddleware
가 활성화되면 에지 함수는 정적 자산, 사전 렌더링된 페이지, 주문형 렌더링된 페이지를 포함한 모든 요청에 대해 미들웨어 코드를 실행합니다.
주문형 렌더링된 페이지의 경우 context.locals
객체는 JSON을 사용하여 직렬화되고 렌더링을 수행하는 서버리스 함수의 헤더로 전송됩니다. 보안 조치로서 서버리스 함수는 생성된 에지 함수에서 발생하지 않는 한 403 Forbidden
응답이 포함된 요청 처리를 거부합니다.
이는 선택적 기능입니다. 활성화하려면 edgeMiddleware
를 true
로 설정하세요.
에지 미들웨어는 ctx.locals.vercel.edge
로 Vercel의 RequestContext
에 액세스할 수 있습니다. TypeScript를 사용하는 경우 EdgeLocals
를 사용하기 위해 src/env.d.ts
파일을 업데이트하여 적절한 타입을 얻을 수 있습니다.
Node.js 버전 지원
섹션 제목: Node.js 버전 지원@astrojs/vercel
어댑터는 Astro 프로젝트를 Vercel에 배포하기 위한 특정 Node.js 버전을 지원합니다. Vercel에서 지원하는 Node.js 버전을 보려면 프로젝트의 Settings 탭을 클릭하고 “Node.js Version” 섹션까지 아래로 스크롤하세요.
Vercel 문서를 참조하여 자세히 알아보십시오.