3 روش برای استقرار یک React Application در Netlify

برنامه React خود را با حداقل تلاش با استفاده از ویژگی‌های استقرار Netlify در مقابل مخاطبان قرار دهید.

React یک کتابخانه محبوب جاوا اسکریپت برای ایجاد رابط های کاربری کاربردی در برنامه های وب پویا است. شاید ساعت‌های زیادی را صرف اشکال‌زدایی کد React کرده باشید تا اینستاگرام یا Airbnb بعدی را بسازید.

صرف نظر از اینکه در حال ساخت چه چیزی هستید، هدف نهایی همیشه این است که کار خود را به جهان نشان دهید. اینجاست که پلتفرم های میزبانی مانند Netlify به کار می آیند. آنها مجموعه ای از ابزارها را ارائه می دهند که فرآیند استقرار را ساده می کند.

برای یادگیری نحوه استقرار برنامه های React خود با استفاده از ابزارهای استقرار آسان Netlify، همراه باشید.

نتلیفای چیست؟

Netlify یک پلتفرم توسعه مبتنی بر ابر با ویژگی‌هایی است که میزبانی و استقرار برنامه‌ها در وب را بسیار آسان‌تر می‌کند. به عبارت ساده، طیف وسیعی از ابزارها و خدمات را ارائه می دهد که فرآیند را ساده و ساده می کند و به شما امکان می دهد یک برنامه وب را در عرض چند ثانیه مستقر و میزبانی کنید.

ویژگی های اصلی Netlify

Netlify دارای طیف وسیعی از ویژگی ها است که فرآیند استقرار را ساده می کند.

• این ویژگی‌های دسترسی ضروری و کنترل نسخه را فراهم می‌کند تا تیم‌های توسعه را قادر می‌سازد تا به طور مؤثر و مؤثر در پروژه‌ها همکاری کنند.
• این خدمات میزبانی امن را ارائه می دهد که می توانید مطابق با نیازهای خود تنظیم کنید. علاوه بر این، در صورت از دست دادن اطلاعات، پشتیبان گیری خودکار را فراهم می کند.
• به طور یکپارچه با خدمات توسعه ابری محبوب مانند GitHub، GitLab و Bitbucket ادغام می شود.
• این ویژگی ها را فراهم می کند که تنظیم و پیکربندی URL دامنه سفارشی و گواهی SSL را برای برنامه شما آسان می کند.

یک برنامه React Demo ایجاد کنید

1. برای شروع، ابتدا باید یک برنامه React دمو ایجاد کنید که در نهایت آن را در Netlify مستقر خواهید کرد. دستور زیر را در ترمینال خود اجرا کنید تا یک برنامه React ایجاد کنید: npx create-react-app demo-react-netlify-app
2. در مرحله بعد، این دستور ترمینال را برای چرخش سرور توسعه اجرا کنید: npm start ادامه دهید و نتایج را در مرورگر خود در http://localhost:3000 مشاهده کنید.
3. در نهایت، این دستور را برای ایجاد یک نسخه آماده برای تولید برنامه خود اجرا کنید: npm run build این دستور فایل های تولیدی و دارایی های مورد نیاز را در داخل یک پوشه جدید در پوشه اصلی به نام build تولید می کند. پوشه build یک نسخه کوچک شده از کل برنامه را می گیرد که شامل همه چیزهایی است که برای استقرار برنامه لازم است.

npx create-react-app demo-react-netlify-app

npm start

npm run build

برنامه React را در Netlify اجرا کنید

Netlify سه روش ارائه می دهد که می توانید از آنها برای استقرار برنامه React خود استفاده کنید. تو می توانی:

• پروژه خود را از یک میزبان مخزن Git مانند GitHub وارد کنید.
• از ویژگی Drag and Drop استفاده کنید.
• از ابزار خط فرمان، CLI Netlify استفاده کنید.

استقرار با استفاده از ویژگی واردات GitHub

1. با ایجاد یک مخزن در GitHub برای نگهداری فایل های پروژه برنامه React خود شروع کنید. همچنین، می‌توانید فایل‌های پروژه خود را روی هر ارائه‌دهنده Git پشتیبانی‌شده دیگری مانند GitLab، Bitbucket یا Azure DevOps میزبانی کنید.
2. در مرحله بعد، برای یک حساب کاربری در Netlify ثبت نام کنید. پس از ثبت نام، به داشبورد حساب خود بروید و تب Sites را انتخاب کنید.
3. روی دکمه Import from Git کلیک کنید.
4. پلتفرم ارائه دهنده Git ترجیحی خود را انتخاب کنید. Netlify از شما می خواهد که با ارائه دهنده Git خود احراز هویت کنید تا به آن اجازه دسترسی به حساب و مخازن شما را بدهید.
5. پس از انجام این کار، Netlify لیستی از مخازن را در ارائه دهنده Git شما نمایش می دهد. مخزن پروژه React را که در ابتدا به ارائه‌دهنده Git خود فرستادید، انتخاب کنید.
6. پس از انتخاب مخزن، باید مشخص کنید که Netlify چگونه باید فرآیند استقرار را مدیریت کند. معمولاً برای وب‌سایت‌های استاتیک، نیازی به تغییر نیست، اما برای وب‌سایت‌های پویا مانند برنامه‌های React، باید تنظیمات ساخت را تنظیم کنید. خوشبختانه، Netlify به‌طور پیش‌فرض چارچوب مورد استفاده برای ساخت برنامه را به‌طور خودکار شناسایی می‌کند و فیلدها را با تنظیمات ساخت مورد نیاز پر می‌کند.
7. در نهایت روی Deploy site کلیک کنید تا فرآیند به پایان برسد.

