Vercel тохиргоо ба domain

Апп deploy болсны дараа .vercel.app дагавартай URL авдаг. Гэхдээ жинхэнэ апп нь өөрийн domain-тэй байх хэрэгтэй — ulaanbaatar.app гэх мэт. Мөн production, preview, development орчин тус бүрд өөр тохиргоо хэрэг болдог. Энэ хичээлд Vercel-н тохиргоог бүрэн эзэмшинэ.

Custom domain холбох

Domain худалдаж авсны дараа Vercel-д холбоно:

1. Vercel dashboard → тухайн project → Settings → Domains
2. Domain нэрээ бичнэ: ulaanbaatar.app
3. Vercel DNS record харуулна — domain provider (Namecheap, GoDaddy гэх мэт)-д тохируулна:

Төрөл    Нэр    Утга
A        @      76.76.19.61
CNAME    www    cname.vercel-dns.com

DNS тархахад 24 цаг хүртэл болдог боловч ихэвчлэн 30 минутын дотор ажилладаг. Vercel HTTPS certificate автоматаар үүсгэдэг тул тусдаа SSL тохируулах шаардлагагүй.

vercel.json дэлгэрэнгүй тохиргоо

vercel.json файл нь redirect, header, environment-н нарийн тохиргоог зохицуулдаг:

{
  "framework": "nextjs",
  "regions": ["sin1"],
  "redirects": [
    {
      "source": "/home",
      "destination": "/",
      "permanent": true
    },
    {
      "source": "/courses/js",
      "destination": "/courses/javascript",
      "permanent": true
    }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ]
}

permanent: true нь 308 redirect буцаадаг — хуучин URL-г шинэ URL руу байнга чиглүүлэх тохиолдолд хэрэглэнэ. permanent: false нь 307 буцаадаг — түр зуурын чиглүүлэлтэд зориулагдсан.

Орчин тус бүрийн environment variable

Production, Preview, Development орчин тус бүрт өөр env variable тохируулж болно:

# Production — жинхэнэ Supabase project
NEXT_PUBLIC_SUPABASE_URL=https://prod-xxxx.supabase.co

# Preview — тест Supabase project
NEXT_PUBLIC_SUPABASE_URL=https://test-xxxx.supabase.co

# Development — localhost-д .env.local хэрэглэнэ
NEXT_PUBLIC_SUPABASE_URL=https://local-xxxx.supabase.co

Vercel dashboard → Settings → Environment Variables → тухайн variable-н баруун талд Edit → Environment сонгоно:

| Орчин | Хэрэглэгдэх газар | | ----------- | ------------------------- | | Production | main branch deploy | | Preview | Feature branch deploy | | Development | vercel dev ажиллуулахад |

next.config.ts дэлгэрэнгүй тохиргоо

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Гадны зургийн domain зөвшөөрөх
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**.supabase.co",
        pathname: "/storage/v1/object/public/**",
      },
    ],
  },

  // Хуучин URL-г шинэ рүү чиглүүлэх
  async redirects() {
    return [
      {
        source: "/learn/:slug",
        destination: "/courses/:slug",
        permanent: true,
      },
    ];
  },

  // Security header
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          { key: "X-Frame-Options", value: "DENY" },
          { key: "X-Content-Type-Options", value: "nosniff" },
        ],
      },
    ];
  },
};

export default nextConfig;

Vercel CLI ашиглах

Vercel CLI нь terminal-аас шууд deploy хийх болон env variable удирдах боломж олгодог:

# Vercel CLI суулгах
npm install -g vercel

# Нэвтрэх
vercel login

# Local орчинд production env variable-тэй ажиллуулах
vercel env pull .env.local

# Гараар deploy хийх
vercel --prod

vercel env pull нь Vercel dashboard дахь environment variable-уудыг .env.local-д татаж авдаг — хамтран ажиллагсадтай env variable хуваалцахад маш хэрэгтэй.

Дараагийн хичээлд:

Vercel Analytics болон Speed Insights ашиглан аппын хэрэглэгчийн тоо, хуудасны гүйцэтгэлийг хэрхэн хянах, сайжруулахыг сурна.