WebX

ভার্সেল (Vercel) চিটশিট

ভার্সেল (Vercel) হলো একটি ডেভেলপার-কেন্দ্রিক প্ল্যাটফর্ম যা ওয়েব অ্যাপ্লিকেশন তৈরি, ডিপ্লয়, এবং পরিচালনার জন্য ব্যবহৃত হয়। এটি স্বয়ংক্রিয় স্কেলিং, সার্ভারলেস ফাংশন, এবং গিট-ভিত্তিক ওয়ার্কফ্লো সরবরাহ করে। এই চিটশিটে Vercel-এর সব মৌলিক থেকে উন্নত ধারণা এবং কমান্ড বিস্তারিতভাবে কভার করা হয়েছে।

১. ভার্সেল পরিচিতি

১.১ মৌলিক ধারণা

  • প্রজেক্ট: একটি অ্যাপ্লিকেশন যা Vercel-এ ডিপ্লয় করা হয়।
  • ডিপ্লয়মেন্ট: প্রজেক্টের একটি বিল্ড এবং লাইভ সংস্করণ।
  • প্রিভিউ URL: প্রতিটি ডিপ্লয়মেন্টের জন্য স্বয়ংক্রিয়ভাবে তৈরি URL।
  • সার্ভারলেস ফাংশন: কোড যা সার্ভার ছাড়াই রান করে।
  • এজ নেটওয়ার্ক: বিশ্বব্যাপী CDN-এর মাধ্যমে দ্রুত লোড।

১.২ ইনস্টলেশন (CLI)

  • npm দিয়ে:
    npm install -g vercel
  • Yarn দিয়ে:
    yarn global add vercel
  • চেক করুন:
    vercel --version

২. ভার্সেলে প্রজেক্ট সেটআপ

২.১ নতুন প্রজেক্ট তৈরি

  • CLI দিয়ে:
    vercel
    • প্রশ্নের উত্তর দিন (নাম, ফ্রেমওয়ার্ক, ইত্যাদি)।
  • গিট দিয়ে:
    1. GitHub/GitLab/Bitbucket-এ রিপোজিটরি তৈরি করুন।
    2. Vercel ড্যাশবোর্ডে "New Project" ক্লিক করুন।
    3. রিপোজিটরি ইমপোর্ট করুন।

২.২ প্রজেক্ট স্ট্রাকচার

  • স্ট্যাটিক সাইট:
    myproject/
    ├── index.html
    ├── package.json
  • Next.js:
    myproject/
    ├── pages/
    │   ├── index.js
    ├── package.json

৩. ডিপ্লয়মেন্ট

৩.১ গিট-ভিত্তিক ডিপ্লয়

  • প্রক্রিয়া:

    1. গিট রিপোজিটরি Vercel-এ লিঙ্ক করুন।
    2. কোড পুশ করুন:
      git add .
      git commit -m "প্রথম ডিপ্লয়"
      git push origin main
    3. Vercel স্বয়ংক্রিয়ভাবে বিল্ড এবং ডিপ্লয় করবে।
  • প্রিভিউ URL: প্রতিটি ব্রাঞ্চের জন্য (যেমন myproject-git-feature-branch.vercel.app)।

  • প্রোডাকশন URL: main ব্রাঞ্চের জন্য।


৩.২ CLI দিয়ে ডিপ্লয়

কমান্ডবর্ণনাউদাহরণ
vercelডিপ্লয় শুরু।vercel
vercel --prodপ্রোডাকশনে ডিপ্লয়।vercel --prod
vercel buildলোকালি বিল্ড।vercel build
vercel deploy --prebuiltপ্রি-বিল্ট ডিপ্লয়।vercel deploy --prebuilt

উদাহরণ:

vercel login
cd myproject
vercel

