Next.js Wildcard Subdomains — Smashing Magazine

یک “کارت عام”؟ در دنیا چه؟ سوال بزرگ، این نوع دامنه ها از آن سرچشمه می گیرند سوابق DNS Wildcard که شبیه به این هستند:

*.example.               3600     TXT   "Wild! You have found a wildcard."

هنگامی که از این رکورد DNS استفاده می شود، هر زیردامنه ای که با علامت عام مطابقت دارد، یک را نگه می دارد TXT ارزش: «وحشی! شما یک وایلدکارت پیدا کرده اید.»

به عنوان مثال، اگر این روی دامنه تنظیم شده باشد smashingmagazine.com، apples.example.smashingmagazine.com و oranges.example.smashingmagazine.com هر دو مقدار TXT بالا را برمی گرداند. همین اصل را می توان برای رکوردهای CNAME و A نیز اعمال کرد.

موارد استفاده وحشی برای وایلدکارت

از وایلد کارت ها می توان برای طیف وسیعی از موارد استفاده کرد. در حال حاضر، بیایید روی جایی که می توان آنها را در ترکیب با Next.js اعمال کرد تمرکز کنیم:

1. ارائه خدمات میزبانی شده
   رایج ترین استفاده از دامنه های wildcard این است که به کاربران سرویس های میزبانی شده فضای خود را با یک زیر دامنه منحصر به فرد ارائه می دهد. به عنوان مثال، اگر من پلتفرمی برای رستوران ها می ساختم تا پلتفرم های سفارش دیجیتال با دامنه را میزبانی کنند menus.abc، من می توانم پیتزا فروشی Dom را ارائه دهم domspizzeria.menus.abc و دامنه جادویی پراتا magicalprata.menus.abc. مزیت این کار این است که به هر یک از این مؤسسات فضای محصور خود را می دهد که می توانند آن را سفارشی کرده و بسازند. این فضا می‌تواند به‌عنوان وب‌سایت خود عمل کند – به هیچ چیز وابسته نیست.
2. میزبانی محتوا و نمونه کارها شخصی
   Wildcards همچنین می تواند به عنوان فضایی برای میزبانی محتوا در نمونه کارها مورد استفاده قرار گیرد، که به این نمونه کارها احساس فردیت می بخشد، نمونه ای از آن نحوه ارائه زیر دامنه ها برای نویسندگان است.
3. وایلدر موارد استفاده خلاقانه تر
   شما نمی توانید این موارد استفاده را تعریف کنید، اما موارد استفاده خلاقانه زیادی از این سبک از دامنه ها وجود دارد. به عنوان مثال، در ادامه این مقاله، ما یک اسباب‌بازی تحت وب را توسعه خواهیم داد که یک صفحه وب را وارونه می‌کند و برای استرالیایی‌ها قابل خواندن است.

هشدارهای Wildcards با Next.js

آه متأسفانه، استفاده از حروف عام کامل نیست، چند اشکال دارد:

• بدون ایجاد سایت استاتیک (و ISR)
  متأسفانه، هیچ سیستم خاصی برای ارائه صفحات سفارشی ایستا برای زیردامنه های مختلف وایلد کارد مانند شما با مسیریابی پویا وجود ندارد (در جایی که شما دارید [slug].js فایل ها).
• مشکلات توسعه
  هنگام توسعه محلی، شبیه‌سازی دامنه‌های wildcard می‌تواند دردسرساز باشد و ما کمی بعداً در این مقاله به این موضوع خواهیم پرداخت، اما نکته مهمی است که باید در نظر داشت.
• پلتفرم های استقرار محدود
  Vercel از دامنه‌های Wildcard پشتیبانی می‌کند، با این حال، سایر پلتفرم‌های Jamstack گرا همه از دامنه‌های Wildcard پشتیبانی نمی‌کنند. به عنوان مثال، Netlify این ویژگی را به گروهی از کاربران در برنامه Pro محدود می کند.

ساختمان با حروف وحشی

با این همه صحبت، به ساختن با این دامنه ها می پردازیم. ما روی سه مکان تمرکز خواهیم کرد که می‌توانید عام را دریافت کنید:

1. سمت سرور getServerSideProps،
2. سمت مشتری با useEffect،
3. سمت سرور در مسیرهای API و عملکردهای لبه.

سمت سرور getServerSideProps

این رایج ترین موردی است که در آن نیاز به استخراج عام دارید، می توانید از آن در صفحاتی استفاده کنید که باید محتوای کاملاً متفاوتی را برای ویلدکارت های مختلف ارائه کنید. همانطور که در بالا توضیح داده شد، این کار را نمی توان از طریق تولید سایت ایستا انجام داد، بنابراین باید آن را در صفحات رندر شده سمت سرور انجام دهیم.

در getServerSideProps یک شی متن ارسال می شود، در این شی می توانید با استفاده از شی درخواست HTTP دسترسی داشته باشید context.req. در این شی درخواست، می توانید به نام میزبان در دسترسی داشته باشید headers.host، که رشته ای مانند example.yourdomain.com. می‌توانیم رشته را به آرایه‌ای در هر نقطه تقسیم کنیم و سپس به اولین مورد در آرایه مذکور دسترسی پیدا کنیم. در کد، به شکل زیر است:

