از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای استقرار برنامه React در NetlifyDeployment است process انتقال کد ما از یک سیستم کنترل منبع به یک پلت فرم میزبانی که در آن ذخیره می شود و می تواند به عنوان یک برنامه کاربردی برای کاربران نهایی ارائه شود. به طور معمول، این یا در فضای ابری انجام می شود یا روی یک سرور محلی قبل از ظهور ابر …
سرفصلهای مطلب
معرفی
گسترش هست process انتقال کد ما از یک سیستم کنترل منبع به یک پلت فرم میزبانی که در آن ذخیره می شود و می تواند به عنوان یک برنامه کاربردی برای کاربران نهایی ارائه شود. به طور معمول، این یا در فضای ابری انجام می شود یا روی یک سرور محلی
قبل از ظهور پلتفرم های ابری مانند نتلیفای، میزبانی فقط توسط ارائه دهندگان میزبان که نیاز به آپلود مجدد همه دارایی های استاتیک داشت (فایل های ایجاد شده پس از اجرا را بسازد npm run build) هر بار که تغییری ایجاد می کنید. این آپلود با استفاده از نرم افزار FTP یا سیستم مدیریت میزبانی وب مانند cPanel انجام شده است که می تواند بسیار استرس زا و فنی باشد.
Netlify برای حل این مشکل است! سه روش ساده برای استقرار یک برنامه در اختیار شما قرار می دهد – رابط کشیدن و رها کردن، پروژه import رابط ، و command-line رابط (CLI). اگرچه همه آنها ساده ساخته شده اند، اما هر کدام با یک مورد استفاده متفاوت در ذهن طراحی شده اند.
در این راهنما، ما نگاهی به روش استقرار یک برنامه React در Netlify خواهیم داشت و مزایا و معایب هر روش برای استقرار یک برنامه React را پوشش خواهیم داد. پس از آن، ما به سرعت روش برخورد با آن را توضیح خواهیم داد صفحه 404 یافت نشد خطا در NetLify.
چرا از NetLify استفاده می کنیم؟
Netlify یک ارائه دهنده میزبانی ابری است که خدمات پشتیبان بدون سرور را برای وب سایت های ثابت ارائه می دهد. طراحی شده است تا به حداکثر رساندن بهره وری به این معنا که توسعه دهندگان (مخصوصاً فرانت گرا)، و مهندسان را قادر می سازد تا به سرعت وب سایت ها/برنامه ها را بسازند، آزمایش کنند و به کار گیرند.
این با اتصال به مخزن GitHub شما از جایی که کد منبع را می کشد کار می کند. پس از آن، یک بیلد را اجرا خواهد کرد process به صفحات را از قبل ارائه دهید از وب سایت/برنامه ما به پرونده های استاتیک.
دلایل زیادی به نفع استفاده از Netlify وجود دارد که در اینجا فقط به چند مورد از آنها اشاره می کنیم:
- NetLify است ارزان تر – ایجاد و میزبانی یک وب سایت ثابت در دراز مدت باعث صرفه جویی در هزینه شما می شود. Netlify سرعت سایت را به طور قابل توجهی از طریق توزیع جهانی و پیش رندر خودکار افزایش می دهد.
- Netlify آن را به طرز باورنکردنی می سازد ساده برای استقرار یک وب سایت – در واقع، ساده ترین راه برای انجام این کار استفاده از GitHub، GitLab یا Bitbucket برای راه اندازی مستمر استقرار است.
- Netlify آن را فوق العاده می کند راه اندازی یک وب سایت آسان است با راه حل داخلی مدیریت DNS.
- ما به راحتی می توانستیم فقط یک شاخه خاص را مستقر کنید پروژه Git ما – این برای آزمایش ویژگی‌های جدیدی که ممکن است به شعبه اصلی یا اصلی راه یابند یا برای تعیین سریع اینکه چگونه روابط عمومی بر سایت شما تأثیر می‌گذارد مفید است.
- Netlify به شما این امکان را می دهد پیش نمایش هرگونه استقرار شما می‌سازید یا می‌خواهید ایجاد کنید – این به شما و تیمتان اجازه می‌دهد بدون نیاز به اعمال تغییرات در تولید، مشاهده کنید روی سایت موجود شما
- Netlify مفید است ویژگی ارسال فرم که به ما امکان می دهد اطلاعات را از کاربران جمع آوری کنیم.
شروع شدن
در این راهنما، ما یک را مستقر خواهیم کرد کاربرد ته رنگ و سایه به Netlify. این یک برنامه ساده React است که رنگ ها و سایه ها را از آن بیرون می کشد values.js بسته بندی
قبل از شروع، اجازه دهید برخی از پیش نیازهای استفاده از Netlify را مرور کنیم:
- با هر ارائه دهنده Git – GitHub، GitLab یا Bitbucket یک حساب داشته باشید.
- دارند
npmنصب شده – از قبل نصب شده است گره یا نخ. - درک اولیه روش استفاده از terminal (اختیاری).
فشار دادن کد خود به GitHub
قبل از اینکه بتوانیم برنامه های خود را در Netlify مستقر کنیم، ابتدا باید پروژه خود را به هر ارائه دهنده Git فشار دهیم. برای این راهنما، ما از terminal برای فشار دادن برنامه React ما به GitHub.
اما اجازه دهید ابتدا با ایجاد یک مخزن GitHub شروع کنیم. سپس مطمئن شوید که اطلاعات لازم را وارد کرده و کلیک کنید مخزن ایجاد کنید:
برگشت در terminal، بیایید با مرحله بندی تمام فایل های خود شروع کنیم، تا بتوانیم آنها را به مخزن متعهد کنیم، سپس یک شاخه جدید ایجاد کنیم. main با استفاده از دستورات زیر:
$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main
پس از انجام این کار، اکنون می توانیم با استفاده از دستورات زیر به مخزن راه دور ایجاد شده فشار دهیم:
$ git remote add origin https://github.com/username/git-repo.git
$ git push -u origin main
کد ما باید زمانی که مخزن را رفرش می کنیم ظاهر شود! در حال حرکت روی، سه روش اصلی برای استقرار Netlify وجود دارد. بیایید همه روش ها را بررسی کنیم و در پایان آنها را با هم مقایسه کنیم.
استقرار برنامه در Netlify
Netlify ارائه می دهد طرح رایگان که به ما امکان می دهد با استفاده از یکی از گزینه های ذکر شده یک حساب کاربری ایجاد کنیم یا وارد شوید روی را وارد شدن page (همانطور که در تصویر زیر مشاهده می شود).
پس از ورود به سیستم، به داشبورد Netlify هدایت می‌شویم، جایی که از روش کشیدن و رها کردن و پروژه استفاده می‌کنیم. import روشی برای استقرار برنامه ما در Netlify.
با کشیدن و رها کردن، برنامه را برای Netlify اجرا کنید
با اجرای دستور زیر با ایجاد یک بیلد از برنامه خود شروع می کنیم:
$ npm run build
هنگامی که این کار با موفقیت انجام شد، پوشه ساخت ما ایجاد می‌شود که حاوی تمام فایل‌های آماده تولید است (اینها فایل‌هایی هستند که با استفاده از روش کشیدن و رها کردن در Netlify آپلود می‌کنیم).
توجه داشته باشید: این فقط برای فایل های ثابت مانند HTML، CSS و JS کار می کند. به همین دلیل است که ابتدا مجبور شدیم پروژه خود را بسازیم تا بتواند فایل های ثابت ما را تولید کند.
کلیک “اضافه کردن سایت جدید“>”استقرار دستی” روی نمای کلی Netlify ما page. این ما را به page جایی که ما فایل های استاتیک خود را رها می کنیم. ما همچنین می توانیم دسترسی داشته باشیم رها کردن page اینجا تا زمانی که ما وارد شده باشیم
گام بعدی این است که پوشه بیلد ایجاد شده را رها کنید تا فوراً در یک URL زنده مانند زیر مستقر شود:
برنامه را برای Netlify با CLI Netlify اجرا کنید
نتلیفای command-line رابط (CLI) به ما این امکان را می دهد که برنامه خود را مستقیماً از خط فرمان مستقر کنیم و همچنین استقرار پیوسته را پیکربندی کنیم تا Netlify به طور خودکار نسخه های جدید سایت ما را هنگامی که commit ها را به مخزن Git متصل خود فشار می دهیم اجرا کند.
اولین قدم نصب CLI با استفاده از دستور زیر است:
$ npm install netlify-cli -g
این دستور Netlify را به صورت جهانی نصب می کند. در صورتی که می خواهید Netlify CLI را به صورت محلی نصب کنید، دستور زیر را اجرا کنید root دایرکتوری پروژه ما:
$ npm install netlify-cli --save-dev
توجه داشته باشید: هنگامی که این با موفقیت نصب شد، می توانیم اجرا کنیم netlify در ما terminal برای دیدن لیستی از تمام دستورات Netlify و کارهایی که انجام می دهند.
اولین گام در استقرار برنامه React ما با استفاده از Netlify CLI، احراز هویت و دریافت یک نشانه دسترسی از طریق خط فرمان با اجرای دستور زیر از هر دایرکتوری است:
$ netlify login
این یک برگه مرورگر را باز می کند تا ما را احراز هویت کند و به ما اجازه دسترسی به آن را بدهد Netlify CLI:
پس از موفقیت آمیز بودن، اکنون می توانیم برنامه خود را با استفاده از deploy دستور:
$ netlify deploy
این باعث ایجاد سؤالاتی در مورد تنظیم می شود:
از آنجایی که ما قبلاً برنامه react خود را میزبانی کرده ایم روی GitHub، پس ما فقط نیاز داریم “این فهرست را به یک سایت موجود پیوند دهید”. اکنون سوال بعدی مطرح می شود:
این پوشه به مخزن GitHub که در آن کد خود را فشار دادیم پیوند داده می شود و تا زمانی که به عنوان منبع راه دور اضافه شود به طور خودکار ظاهر می شود. پس از آن، سایت ما ایجاد می شود و در یک URL پیش نویس مستقر می شود که می توانیم با کپی کردن و چسباندن URL در مرورگر آن را مشاهده کنیم:
با توجه به ما console، “اگر همه چیز خوب به نظر برسد روی URL پیش نویس خود را، آن را با نشانی اینترنتی اصلی سایت خود مستقر کنید --prod پرچم.” این به ما این امکان را می‌دهد که پیش‌نمایش هر استقراری را که انجام می‌دهیم به‌گونه‌ای که ما و تیممان می‌توانیم بدون نیاز به استقرار تغییرات در تولید ببینیم. روی سایت موجود ما
بنابراین ، برای زنده کردن برنامه ما ، دستور زیر را اجرا خواهیم کرد:
$ netlify deploy --prod
پس از اتمام این کار با موفقیت ، به ما دو URL مهم داده می شود: URL استقرار منحصر به فرد (که نشانگر URL منحصر به فرد برای هر استقرار فردی است) و URL زنده (که همیشه آخرین استقرار شما را نشان می دهد):
بنابراین ، هر بار که وب سایت خود را به روز و مستقر می کنیم ، یک URL منحصر به فرد برای آن استقرار دریافت خواهیم کرد. در اصل ، اگر چندین بار مستقر شویم ، چندین URL منحصر به فرد خواهیم داشت که می توانید از آنها برای هدایت کاربران به نسخه خاصی از برنامه خود استفاده کنید. با این حال ، URL زنده همیشه آخرین تغییرات ما را در همان URL نشان می دهد.
در حال وارد کردن پروژه به داشبورد Netlify
تاکنون دیده ایم که چگونه می توان یک برنامه React را از طریق Drag and Drop و همچنین NetLify CLI مستقر کرد. اگر ما نمی خواهیم از CLI استفاده کنیم ، می توانیم با وارد کردن پروژه از ارائه دهنده GIT شما به NetLify خود همه کارها را انجام دهیم page. این همچنین می تواند توابع مشابه NetLify CLI را انجام دهد.
اولین قدم بازدید از تیم NetLify ما خواهد بود page، سپس کلیک کنید روی “سایت جدید اضافه کنید“>”وارد کردن یک پروژه موجود” همانطور که در زیر مشاهده می شود:
پس از آن، ما را به a page جایی که می توانیم ارائه دهنده GIT را که در آن کد منبع سایت/برنامه شما میزبانی شده است انتخاب کنیم. در مورد ما، ما با GitHub رفتیم. اکنون می توانیم پس از مجاز بودن مخزن GitHub را جستجو کنیم:
پس از شناسایی پروژه، اکنون می توانیم استقرار را مدیریت کنیم. این ما را به یک می برد page در جایی که می توانیم مشخص کنیم کدام شاخه را می خواهیم مستقر کنیم ، به عنوان مثال ، اگر در حال آزمایش یک نسخه خاص هستیم. این page همچنین به ما اجازه می دهد تا دستور ساخت و مکان فایل ساخت را مشخص کنیم (این به طور خودکار توسط Netlify انجام می شود مگر اینکه بخواهیم آن را تغییر دهیم). وقتی کارمان تمام شد، روی آن کلیک می کنیم “استقرار سایت” دکمه.
وقتی استقرار ما با موفقیت انجام شد، باید یک URL زنده دریافت کنیم. ما همچنین می توانیم تنظیمات را تغییر دهیم روی نمای کلی تنظیمات page، مانند تنظیمات دامنه، مشاهده گزارش های استقرار و غیره.
مقایسه گزینه های استقرار
سه روش اول همگی در استقرار به ما کمک می‌کنند، اما دو روش آخر به ویژگی‌های دیگری مانند استقرار مداوم، استقرار شاخه‌های خاص، کنترل آزمایش‌ها و غیره کمک می‌کنند. روی.
رابط کشیدن و رها کردن زمانی مفید است که می‌خواهید فایل‌های بیلد را به سرعت بدون نیاز به فشار دادن کد خود به هر ارائه‌دهنده Git اجرا کنید. Netlify CLI و داشبورد عملکردهای مشابهی را در زیر کاپوت انجام می دهند. Netlify CLI همه دستورات را از طریق پاک می‌پذیرد terminal، بنابراین شما مجبور نخواهید بود با پیمایش غیر ضروری دست و پنجه نرم کنید و می توانید انتظار داشته باشید که کمتر از یک صفحه وب تغییر کند.
انتخاب بهترین ها به ترجیح شخصی یک توسعه دهنده بستگی دارد، زیرا بسیاری CLI را به دلیل سربار کمتر مورد نیاز ترجیح می دهند – می توانید از IDE استفاده کنید، تمیز و مختصر است و در طول زمان تغییر چندانی نمی کند.
خطای مدیریت صفحه یافت نشد
اگر از روتر استفاده می کنیم، مانند React Router، باید تغییر مسیرها را پیکربندی کنیم و قوانین را برای URL های خود بازنویسی کنیم. چون با خطای 404 مواجه می شویم page وقتی کلیک می کنیم روی هر مورد ناوبری برای تغییر page (مسیر) و مرورگر را رفرش کنید.
در نتیجه، Netlify پیکربندی تغییر مسیرها و بازنویسی قوانین را برای URL های ما بسیار آسان می کند. ما باید فایلی به نام اضافه کنیم _redirects به پوشه ساخت برنامه ما، برای اینکه این به طور خودکار اتفاق بیفتد، آن را در پوشه قرار می دهیم public پوشه قانون بازنویسی زیر باید در فایل گنجانده شود:
/* /index.html 200
مهم نیست که مرورگر چه URL را درخواست می کند، این قانون بازنویسی به جای برگرداندن یک 404، فایل index.html را ارائه می کند. بنابراین، برای مشاهده جدیدترین تغییرات در URL زنده، باید با استفاده از هر یک از روش های ترجیحی مجدداً مستقر شویم. . دیگر خطای 404 را نخواهیم دید page پس از تغییر مسیر و بازخوانی برنامه:
نتیجه
گسترش هست process انتقال کد ما از یک سیستم کنترل منبع به یک پلت فرم میزبانی که در آن ذخیره می شود و می تواند به عنوان یک برنامه کاربردی برای کاربران نهایی ارائه شود. به طور معمول، این یا در فضای ابری انجام می شود یا روی یک سرور محلی
قبل از ظهور پلتفرم های ابری مانند نتلیفای، میزبانی فقط توسط ارائه دهندگان هاست که نیاز به آپلود مجدد همه دارایی های استاتیک داشت (فایل های ایجاد شده پس از اجرا را بسازد npm run build) هر بار که تغییری ایجاد می کنید. این آپلود با استفاده از نرم افزار FTP یا سیستم مدیریت میزبانی وب مانند cPanel انجام شده است که می تواند بسیار استرس زا و فنی باشد.
در این راهنما، روش استقرار آسان برنامه React در Netlify را به سه روش مشاهده کردیم – از طریق رابط کشیدن و رها کردن، Netlify CLI و Netlify Dashboard. ما همچنین یاد گرفتیم که چگونه آن را تعمیر کنیم 404 خطایی که زمانی رخ می دهد که برنامه React شما از روتر استفاده می کند.
(برچسب‌ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1403-01-10 10:39:13
