GitHub ایکشنز CI/CD کا استعمال کرتے ہوئے کلاؤڈ فلیئر ورکرز کے لیے فل اسٹیک Next.js ایپ کو کیسے تعینات کیا جائے

By /

میں عام طور پر Postgres کے ساتھ تصدیق کے لیے Next.js 14 (App Router) اور Supabase کا استعمال کرتے ہوئے پروجیکٹ بناتا ہوں۔ Next.js ایپس کے لیے ڈیفالٹ ڈسٹری بیوشن کا انتخاب عام طور پر Vercel ہوتا ہے کیونکہ یہ ایک بہترین ڈویلپر تجربہ فراہم کرتا ہے۔

لیکن تقریباً ایک ہفتے تک دونوں پلیٹ فارمز پر ایک ہی پروجیکٹ کو چلانے کے بعد، میں نے متبادل کے طور پر Cloudflare ورکرز کو تلاش کرنا شروع کیا۔ مجھے معلوم ہوا کہ تاخیر کو بہتر بنایا جائے گا (کم TTFB) اور مفت درجے میرے استعمال کے معاملے کے لیے زیادہ لچکدار تھے۔

Cloudflare پر Next.js ایپس کو تعینات کرنا ایک چیلنج تھا۔ پچھلے حل، جیسے Cloudflare پیجز، کی مکمل Next.js فعالیت اور ٹولز جیسے کہ: next-on-pages یہ اکثر تازہ ترین ریلیز سے پیچھے رہ جاتا ہے۔

متعارف ہونے کے بعد سے کیا بدلا ہے۔ @opennextjs/cloudflare. یہ معیاری Next.js ایپلی کیشنز کو Cloudflare ورکرز میں مرتب کرنے کی اجازت دیتا ہے تاکہ SSR، ISR، مڈل ویئر، اور تصویری اجزاء جیسی خصوصیات کو سپورٹ کیا جا سکے۔ کوڈ میں بڑی تبدیلیوں کے بغیر سب ممکن ہے۔

اس گائیڈ میں، میں آپ کو بالکل درست اقدامات کے بارے میں بتاؤں گا جو میں نے کلاؤڈ فلیئر ورکرز کے لیے ایک مکمل اسٹیک Next.js + Supabase ایپلی کیشن کو تعینات کرنے کے لیے استعمال کیا تھا۔

یہ مضمون رن بک ہے کاش جب میں نے شروع کیا ہوتا۔

انڈیکس

ورسل پر کلاؤڈ فلیئر ورکرز کا انتخاب کیوں کریں؟

Next.js ایپلیکیشنز کو تعینات کرتے وقت Vercel اکثر پہلے سے طے شدہ انتخاب ہوتا ہے۔ یہ ایک ہموار ڈویلپر کا تجربہ اور Next.js کے ساتھ سخت انضمام پیش کرتا ہے۔

تاہم، Cloudflare ورکرز ایک زبردست متبادل پیش کرتے ہیں، خاص طور پر جب عالمی کارکردگی اور لاگت کی تاثیر پر غور کیا جائے۔

یہاں ایک موٹا موازنہ ہے (تحریر کے وقت):

خدشہ ورسل (شوق) Cloudflare کارکن (مفت درجے)
درخواست منصفانہ استعمال کی حدود روزانہ لاکھوں درخواستیں۔
سرد آغاز ~100-300ms (علاقے کی بنیاد پر) صفر کے قریب (V8 تنہائی)
کنارے کا مقام وہ علاقے جہاں SSR پر پابندی ہے۔ 300+ عالمی کنارے والے مقامات
بینڈوتھ ~100GB/مہینہ (نرم ٹوپی) فراخ/مفت درجے پر کوئی سخت حد نہیں۔
اپنی مرضی کے مطابق ڈومین حمایت کی حمایت کی
امیج آپٹیمائزیشن استعمال میں شامل ہے۔ کے ذریعے دستیاب ہے۔ IMAGES پابند
مفت سے زیادہ فی مہینہ ~$20 سے شروع ہو رہا ہے۔ سستی، استعمال پر مبنی قیمت