৩.৩ ডিপ্লয় হুক

  • সেটআপ:
    1. ড্যাশবোর্ডে "Settings" > "Deploy Hooks"।
    2. হুক তৈরি করুন (নাম এবং ব্রাঞ্চ দিন)।
    3. URL কপি করুন (যেমন https://api.vercel.com/v1/integrations/deploy/xxx)।
  • ট্রিগার:
    curl -X POST "https://api.vercel.com/v1/integrations/deploy/xxx"

৪. কনফিগারেশন

৪.১ vercel.json

  • উদাহরণ:
{
  "version": 2,
  "builds": [
    { "src": "index.html", "use": "@vercel/static" },
    { "src": "api/*.js", "use": "@vercel/node" }
  ],
  "routes": [
    { "src": "/about", "dest": "/about.html" },
    { "src": "/api/(.*)", "dest": "/api/$1" }
  ]
}
  • ফিল্ড:
    • builds: বিল্ড প্রক্রিয়া নির্দিষ্ট করে।
    • routes: URL রাউটিং নিয়ন্ত্রণ।

৪.২ এনভায়রনমেন্ট ভ্যারিয়েবল

  • লোকাল: .env ফাইল:
    API_KEY=xyz123
  • Vercel-এ সেট:
    1. ড্যাশবোর্ডে "Settings" > "Environment Variables"।
    2. নাম এবং মান যোগ করুন।
  • CLI দিয়ে:
    vercel env add API_KEY

৫. ডোমেইন ম্যানেজমেন্ট

৫.১ কাস্টম ডোমেইন

  • সেটআপ:
    1. ড্যাশবোর্ডে "Domains"।
    2. ডোমেইন যোগ করুন (যেমন example.com)।
    3. DNS সেটিংস আপডেট করুন:
      • A রেকর্ড: 76.76.21.21
      • CNAME: cname.vercel-dns.com
  • CLI দিয়ে:
    vercel domains add example.com

৫.২ সাবডোমেইন এবং ওয়াইল্ডকার্ড

  • vercel.json-এ:
{
  "wildcard": "*.example.com",
  "routes": [
    { "src": "/(.*)", "dest": "/index.html" }
  ]
}

৬. সার্ভারলেস ফাংশন

৬.১ ফাংশন তৈরি

  • উদাহরণ: api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: "হ্যালো, Vercel!" });
}
  • ডিপ্লয়:
    vercel
  • URL: https://myproject.vercel.app/api/hello

৬.২ ফাংশন কনফিগারেশন

  • vercel.json-এ:
{
  "functions": {
    "api/*.js": {
      "memory": 1024,
      "maxDuration": 10
    }
  }
}

৭. এজ মিডলওয়্যার (Next.js)

৭.১ মিডলওয়্যার তৈরি

  • middleware.js:
export function middleware(request) {
  if (request.nextUrl.pathname === "/private") {
    return Response.redirect(new URL("/", request.url));
  }
}
  • ডিপ্লয়:
    vercel

৮. মনোরিপো (Monorepo)

৮.১ সেটআপ

  • প্রজেক্ট স্ট্রাকচার:
monorepo/
├── apps/
│   ├── web/
│   │   ├── package.json
│   ├── api/
│   │   ├── package.json
├── package.json
  • vercel.json:
{
  "builds": [
    { "src": "apps/web/**/*", "use": "@vercel/next" },
    { "src": "apps/api/**/*", "use": "@vercel/node" }
  ]
}
  • CLI দিয়ে:
    vercel --scope monorepo

৯. CLI কমান্ড

৯.১ প্রজেক্ট ম্যানেজমেন্ট

কমান্ডবর্ণনাউদাহরণ
vercel lsডিপ্লয়মেন্ট তালিকা।vercel ls
vercel rmপ্রজেক্ট মুছে ফেলা।vercel rm myproject
vercel linkলোকাল প্রজেক্ট লিঙ্ক।vercel link

৯.২ লগ এবং ডিবাগ

কমান্ডবর্ণনাউদাহরণ
vercel logsডিপ্লয়মেন্ট লগ।vercel logs myproject.vercel.app
vercel inspectডিপ্লয়মেন্ট বিস্তারিত।vercel inspect <url>

১০. সিকিউরিটি

১০.১ ডিপ্লয়মেন্ট প্রোটেকশন

  • সেটআপ:
    1. ড্যাশবোর্ডে "Settings" > "Deployment Protection"।
    2. "Vercel Authentication" বা "Password Protection" চালু করুন।