برای مشاهده برنامه در مرورگر خود، روی URL ارائه شده کلیک کنید. اگر یک URL دامنه سفارشی دارید، می توانید با به روز رسانی URL از تنظیمات سایت، به Netlify دستور دهید که از آن در سایت شما استفاده کند.

استقرار با استفاده از ویژگی Drag and Drop

این ساده ترین روش برای استقرار برنامه React شما در Netlify است. فقط باید پوشه build را در رابط کاربری کشیدن و رها کردن Netlify بکشید و رها کنید.

1. در داشبورد Netlify، تب Site را انتخاب کنید. در مرحله بعد روی افزودن سایت جدید کلیک کنید و سپس از منوی کشویی Deploy manually را انتخاب کنید.
2. در صفحه ویژگی کشیدن و رها کردن، پوشه حاوی فایل های بیلد React را انتخاب کنید و آن را در این رابط کاربری رها کنید. این پروژه فوراً در Netlify مستقر می شود. همچنین، می توانید برای آپلود بر روی Browse کلیک کنید تا پوشه ساخت خود را از سیستم فایل انتخاب کنید.

استقرار با استفاده از رابط خط فرمان Netlify

با استفاده از رابط خط فرمان Netlify (CLI)، می توانید برنامه React خود را مستقیماً از یک ترمینال مستقر کنید. علاوه بر این، CLI Netlify به شما این امکان را می‌دهد که بتوانید استقرار مداوم را به گونه‌ای پیکربندی کنید که وقتی به‌روزرسانی‌های جدید را به مخزن Git خود انجام می‌دهید و فشار می‌دهید، به‌طور خودکار مستقر شوند.

1. برای نصب Netlify’s CLI دستور زیر را روی ترمینال خود اجرا کنید: npm install netlify-cli -g
2. اکنون دستور زیر را اجرا کنید تا برنامه خود را اجرا کنید. قبل از استقرار مطمئن شوید که در فهرست کاری پروژه قرار دارید. netlify deploy CLI Netlify از شما می خواهد که به آن اجازه دهید تغییراتی در حساب شما ایجاد کند. پس از اعطای مجوز، نام حساب تیمی را که هنگام ثبت‌نام ارائه کرده‌اید، وارد کنید، سپس انتخاب کنید که فهرست برنامه را به یک وب‌سایت موجود پیوند دهید یا یک وب‌سایت جدید ایجاد و پیکربندی کنید. با ارائه یک نام وب سایت سفارشی و نام پوشه ساخت خود پایان دهید.
3. CLI یک نسخه پیش نویس از برنامه شما را مستقر می کند. بررسی کنید که همه چیز همانطور که انتظار می رود کار کند.
4. در نهایت دستور زیر را اجرا کنید تا برنامه خود را در مرحله تولید قرار دهید. netlify deploy –prod

npm install netlify-cli -g

netlify deploy

netlify deploy --prod

مقایسه سه روش استقرار

روش واردات GitHub کارآمدترین روش برای استقرار برنامه های تولیدی است زیرا به شما امکان می دهد مخزن Git خود را مستقیماً به Netlify پیوند دهید و کد خود را با وب سایت یا برنامه زنده آنها همگام کنید. هنگامی که تغییرات را در مخزن Git خود انجام می دهید و فشار می دهید، Netlify به طور خودکار وب سایت را به روز می کند.

روش کشیدن و رها کردن برای استقرار سایت‌های استاتیک ساده‌تر است، زیرا نیازی به کدگذاری یا راه‌اندازی ندارد. با این حال، هنگامی که تغییراتی در مخزن خود ایجاد می کنید، اجازه به روز رسانی خودکار را نمی دهد.

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

هر سه روش برای استقرار برنامه ها در Netlify مفید هستند. در نهایت، انتخاب کدام مورد برای استفاده به نیازهای هر پروژه جداگانه بستگی دارد.

استفاده از Netlify برای استقرار سایر برنامه ها

Netlify یک ابزار قدرتمند و همه کاره است که می توانید از آن برای استقرار برنامه های کاربردی دیگری که فقط React هستند استفاده کنید. می توانید از آن برای استقرار و میزبانی وب سایت های استاتیک و برنامه های پویا که با فریمورک های مختلف مانند Angular ساخته شده اند استفاده کنید.

رابط کاربر پسند پیکربندی، مدیریت و استقرار API های شما را آسان می کند.

منبع مقاله