کلیدی ٹیک ویز

  • دنیا بھر میں کم تاخیر: Cloudflare سیکڑوں کنارے والے مقامات پر ایپس چلاتا ہے، دنیا بھر کے صارفین کے لیے ردعمل کے اوقات کو تیز کرتا ہے۔

  • کم سے کم سردی کا آغاز: V8 Isolate کی بدولت، فنکشن تقریباً فوری طور پر شروع ہو جاتا ہے۔

  • لاگت کی تاثیر: مفت درجے پورٹ فولیوز، بلاگز، اور بہت سی چھوٹی سے درمیانی ایپس کے لیے کافی ہے۔

فوائد اور نقصانات پر غور کرنا

Cloudflare کارکنان مکمل Node.js ماحول کے بجائے V8 الگ تھلگ رن ٹائم استعمال کرتے ہیں۔ اس کا مطلب ہے:

اس نے کہا، زیادہ تر جدید اسٹیکوں کے لیے، جیسے Next.js + Supabase + Stripe + Resend، یہ حد شاذ و نادر ہی کوئی مسئلہ ہے۔

یعنی سلیکٹ کریں۔ ورسل اگر آپ آسان ترین پلگ اینڈ پلے Next.js کی تعیناتی چاہتے ہیں۔ منتخب کریں کلاؤڈ فلیئر ورکرز جب آپ بہتر کنارے کی کارکردگی اور زیادہ لچکدار اسکیلنگ چاہتے ہیں۔

شرائط

شروع کرنے سے پہلے، یقینی بنائیں کہ آپ کے پاس درج ذیل سیٹ اپ ہیں: زیادہ تر کاموں میں صرف چند منٹ لگتے ہیں۔

  • Node.js 18+ اور pnpm 9+ (آپ این پی ایم یا یارن بھی استعمال کرسکتے ہیں، لیکن یہ گائیڈ پی این پی ایم استعمال کرتا ہے۔)

  • کوئی راستہ نہیں Cloudflare اکاؤنٹ https://dash.cloudflare.com/sign-up

  • کوئی راستہ نہیں سپر بیس اکاؤنٹ (اگر آپ کی ایپ ڈیٹا بیس استعمال کرتی ہے) https://supabase.com

  • کوئی راستہ نہیں GitHub ذخیرہ پروجیکٹس کے لیے (بعد میں CI/CD سیٹ اپ کے لیے درکار ہے)

  • کوئی راستہ نہیں ڈومین کا نام (اختیاری) – آپ اسے مفت میں حاصل کر سکتے ہیں۔ *.workers.dev یہ بنیادی طور پر ایک URL ہے۔

رینگلر انسٹال کریں (Cloudflare CLI)

ہم اپنی ایپلیکیشن بنانے اور تعینات کرنے کے لیے رینگلر کا استعمال کریں گے۔

pnpm add -D wrangler

اسٹیک

اس منصوبے میں استعمال ہونے والی ٹیکنالوجی اسٹیک ہے:

  • Next.js (v14.2.x): عوامی اور ڈیش بورڈ دونوں راستوں کے لیے ایج رن ٹائم کے ساتھ ایپ راؤٹر کا استعمال

  • ذیلی بنیاد: توثیق، پوسٹگریس ڈیٹا بیس، اور قطار کی سطح کی سیکیورٹی (RLS) کو ہینڈل کرتا ہے۔

  • ٹیل ونڈ سی ایس ایس + UI یوٹیلیٹیز: Framer Motion کا استعمال کرتے ہوئے ہلکے اینیمیشن کے ساتھ اسٹائل کرنے کے لیے

  • Cloudflare کارکنان: تعیناتی کی بنیاد پر @opennextjs/cloudflare اور wrangler

  • GitHub ایکشنز: CI/CD اور تعیناتی کو خودکار کرنے کے لیے استعمال کیا جاتا ہے۔

میمو: اگر آپ Next.js استعمال کر رہے ہیں۔ 15 یا اس سے زیادہآپ ہٹا سکتے ہیں
--dangerouslyUseUnsupportedNextVersion یہ صرف مخصوص Next.js 14 سیٹ اپ کے لیے درکار ہے، لہذا اسے اپنی بلڈ اسکرپٹ میں جھنڈا لگائیں۔

مرحلہ 1 – Cloudflare اڈاپٹر انسٹال کریں۔

ایک موجودہ Next.js پروجیکٹ کے اندر Wrangler (Cloudflare کے CLI ٹول) کے ساتھ OpenNext اڈاپٹر انسٹال کریں۔

pnpm add @opennextjs/cloudflare
pnpm add -D wrangler

