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

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

선호하는 패키지 관리자를 사용하여 프로젝트의 종속성에 @astrojs/vercel 어댑터를 설치합니다. npm을 사용하거나 확실하지 않은 경우, 터미널에서 다음을 실행합니다.
Terminal window
```
  npm install @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을 실행하여 배포합니다.
Terminal window
```
npm install -g vercel
vercel
```
Vercel은 자동으로 Astro를 감지하고 적절한 설정을 구성합니다.
Want to override the settings? [y/N]라는 질문에 대한 답변으로 N을 선택합니다.
애플리케이션이 배포되었습니다! (예: astro.vercel.app)

vercel.json을 이용한 프로젝트 구성

vercel.json을 사용하여 Vercel의 기본 동작을 재정의하고 추가 설정을 구성할 수 있습니다. 예를 들어, 배포의 HTTP 응답에 헤더를 첨부하려는 경우가 있을 수 있습니다.

Vercel의 프로젝트 설정에 대해 더 알아보세요.

Astro 2.0으로 업그레이드

Astro v2.0은 Node 14 버전에 대한 지원을 중단하였으므로, 프로젝트가 Node 18.14.1 이상을 사용하고 있는지 확인하세요. 프로젝트의 Settings 메뉴의 General 페이지에서 빌드 단계 및 서버리스 함수에서 사용되는 Node.js 버전을 정의할 수 있습니다.