0Pricing
React Academy · 강의

Vercel에 배포하기: 구성 없이 배포와 미리 보기 URL

GitHub 저장소를 Vercel에 연결하고 환경 변수를 구성하며 미리 보기 배포를 사용합니다.

Vercel에 배포하기: 구성 없이 배포와 미리 보기 URL은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Vercel을 사용하는 이유

Vercel은 Next.js 팀이 만든 플랫폼입니다. 저장소를 GitHub에 연결하면 Vercel이 프레임워크를 자동으로 감지하고, 빌드하고, 푸시할 때마다 배포하는 무설정 배포를 제공합니다.

저장소 연결

Vercel 대시보드에서 GitHub/GitLab/Bitbucket 저장소를 가져오세요. Vercel은 프레임워크(Next.js, Vite, CRA)를 감지하고 빌드 설정을 자동으로 구성합니다.

프로젝트 설정

Vercel은 프레임워크, 빌드 명령(npm run build), 출력 디렉터리(.next, dist), 설치 명령(npm install)을 자동으로 감지합니다. 필요한 경우 프로젝트 설정에서 이를 재정의하세요.

환경 변수

Vercel 대시보드의 프로젝트 설정 → 환경 변수에서 환경 변수를 추가하세요. 프로덕션, 미리 보기, 개발 환경에 서로 다른 값을 설정하세요.

# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com  (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com  (Preview)

# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

미리 보기 배포

모든 Git 브랜치 푸시와 풀 리퀘스트에는 고유한 미리 보기 URL이 제공됩니다(예: myapp-git-feature-xyz.vercel.app). 병합 전에 검토할 수 있도록 공유하세요. 수동 스테이징 환경이 필요하지 않습니다.

사용자 지정 도메인

Vercel 대시보드에서 사용자 지정 도메인을 추가하세요. DNS(A 레코드 또는 CNAME)를 Vercel의 IP에 연결하면 Vercel이 SSL 인증서 발급을 자동으로 처리합니다.

vercel.json 구성

리디렉션, 헤더, 재작성, 리전 선택 등 배포 동작을 세밀하게 조정하세요.

// vercel.json
{
  "redirects": [
    { "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ],
  "regions": ["iad1"] // deploy edge functions to US East
}

Vercel CLI

Vercel CLI를 사용하여 터미널에서 배포하고, 환경 변수를 로컬로 가져오며, 프로젝트를 관리하세요.

# Install:
npm install -g vercel

# Link project and deploy:
vercel

# Pull env variables for local dev:
vercel env pull .env.local

# Deploy to production:
vercel --prod

서버리스 함수

api/(Pages Router) 또는 app/api/*/route.ts(App Router)의 파일은 Vercel의 엣지 또는 Node.js 런타임에서 서버리스 함수로 자동 배포됩니다.

배포 훅

외부 서비스에서 배포를 트리거할 배포 훅(웹훅 URL)을 만드세요. 사이트를 다시 배포해야 하는 CMS 콘텐츠 변경에 유용합니다.

# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy

# In Sanity Studio:
// Call this URL on document publish

모노레포 배포

Nx 또는 Turborepo 모노레포에서는 Vercel의 루트 디렉터리를 특정 앱 폴더로 설정하고, 모노레포 작업 실행기를 사용하도록 빌드 명령을 구성하세요.

# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.next

빠른 확인

Vercel 미리 보기 배포란 무엇입니까?

복습

Git 저장소를 Vercel에 연결하여 무설정으로 배포하세요. 모든 브랜치에 미리 보기 URL이 제공됩니다. 대시보드에서 환경별 환경 변수를 관리하고, 리디렉션과 헤더에는 vercel.json을 사용하며, 터미널 기반 배포와 환경 변수 가져오기에는 Vercel CLI를 사용하세요.

자주 묻는 질문

“Vercel에 배포하기: 구성 없이 배포와 미리 보기 URL” 강의는 무료인가요?

네 — “Vercel에 배포하기: 구성 없이 배포와 미리 보기 URL” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Vercel에 배포하기: 구성 없이 배포와 미리 보기 URL”에서 뭘 배우나요?

GitHub 저장소를 Vercel에 연결하고 환경 변수를 구성하며 미리 보기 배포를 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“Vercel에 배포하기: 구성 없이 배포와 미리 보기 URL” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Vercel에 배포하기: 구성 없이 배포와 미리 보기 URL
  2. AWS S3와 CloudFront에서 React SPA 호스팅하기
  3. React/Next.js 앱 도커화하기
  4. React용 GitHub Actions CI/CD
← React Academy(으)로 돌아가기