توسعه فرانت‌اند

استقرار فرانت‌اند در Vercel: از صفر تا تولید

Git، Preview و Production، متغیرهای عمومی و secret، route و دامنه، محدودیت rollback و پایش بدون وعده زمان ثابت انتشار.

1405/01/06 1 دقیقه مطالعه 695 بازدید

یک پروژه در Preview درست دیده می‌شود، اما بعد از انتشار، درخواست ورود به API اشتباه می‌رود. build موفق بوده و فایل‌ها دریافت می‌شوند؛ مشکل در قرارداد محیط‌هاست. استقرار فرانت‌اند فقط فرستادن خروجی نیست. نسخه کد، تنظیم‌ها، نشانی سرویس و دامنه باید با هم هماهنگ باشند و نتیجه انتشار قابل پیگیری بماند. Vercel ابزارهایی برای این مسیر فراهم می‌کند، ولی سرعت ثابت یا موفقیت خودکار همه پروژه‌ها را تضمین نمی‌کند.

ادعای «از push تا production در سی ثانیه» بدون اندازه و شرایط پروژه قابل دفاع نیست. زمان نصب وابستگی، ساخت و صف می‌تواند متفاوت باشد. انتخاب سرویس نیز به framework، نیاز سرور، قرارداد داده و امکانات حساب مربوط است. برای راهنمای عملی، ابتدا یک جریان محدود و قابل توضیح تعریف کنید و تفاوت Preview با مقصد عمومی را روشن نگه دارید.

پروژه و خروجی واقعی را بشناسید

راهنمای Deployments در Vercel راه‌های ایجاد deployment را توضیح می‌دهد. یک repository ممکن است چند برنامه داشته باشد و root directory باید به همان بخش مورد نظر اشاره کند. build command و output directory باید با ابزار واقعی هماهنگ باشند. تشخیص خودکار می‌تواند کمک کند، اما اگر ساختار سفارشی است، نتیجه آن باید با فایل‌ها و scriptها مقایسه شود.

برای نمونه Vite، راهنمای Vite در Vercel قرارداد framework را شرح می‌دهد. پروژه باید package و lockfile معتبر داشته باشد و script ساخت واقعاً خروجی تولید کند. نام dist در یک مثال را به همه frameworkها تعمیم ندهید. اگر برنامه SSR یا function دارد، خروجی فقط فایل static نیست. نیاز runtime و محدودیت‌های آن باید با معماری برنامه سازگار باشد.

اتصال Git و اختیار انتشار

اتصال repository باید با حساب و دامنه دسترسی مناسب انجام شود. مشخص کنید کدام شاخه production است و تغییر شاخه‌های دیگر چه محیطی می‌سازد. همکار باید بداند merge یا push چه اثری دارد؛ انتشار خودکار تصمیم اجرایی مهمی است. pipeline نباید به convention شفاهی و نام مبهم شاخه وابسته بماند. قرارداد را همراه تنظیم پروژه و مستندات تیم نگه دارید.

دسترسی به مخزن با اختیار مدیریت دامنه، secret و rollback یکسان نیست. نقش‌ها باید متناسب با مسئولیت باشند. اگر چند نفر روی پروژه کار می‌کنند، تغییر تنظیم build هم باید قابل مرور باشد. درباره تاریخچه و مرز change، راهنمای Git فرانت‌اند مکمل است. وضعیت سرویس را نباید فقط از وجود commit در مخزن نتیجه گرفت؛ deployment نتیجه جدا دارد.

Preview و Production قرارداد متفاوت دارند

مستندات Environments محیط‌های استقرار و تنظیم‌های مربوط را توضیح می‌دهد. Preview می‌تواند برای مرور یک تغییر استفاده شود، اما باید معلوم باشد به کدام API و داده وصل است. صفحه‌ای که هنوز برای بررسی است نباید بی‌خبر عملیات واقعی حساس انجام دهد. جداسازی محیط با رنگ یک Banner کامل نمی‌شود؛ مقصد و credentialها باید واقعاً مناسب باشند.

نشانی Preview می‌تواند در اختیار افراد دیگر قرار گیرد و سیاست protection آن باید شناخته شود. داده حساب و فایل خصوصی را فقط به دلیل غیرproduction بودن محیط بی‌خطر فرض نکنید. OAuth callback، CORS و سرویس ایمیل ممکن است برای نشانی‌های متفاوت تنظیم بخواهند. اگر این قراردادها ناقص باشند، صفحه عادی نمایش داده می‌شود ولی جریان اصلی کار شکست می‌خورد و باید علت در همان مرز بررسی شود.

متغیر محیطی همیشه secret نیست

راهنمای Environment Variables دامنه محیط و روش استفاده را بیان می‌کند. مقداری که build فرانت‌اند در bundle عمومی قرار می‌دهد برای کاربر قابل دریافت است؛ نام متغیر یا ذخیره آن در dashboard محرمانه بودن خروجی را تضمین نمی‌کند. secret سرور نباید با قرارداد public client وارد فایل عمومی شود. پیشوندهای framework هم باید از مستندات همان ابزار خوانده شوند.

مقدارهای Preview و Production را جدا تعریف کنید و رفتار نبودن متغیر را روشن کنید. مقدار جدید ممکن است به deployment تازه نیاز داشته باشد؛ آن را تغییر فوری همه buildهای قدیمی فرض نکنید. در log، secretها را چاپ نکنید و خطای تنظیم را به شکل قابل فهم گزارش دهید. نشانی API، flag و token مسئولیت‌های متفاوت دارند و نباید با یک الگوی کپی‌کردن بی‌دلیل مدیریت شوند.

