Deploy to Vercel

Vercel Basics and Your First Deploy

25 分

Vercel hosts frontends and serverless functions with a global edge network. It is the home of Next.js and supports most frontend frameworks (Vite/React, Astro, SvelteKit, Nuxt) and static sites. It shines for marketing sites, documentation, dashboards and Next.js apps.

Deploying from Git

  1. Push your project to GitHub, GitLab or Bitbucket.
  2. In Vercel, Add New → Project and import the repository.
  3. Vercel detects the framework and fills in the build command and output directory (for example next build, or vite build with output dist).
  4. Click Deploy. You get a *.vercel.app URL with HTTPS.

Every push to the production branch (usually main) deploys to production. Every other branch or pull request gets its own preview deployment URL.

The CLI

npm i -g vercel
vercel login
vercel            # deploy a preview from the current folder
vercel --prod     # deploy to production
vercel env pull   # download development environment variables into .env.local

What runs where

Part Runs as
Static files and pre-rendered pages cached on the edge network
Server-rendered pages, API routes serverless functions (or edge functions)
Images via the framework's image component optimised on demand

Functions start on demand and scale automatically, but each invocation has a maximum duration and memory. Long-running servers, WebSockets and background workers belong on a platform like Render, Railway or Fly.io; a common setup is a Vercel frontend calling an API hosted elsewhere.

Exercise

Deploy a Vite or Next.js project to Vercel, open a pull request with a visible change and share its preview URL; then merge and confirm production updates.

Check yourself

  • What gets a preview deployment?
  • Which workloads are a poor fit for serverless functions?
  • What does vercel env pull do?

進捗はこのブラウザーにのみ保存されます。

レビューに提出（10 ポイント）