Astro 사이트를 Vercel에 배포

Vercel을 사용하면 구성 없이 Astro 사이트를 전세계 에지 네트워크에 배포할 수 있습니다.

이 가이드에는 웹사이트 UI 또는 Vercel의 CLI를 통해 Vercel에 배포하는 방법이 포함되어 있습니다.

프로젝트 구성

Astro 프로젝트는 정적 사이트 또는 서버 측 렌더링 사이트 (SSR)로 Vercel에 배포될 수 있습니다.

정적 사이트

Astro 프로젝트는 기본적으로 정적 사이트입니다. 정적 Astro 사이트를 Vercel에 배포하기 위한 추가 구성이 필요하지 않습니다.

SSR용 어댑터

다음은 Astro 프로젝트에서 SSR을 활성화하고 Vercel에 배포하는 방법입니다.

Astro 프로젝트에서 SSR을 활성화하기 위해 다음 astro add 명령을 사용하여 Vercel 어댑터를 추가하세요. 그러면 어댑터가 설치되고 astro.config.mjs 파일에 한번에 적절히 변경됩니다.

npx astro add vercel

pnpm astro add vercel

yarn astro add vercel

어댑터를 수동으로 설치하려는 경우, 다음 두 단계를 완료하세요.

선호하는 패키지 관리자를 사용하여 프로젝트의 종속성에 @astrojs/vercel 어댑터를 설치합니다.
- npm
- pnpm
- Yarn
터미널 창
npm install @astrojs/vercel
터미널 창
pnpm add @astrojs/vercel
터미널 창
yarn add @astrojs/vercel

astro.config.mjs 프로젝트 구성 파일에 새로운 두 줄을 추가하세요.

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'server',
  adapter: vercel(),
});

배포 방법

웹사이트 UI 또는 Vercel의 CLI (명령 줄 인터페이스)를 통해 Vercel에 배포할 수 있습니다. 정적 및 SSR Astro 사이트 모두 동일한 과정을 거칩니다.

웹사이트 UI 배포

코드를 온라인 Git 저장소 (GitHub, GitLab, BitBucket)에 푸시합니다.
Vercel로 프로젝트를 가져옵니다.
Vercel은 자동으로 Astro를 감지하고 적절한 설정을 구성합니다.
애플리케이션이 배포되었습니다! (예: astro.vercel.app)

프로젝트를 가져와 배포된 후, 브랜치의 모든 후속 푸시는 배포 미리보기를 생성하고, 프로덕선 브랜치 (일반적으로 “main”)에 대한 모든 변경 사항은 프로덕션 배포에 반영됩니다.

Vercel의 Git 통합에 대해 더 알아보세요.

CLI 배포

Vercel CLI를 설치하고 vercel을 실행하여 배포합니다.
- npm
- pnpm
- Yarn
터미널 창
npm install -g vercel vercel
터미널 창
pnpm add -g vercel vercel
터미널 창
yarn global add vercel vercel
Vercel은 자동으로 Astro를 감지하고 적절한 설정을 구성합니다.
Want to override the settings? [y/N]라는 질문에 대한 답변으로 N을 선택합니다.
애플리케이션이 배포되었습니다! (예: astro.vercel.app)