export async function getServerSideProps(context) {
  let wildcard = context.req.headers.host.split(".")[0];
  wildcard =
    wildcard != "yourdomain"
      ? process.env.NODE_ENV != "development"
        ? wildcard
        : process.env.TEST_WILDCARD
      : "home";
  return { props: { wildcard } };
}

همانطور که در این قطعه کد می بینید، اگر دامنه پایه ای باشد که ما wildcard را روی آن تنظیم می کنیم، یک پردازش مجموعه اضافی روی wildcard انجام می دهیم. home (اگر ورودی کاربر را دریافت می کنید، این موردی است که شما باید رسیدگی کنید) و اگر ما در حال آزمایش روی لوکال هاست هستیم، می توانیم حروف عام دیگر را آزمایش کنیم. در تابع صادرات پیش‌فرض ما، که صفحه ما را رندر می‌کند، می‌توانیم از دستور switch برای مدیریت حروف عام استفاده کنیم:

export default function App(props) {
  switch(props.wildcard) {
    case "home":
      return <div>Welcome to the home page!</div>;
      break;
    default:
      return <div>The wild card is: {props.wildcard}.</div>;
  }
}

سمت مشتری با useEffect

اگر فقط می خواهید تغییرات کوچکی در هر صفحه در یک علامت عام متفاوت ایجاد کنید، می توانید با استفاده از useEffect قلاب در سمت مشتری این رویکرد تقریباً شبیه روشی است که ما در آن انجام دادیم getServerSideProps، جز اینکه ما به آن تکیه خواهیم کرد window.location.hostname. استفاده كردن window به این معنی است که رندر اولیه سرور قادر به دسترسی به اطلاعات نخواهد بود، بنابراین باید آن را در a قرار دهیم useEffect قلابی که در سمت کلاینت اجرا می شود. این کد به شکل زیر است:

// useEffect and useState must be imported from 'react'

const [wildcard, setWildcard] = useState("")
  useEffect(() => {
    setWildcard(window.location.hostname.split(".")[0])
  }, [])

با این حال، این رویکرد به دور از ایده‌آل بودن است، زیرا بین اولین رندر صفحه و در دسترس بودن علامت عام تاخیر وجود دارد. بنابراین، اگر تغییرات شدیدی را بر اساس عام ایجاد می‌کنید، تغییرات برای کاربر شما آزاردهنده خواهد بود. این همچنین ممکن است به اندازه گیری تغییر چیدمان تجمعی شما در موارد حیاتی وب شما آسیب برساند. با در نظر گرفتن این موضوع، من به شدت توصیه می‌کنم استفاده از این رویکرد را به اقتباس‌هایی محدود کنید که در بارگذاری اولیه از دید بیننده دور باشند. به عنوان مثال می توان یک پاورقی مارک دار، در صفحه مستندات فنی را نام برد. البته دانستن آن هنوز هم مفید است.

سمت سرور در مسیرهای API و عملکردهای لبه

مسیرهای API منطقه دیگری است که ممکن است بخواهید از آن به یک علامت عام دسترسی داشته باشید. خوشبختانه، همان شی درخواستی که در بخش بالا در مورد آن بحث کردیم getServerSideProps همچنین هنگام استفاده از مسیر API Node.js با Next.js در دسترس است. ما می توانیم به این شکل دسترسی داشته باشیم:

export default (req, res) => {
  let wildcard = req.headers.host.split(".")[0];
  wildcard =
    wildcard != "yourdomain"
      ? process.env.NODE_ENV != "development"
        ? wildcard
        : process.env.TEST_WILDCARD
      : "home";
  res.json({ wildcard: wildcard })
}

پس از این، می‌توانیم اقدامات خاصی مانند واکشی داده‌های مختلف از پایگاه داده شما بسته به حروف عام انجام دهیم و آن را از API برگردانیم.

همین منطق را می‌توان برای توابع Edge/Middleware جدید Next.js اعمال کرد. این به شما امکان می‌دهد تا از حروف عام در بیش از یک مسیر بدون تکرار کد استفاده کنید و همچنین سرعت پردازش را افزایش می‌دهد زیرا اجرای کد در لبه اتفاق می‌افتد. در حالی که عملکرد هنوز در نسخه بتا است، مطمئناً باید مراقب آن بود.