پھر تعیناتی اسکرپٹ package.json:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",

    "cloudflare-build": "opennextjs-cloudflare build --dangerouslyUseUnsupportedNextVersion",
    "preview":          "pnpm cloudflare-build && opennextjs-cloudflare preview",
    "deploy":           "pnpm cloudflare-build && wrangler deploy",
    "upload":           "pnpm cloudflare-build && opennextjs-cloudflare upload",
    "cf-typegen":       "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
  }
}

ہر اسکرپٹ کے افعال درج ذیل ہیں:

سکرپٹ فنکشن
pnpm cloudflare-build اگلا ایپ کو اس کے ساتھ مرتب کریں: .open-next/ (مزدور بنڈل) کوئی اپ لوڈز نہیں ہیں۔
pnpm preview مقامی طور پر اس کا استعمال کرتے ہوئے کارکن کو بنائیں اور چلائیں: wrangler dev. محرک کے قریب ترین چیز۔
pnpm deploy Cloudflare پر بنائیں اور اپ لوڈ کریں۔ یہ پیداوار میں بھیج دیا جائے گا۔
pnpm upload بنائیں اور اپ لوڈ کریں۔ نیا ورژن پروموشن کے بغیر (مرحلہ وار رول آؤٹس کے لیے)
pnpm cf-typegen دوبارہ پیدا کرنا cloudflare-env.d.ts ترمیم کے بعد ٹائپ کریں۔ wrangler.jsonc.

احتیاط: صفحہ پر مبنی @cloudflare/next-on-pages یہ ایک مختلف ٹول ہے۔ ہم ہیں ~ نہیں میں اسے صفحات کا استعمال کرتے ہوئے ایک حقیقی کارکن کے طور پر تعینات کر رہا ہوں۔ دونوں کو مکس نہ کریں۔

مرحلہ 2 – OpenNext کو جوڑیں۔ next dev

بنانا pnpm dev آپ Cloudflare بائنڈنگز (env vars, R2, KV, D1, وغیرہ) کو اسی طرح پڑھ اور ترمیم کر سکتے ہیں جس طرح پروڈکشن میں ہوتا ہے۔ next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {};

if (process.env.NODE_ENV !== "production") {
  const { initOpenNextCloudflareForDev } = await import(
    "@opennextjs/cloudflare"
  );
  initOpenNextCloudflareForDev();
}

export default nextConfig;

کیونکہ اسے ترقی کے دوران ہی کہا جاتا ہے۔ next build یہ تیز رہتا ہے اور CI بیکار میں Miniflare مثالوں کو نہیں گھماتا ہے۔

مرحلہ 3 — اپنا مقامی ماحول ترتیب دیں۔ .dev.vars

مقامی طور پر Cloudflare کارکنوں کے ساتھ کام کرتے وقت، Wrangler درج ذیل فائلوں کا استعمال کرتا ہے: .dev.vars ماحولیاتی متغیرات کو ذخیرہ کرنے کے لئے (اس کے بجائے .env.local Next.js میں استعمال کیا جاتا ہے)۔

ایک سادہ اور قابل اعتماد طریقہ یہ ہے کہ مثال کی فائلوں کو اپنے ذخیرے میں رکھیں اور اصل فائلوں کو نظر انداز کریں۔

ہاں: .dev.vars.example (سرشار)

NEXT_PUBLIC_SUPABASE_URL="https://YOUR-PROJECT-ref.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="YOUR-ANON-KEY"
NEXT_PUBLIC_DASHBOARD_DEFAULT_EMAIL="admin@example.com"

مقامی ماحول کی ترتیبات

درج ذیل کمانڈ کو چلائیں:

cp .dev.vars.example .dev.vars
cp .dev.vars .env.local

دونوں فائلیں کیوں استعمال کریں؟

دونوں فائلوں کو مطابقت پذیر رکھنے سے یہ یقینی بنتا ہے کہ آپ کی ایپ ڈیولپمنٹ کے دوران اور Cloudflare رن ٹائم پر چلتے وقت مستقل طور پر کام کرتی ہے۔

اپ ڈیٹ .gitignore

یقینی بنائیں کہ درج ذیل فائلوں کو نظر انداز کر دیا گیا ہے۔

.dev.vars
.env*.local
.open-next
.wrangler

مرحلہ 4 – اپنے مقامی کمپیوٹر سے ایپ کو متعین کریں۔