Build موفق چه چیزی را ثابت می‌کند؟

ساخت موفق نشان می‌دهد فرایند مربوط در آن محیط پایان یافته است. این نتیجه، صحت قیمت، مجوز یا همه مسیرهای UI را تضمین نمی‌کند. وابستگی قفل‌شده و نسخه runtime اهمیت دارند. تفاوت محیط محلی و build می‌تواند خطای case نام فایل یا ورودی ناموجود را آشکار کند. برای شکست ساخت، log همان مرحله را بخوانید و تغییر تصادفی فرمان‌ها را جای تشخیص علت قرار ندهید.

در اتوماسیون، exit code باید نتیجه واقعی را بیان کند. اگر script خطا را فقط چاپ و موفق خارج می‌شود، pipeline ممکن است خروجی ناقص را آماده معرفی کند. راهنمای npm scripts درباره قرارداد اجرا توضیح دارد. یک نام کوتاه build زمانی مفید است که ورودی، خروجی و اثر مرحله‌ها مشخص باشند و ابزارها بدون وابستگی معرفی‌نشده اجرا شوند.

Route و asset پس از انتشار

در اپ تک‌صفحه‌ای، باز کردن مستقیم route داخلی با کلیک داخل برنامه متفاوت است. تنظیم مسیر باید با router و framework هماهنگ باشد. rewrite سراسری بی‌دلیل می‌تواند خطای واقعی asset یا API را پشت صفحه موفق پنهان کند. برای فایل تصویر و script، مسیر پایه و نام خروجی باید معتبر باشند. کار کردن صفحه اول به معنی درست بودن همه مقصدهای عمیق نیست.

خطای 404 باید معنی واقعی داشته باشد و صفحه مناسب آن مسیر ادامه بدهد. راهنمای صفحه خطا درباره تفاوت ظاهر و وضعیت HTTP توضیح دارد. برای site چندزبانه یا زیرمسیر، canonical و مسیر asset هم باید در قرارداد باشند. تنظیم انتشار از محتوا جدا نیست؛ عنوان، مقصد لینک و فایل‌های عمومی باید به همان نسخه اشاره کنند.

دامنه و سرویس‌های وابسته

برای دامنه اختصاصی، مالکیت و تنظیم DNS باید با راهنمای سرویس و provider هماهنگ شود. تغییرها ممکن است در همه نقاط همزمان دیده نشوند. مقصد production را پیش از اعلام عمومی مشخص کنید و URLهای callback و ارتباط سرویس‌ها را با آن بسنجید. وجود گواهی و دریافت صفحه، به‌تنهایی مسیر ورود یا پرداخت را تأیید نمی‌کند. هر جریان به قرارداد مقصدهای بیرونی خودش وابسته است.

اگر backend روی سرویس دیگری است، latency، دسترسی و version API اهمیت دارد. فرانت‌اند تازه ممکن است field جدید بخواهد که backend هنوز ندارد. انتشار باید ترتیب یا سازگاری را مشخص کند. راهنمای قرارداد API به توضیح نتیجه و خطا کمک می‌کند. ادغام Git، این رابطه داده را خودبه‌خود نسخه‌بندی یا هماهنگ نمی‌کند.

Rollback همه چیز را برنمی‌گرداند

راهنمای Instant Rollback دامنه بازگردانی و محدودیت‌های مربوط را بیان می‌کند. برگشت deployment با معکوس کردن تغییر پایگاه داده، لغو ایمیل ارسال‌شده یا تغییر سرویس بیرونی یکی نیست. تنظیم‌های محیط و APIها هم باید با نسخه قدیمی سازگار بمانند. پیش از انتشار، معلوم کنید چه چیزی برگشت‌پذیر است و برای داده یا migration چه مسیر جداگانه‌ای لازم است.

نسخه قابل بازگشت را با شناسه و وضعیت مناسب نگه دارید. پس از حادثه، مسئول تصمیم و مسیر ارتباط باید روشن باشد. rollback کورکورانه ممکن است مشکل را به ناسازگاری دیگری منتقل کند. در UI دارای cache یا Service Worker، کاربران ممکن است فایل‌های قبلی را نگه داشته باشند. راهنمای چرخه عمر cache درباره این تفاوت نسخه‌ها توضیح می‌دهد.

پایش و تحویل

خطا، زمان پاسخ و رفتار جریان اصلی باید به deployment مربوط قابل پیگیری باشند. روشن کنید log مرورگر، function و سرویس بیرونی کجا دیده می‌شود. ابزار Analytics نیز نیاز به قرارداد داده و حریم خصوصی دارد و نصب آن تضمین شناخت علت همه مشکلات نیست. اطلاعات حساس را در event و query عمومی بی‌دلیل ثبت نکنید. مقدار قابل اندازه‌گیری باید به سؤال مشخص محصول مربوط باشد.

در تحویل، repository، شاخه production، root، فرمان ساخت، محیط‌ها و دامنه را ثبت کنید. نسخه و مسیر rollback و مسئول تنظیم‌ها معلوم باشند. Vercel می‌تواند بخش مهمی از استقرار را ساده کند، اما نتیجه قابل اعتماد از هماهنگی کد، پیکربندی و داده ساخته می‌شود. به‌جای وعده زمان ثابت، جریان قابل پیگیری تعریف کنید تا هر انتشار معلوم کند چه نسخه‌ای با چه قراردادهایی در دسترس مخاطب قرار گرفته است.

واکنش به این مقاله

اشتراک‌گذاری این مقاله:
دیدگاه‌ها 0
۰ / ۲۰۰۰

هنوز دیدگاهی ثبت نشده

اولین نفری باشید که نظر می‌دهد!