১০.২ ফায়ারওয়াল

  • কনফিগারেশন: "Settings" > "Firewall" (Enterprise-এর জন্য)।
  • IP ব্লকিং: কাস্টম রুল যোগ করুন।

১১. মনিটরিং এবং অ্যানালিটিক্স

১১.১ Vercel Analytics

  • চালু করুন: ড্যাশবোর্ডে "Analytics" ট্যাব থেকে।
  • Next.js-এ:
    import { Analytics } from '@vercel/analytics/react';
     
    function MyApp({ Component, pageProps }) {
      return (
        <>
          <Component {...pageProps} />
          <Analytics />
        </>
      );
    }

১১.২ লগ ড্রেন

  • সেটআপ: "Settings" > "Log Drains" > তৃতীয় পক্ষের সার্ভিস যোগ করুন (যেমন Datadog)।

১২. উদাহরণ: একটি সম্পূর্ণ প্রজেক্ট

১২.১ Next.js প্রজেক্ট

  • সেটআপ:
    npx create-next-app@latest myapp
    cd myapp
  • ডিপ্লয়:
    vercel
  • কাস্টম ডোমেইন:
    1. ড্যাশবোর্ডে example.com যোগ করুন।
    2. DNS সেট করুন।

১২.২ API এবং স্ট্যাটিক

  • স্ট্রাকচার:
myproject/
├── api/
│   ├── hello.js
├── public/
│   ├── index.html
├── package.json
├── vercel.json
  • vercel.json:
{
  "builds": [
    { "src": "public/**", "use": "@vercel/static" },
    { "src": "api/*.js", "use": "@vercel/node" }
  ]
}
  • ডিপ্লয়:
    vercel

১৩. টিপস এবং সেরা অভ্যাস

  • গিট ইন্টিগ্রেশন: সবসময় গিট ব্যবহার করুন স্বয়ংক্রিয় ডিপ্লয়ের জন্য।
  • এনভায়রনমেন্ট: প্রিভিউ এবং প্রোডাকশনের জন্য আলাদা ভ্যারিয়েবল সেট করুন।
  • ক্যাশিং: বিল্ড ক্যাশ ব্যবহার করে ডিপ্লয় দ্রুত করুন।
  • অ্যানালিটিক্স: UX উন্নত করতে Vercel Analytics চালু করুন।

On this page

১. ভার্সেল পরিচিতি
১.১ মৌলিক ধারণা
১.২ ইনস্টলেশন (CLI)
২. ভার্সেলে প্রজেক্ট সেটআপ
২.১ নতুন প্রজেক্ট তৈরি
২.২ প্রজেক্ট স্ট্রাকচার
৩. ডিপ্লয়মেন্ট
৩.১ গিট-ভিত্তিক ডিপ্লয়
৩.২ CLI দিয়ে ডিপ্লয়
৩.৩ ডিপ্লয় হুক
৪. কনফিগারেশন
৪.১ vercel.json
৪.২ এনভায়রনমেন্ট ভ্যারিয়েবল
৫. ডোমেইন ম্যানেজমেন্ট
৫.১ কাস্টম ডোমেইন
৫.২ সাবডোমেইন এবং ওয়াইল্ডকার্ড
৬. সার্ভারলেস ফাংশন
৬.১ ফাংশন তৈরি
৬.২ ফাংশন কনফিগারেশন
৭. এজ মিডলওয়্যার (Next.js)
৭.১ মিডলওয়্যার তৈরি
৮. মনোরিপো (Monorepo)
৮.১ সেটআপ
৯. CLI কমান্ড
৯.১ প্রজেক্ট ম্যানেজমেন্ট
৯.২ লগ এবং ডিবাগ
১০. সিকিউরিটি
১০.১ ডিপ্লয়মেন্ট প্রোটেকশন
১০.২ ফায়ারওয়াল
১১. মনিটরিং এবং অ্যানালিটিক্স
১১.১ Vercel Analytics
১১.২ লগ ড্রেন
১২. উদাহরণ: একটি সম্পূর্ণ প্রজেক্ট
১২.১ Next.js প্রজেক্ট
১২.২ API এবং স্ট্যাটিক
১৩. টিপস এবং সেরা অভ্যাস