ایک بار pnpm preview اگر یہ صحیح طریقے سے کام کرتا ہے، تو آپ کی درخواست تعینات ہونے کے لیے تیار ہے۔

pnpm deploy

ہڈ کے نیچے یہ چلتا ہے:

pnpm cloudflare-build && wrangler deploy

پہلی بار، رینگلر کرے گا:

  1. اپنی ایپ کو اس کے ساتھ مرتب کریں: .open-next/worker.js.

  2. اپنے اسکرپٹس اور اثاثوں کو Cloudflare پر اپ لوڈ کریں۔

  3. اصل URL پرنٹ کریں۔ ہاں: https://porfolio..workers.dev.

براؤزر میں کھولیں۔ مبارک ہو آپ 330 سے ​​زیادہ شہروں میں Cloudflare کے کنارے پر ہیں۔ صفحات درج ذیل فارمیٹ میں فراہم کیے جائیں: <100ms TTFB ہر جگہ۔

یہاں میرے پورٹ فولیو کا لائیو ورژن ہے جو اس طرح تقسیم کیا گیا ہے:

مرحلہ 5 – راز کو کارکن تک پہنچائیں۔

مقامی .dev.vars ہے ~ نہیں کی طرف سے اپ لوڈ wrangler deploy. آپ کو راز کو واضح طور پر دھکیلنا ہوگا۔

wrangler secret put NEXT_PUBLIC_SUPABASE_URL
wrangler secret put NEXT_PUBLIC_SUPABASE_ANON_KEY
wrangler secret put NEXT_PUBLIC_DASHBOARD_DEFAULT_EMAIL

ہر کمانڈ آپ کو ایک قدر کا اشارہ کرتا ہے اور Cloudflare کے ساتھ خفیہ کردہ قدر کو اسٹور کرتا ہے۔ یا اسے بصری طور پر آزمائیں:

Cloudflare ڈیش بورڈ → ورکرز اور پیجز → آپ کے ملازمین → ترتیب → متغیرات اور راز → شامل کریں.

اہم: NEXT_PUBLIC_* var تعمیر کے وقت کلائنٹ کے بنڈل میں ان لائن ہوتا ہے، لہذا یہ pnpm cloudflare-build کے چلنے پر بھی دستیاب ہونا چاہیے (مقامی طور پر یہ .env.local؛ CI میں، مرحلہ 10 دیکھیں)۔

مرحلہ 6 – GitHub ایکشنز کا استعمال کرتے ہوئے مسلسل تعیناتی ترتیب دیں۔

ایک بار جب آپ کی مقامی تعیناتی کام کر لیتی ہے، تو اگلا مرحلہ اپنی تعیناتی کو خودکار بنانا ہے۔ main برانچ خود بخود پیداوار کو اپ ڈیٹ کرتی ہے۔

اس ورک فلو کا استعمال کرتے ہوئے:

  • پل کی درخواستیں توثیق کی جانچ کو چلاتی ہیں۔

  • پیداوار کی تعیناتی صرف ایک کامیاب تعمیر کے بعد ہوتی ہے۔

  • کرپٹ کوڈ کبھی بھی آپ کی اصل سائٹ تک نہیں پہنچتا۔

اپنے پروجیکٹ کے اندر درج ذیل فائلیں بنائیں:

.github/workflows/deploy.yml

name: CI / Deploy to Cloudflare Workers

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
  workflow_dispatch:

concurrency:
  group: cloudflare-deploy-${{ github.ref }}
  cancel-in-progress: true

jobs:
  verify:
    name: Lint and Build
    runs-on: ubuntu-latest
    timeout-minutes: 10

    steps:
      - uses: actions/checkout@v4

      - uses: pnpm/action-setup@v4
        with:
          version: 10

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm

      - run: pnpm install --frozen-lockfile
      - run: pnpm lint
      - run: pnpm build
        env:
          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
          NEXT_PUBLIC_DASHBOARD_DEFAULT_EMAIL: ${{ secrets.NEXT_PUBLIC_DASHBOARD_DEFAULT_EMAIL }}

  deploy:
    name: Deploy to Cloudflare Workers
    needs: verify
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    timeout-minutes: 15

    steps:
      - uses: actions/checkout@v4

      - uses: pnpm/action-setup@v4
        with:
          version: 10

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm

      - run: pnpm install --frozen-lockfile

      - name: Build and Deploy
        run: pnpm run deploy
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
          NEXT_PUBLIC_DASHBOARD_DEFAULT_EMAIL: ${{ secrets.NEXT_PUBLIC_DASHBOARD_DEFAULT_EMAIL }}