// _middleware.js
export function middleware(req) {
  let wildcard = req.headers.get("host").split(".")[0];
  console.log(wildcard);
  wildcard =
    wildcard != "yourdomain"
      ? process.env.NODE_ENV != "development"
        ? wildcard
        : process.env.TEST_WILDCARD
      : "home";
  console.log(process.env.TEST_WILDCARD);
  return new Response(JSON.stringify({ wildcard: wildcard }), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
}

🦘Aussie-izer

اکنون که نظریه این استراتژی را بررسی کردیم، بیایید نحوه اجرای آن را بررسی کنیم. در این بخش، ما از این رویکرد برای ساختن پروژه ای استفاده می کنیم که وب سایت ها را وارونه می کند (خوب، وب سایت هایی که از دامنه com استفاده می کنند و زیر دامنه نیستند) به نام 🦘Aussie-izer.

برای شروع، می خواهیم اجرا کنیم yarn init و سپس yarn add next react react-dom، و با افزودن این اسکریپت های استاندارد به کار خود پایان دهید package.json:

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

به محض اینکه یک پروژه استاندارد Next.js را راه اندازی کردیم، می خواهیم تنها فایل کدی را که برای این پروژه نیاز داریم ایجاد کنیم: pages/index.js.

اول، ما می خواهیم اضافه کنیم getServerSideProps تابعی که در آن علامت عام را استخراج می کنیم (همانطور که من این را در آن میزبانی می کنم aussieizer.sampoder.com) این چیزی است که من به آن ارزیابی خواهم کرد home مانند:

export async function getServerSideProps(context) {
  let wildcard = context.req.headers.host.split(".")[0];
  wildcard =
    wildcard != "aussieizer"
      ? wildcard != "localhost:3000"
        ? wildcard
        : process.env.TEST_WILDCARD
      : "home";
  return { props: { wildcard } };
}

سپس از آن wildcard استفاده می کنیم تا یک iFrame برای پر کردن آن صفحه (با چرخاندن iFrame برای ایجاد افکت) با src تنظیم شده است {`https://${props.wildcard}.com`}. همانطور که در بالا توضیح دادیم، از یک سوئیچ برای ارائه یک صفحه کمکی کوچک در صورت بازدید از صفحه اصلی استفاده خواهیم کرد:

export default function App(props) {
  switch (props.wildcard) {
    case "home":
      return (
        <div>
          Welcome to the Aussie-izer! This only works for .com domains. If you
          want to Aussie-ize{" "}
          <a href="https://example.com">https://example.com</a> visit{" "}
          <a href="https://example.aussieizer.sampoder.com">
            https://example.aussieizer.sampoder.com
          </a>.
        </div>
      );
      break;
    default:
      return (
        <iframe
          src={`https://${props.wildcard}.com`}
          style={{
            transform: "rotate(180deg)",
            border: "none",
            height: "100vh",
            width: "100%",
            overflow: "hidden",
          }}
          frameBorder="0"
          scrolling="yes"
          seamless="seamless"
          height="100%"
          width="100%"
        ></iframe>
      );
  }
}

و ما آماده رفتن هستیم! نسخه زنده در دسترس است https://aussieizer.sampoder.com و کد منبع را می توان در یافت https://github.com/sampoder/aussie-izer/.

میزبانی / استقرار

اگر روی یک سرور سفارشی میزبانی می‌کنید، راه‌اندازی دامنه‌های wildcard از طریق DNS آسان خواهد بود. با این حال، بخش بزرگی از استفاده از Jamstack امکان میزبانی در سرویس هایی مانند Vercel یا Netlify است. این سرویس ها سیستم های مدیریت دامنه خود را دارند.

Vercel

Vercel از دامنه های wildcard خارج از جعبه – برای همه حساب ها پشتیبانی می کند. برای استفاده از آنها ابتدا به سایت مراجعه کنید Domains بخش استقرار شما Settings زبانه در مرحله بعد، باید با استفاده از a وارد دامنه خود شوید * برای نشان دادن حروف.

برای مثال بالا وارد کردم:

*.aussieizer.sampoder.com

شما به احتمال زیاد می خواهید دامنه ریشه خود را نیز اضافه کنید (aussieizer.sampoder.com، در مورد من) برای اینکه بتوان یک صفحه اصلی یا برخی دستورالعمل ها را ارائه داد، با این حال، می تواند یک پایگاه کد جداگانه باشد.

Netlify

Netlify ویژگی های wildcard خود را به حساب های حرفه ای محدود می کند. اگر یک حساب حرفه ای دارید، باید به کارکنان پشتیبانی آنها ایمیل بزنید تا سپس این گزینه را در حساب شما فعال کنند. پس از فعال شدن در صفحه تنظیمات دامنه نشان داده می شود.

ارائه دادن

Render همچنین دامنه های wildcard را به همه کاربران ارائه می دهد. به سادگی یک دامنه با یک وارد کنید * (به معنی علامت عام شما) در Add Custom Domain ورودی را در بخش دامنه های سفارشی صفحه تنظیمات سایت خود وارد کنید که عام را فعال می کند. لطفاً توجه داشته باشید که Render از شما می‌خواهد که رکوردهای اضافی را به DNS خود اضافه کنید تا آنها بتوانند a LetsEncrypt گواهی SSL (دستورالعمل‌های دقیق زمانی که دامنه حروف عام خود را وارد می‌کنید به شما نشان داده می‌شود).

خودشه!

دامنه های Wildcard اغلب تحت رادار قرار می گیرند – امیدوارم از کاوش آنها با من لذت برده باشید. متشکرم!

همچنین: FYI استرالیایی ها در واقع وارونه نمی بینند.

خواندن بیشتر در مجله Smashing

(vf، yk، او)