مطلوبہ GitHub ذخیرہ راز

GitHub Repository → Settings → Secrets and Variables → Actions → New Repository Secret پر جائیں اور درج ذیل کو شامل کریں:

خفیہ میں اسے کہاں سے حاصل کر سکتا ہوں؟
CLOUDFLARE_API_TOKEN https://dash.cloudflare.com/profile/api-tokens → "Cloudflare Worker Edit” ٹیمپلیٹ
CLOUDFLARE_ACCOUNT_ID Cloudflare ڈیش بورڈ → دائیں سائڈبار، "اکاؤنٹ ID”
CLOUDFLARE_ACCOUNT_SUBDOMAIN آپ کا *.workers.dev ذیلی ڈومین (صرف تقسیم یو آر ایل لنکس کے لیے استعمال کیا جاتا ہے)
NEXT_PUBLIC_SUPABASE_URL سوپا بیس پروجیکٹ کی ترتیبات
NEXT_PUBLIC_SUPABASE_ANON_KEY سوپا بیس پروجیکٹ کی ترتیبات
NEXT_PUBLIC_DASHBOARD_DEFAULT_EMAIL ای میل پہلے سے آباد ہے۔ /dashboard/login

بس۔ اسے دھکا main یہ تقریباً 90 سیکنڈ کے بعد چالو ہو جائے گا۔ PR صرف لنٹ اور بناتا ہے، لہذا کوئی ٹوٹا ہوا کوڈ کبھی پروڈکشن تک نہیں پہنچتا ہے۔

مرحلہ 7 – پروجیکٹ اپ ڈیٹس (روزانہ ورک فلو)

ابتدائی سیٹ اپ کے بعد، لوپ بورنگ حد تک آسان ہے۔ یہ نقطہ ہے. یہاں ہے جو میں اصل میں ہر روز کرتا ہوں:

کوڈ کی تبدیلی

git checkout -b feat/new-section
# ...edit files...
pnpm dev                # iterate locally
pnpm preview            # final smoke test on the Worker runtime
git commit -am "feat: add new section"
git push origin feat/new-section

PR کھولیں۔ چیک کریں بات یہ ہے کہ کام انجام دیا جاتا ہے۔ پھر ان کا جائزہ لیں، انضمام کریں، اور تعینات کریں۔ آپ کا کام خود بخود Cloudflare کو بھیج دیا جاتا ہے۔

ماحولیاتی متغیرات / رازوں کو اپ ڈیٹ کریں۔

# Local
nano .dev.vars

# Production
wrangler secret put NEXT_PUBLIC_SUPABASE_URL
# ...etc.

حتمی خیالات

جب میں نے یہ ہجرت شروع کی تو میں ورسل کو چھوڑنے سے گھبرا گیا تھا۔ Next.js DX وہاں واقعی بہت اچھا ہے۔ لیکن ایک بار جب آپ شوق کی سائٹوں سے آگے بڑھ جاتے ہیں، Cloudflare کی معاشیات اور کنارے کی کارکردگی قریب نہیں آتی ہے۔

کے ساتھ @opennextjs/cloudflareڈویلپر کا تجربہ بھی پکڑا گیا۔ pnpm dev لوپس ایک جیسے ہیں۔ میرا pnpm preview پیداوار کی نقل کرنا، git push ~90 سیکنڈ میں عالمی سطح پر تعینات۔

اگر آپ پرانے Cloudflare Pages + Next.js کہانی کو روکے ہوئے ہیں کیونکہ یہ کچا تھا، تو وہ دن ختم ہو گئے ہیں۔ اس ہفتے کے آخر میں اس رن بک کو سائیڈ پروجیکٹ پر آزمائیں اور خود ہی دیکھیں۔

اگر آپ کو یہ مفید معلوم ہوتا ہے تو، مکمل ذخیرہ یہاں ہے۔ شروع کرنے کے لیے اسے ڈپلیکیٹ کرنے کے لیے آزاد محسوس کریں۔

مبارک شپنگ.

– طارقول

Related Posts

Scroll to Top