8 سرویس رایگان میزبانی برنامه React1 min read

بنابراین شما یک برنامه React ساخته اید، اما مطمئن نیستید که چگونه یا کجا آن را میزبانی کنید. در این مقاله، ما شما را از طریق 8 سرویس میزبانی رایگان React راهنمایی می‌کنیم، به شما نشان می‌دهیم که چگونه به کار گرفته‌ایم. این برنامه React با استفاده از هر یک، و به شما بگوییم که در این فرآیند چه آموختیم.

ما برنامه خود را در Figma با استفاده از ‏Anima افزونه، که به ما اجازه می دهد تا عملکرد، رفتار پاسخگو و رسانه غنی را اضافه کنیم کد React آماده برای توسعه توسعه را برای کل رابط کاربری صادر کنید. طراحی و استقرار ما یک روز طول کشید.

کجا برنامه React خود را به صورت رایگان میزبانی کنید

به لطف ظهور چارچوب های مبتنی بر مؤلفه مانند React، تعداد فزاینده ای از راه حل های میزبانی بدون سرور وجود دارد. Amazon AWS، Microsoft Azure و Google Cloud در حال حاضر پلتفرم‌های غالب هستند. با این حال، یک تغییر رو به رشد به سمت خدمات میزبانی وب اختصاصی وجود دارد که به تلاش کمتری نیاز دارد و می‌تواند شما را در کمترین زمان راه‌اندازی کند – و بیشتر شامل CI/CD می‌شود. در اینجا 8 سرویس میزبانی رایگان برنامه React که ما آزمایش کردیم، آمده است:

1. ‏Netlify

2. ‏Vercel

3. ‏AWS Amplify

4. ‏Firebase

5. صفحات GitHub

6. صفحات GitLab

7. رندر کنید

8. موج

بیایید با جزئیات بیشتر به این سرویس‌های میزبانی رایگان برنامه React بپردازیم و نشان دهیم که چگونه یک برنامه React را با استفاده از هر کدام مستقر کرده‌ایم. 

‏Netlify

پس زمینه

نتلیفای در سال 2014 تاسیس شد و از همان ابتدا بر روی میزبانی وب سایت های ثابت تمرکز داشت. به دلیل سطح رایگان سخاوتمندانه خود، توسعه دهندگان زیادی را به خود جذب کرد. چند سال بعد، Netlify به یکی از محبوب‌ترین میزبان‌های وب سایت JAMstack و استاتیک تبدیل شد.

نحوه استفاده

1. در حالت ایده‌آل، با GitHub ثبت نام یا وارد شوید. این اطمینان می دهد که می توانید به مخازن موجود در نمایه خود دسترسی داشته باشید و آنها را به سرعت مستقر کنید.
2. پس از ورود به سیستم، روی «افزودن سایت جدید» کلیک کنید و «وارد کردن پروژه موجود» را انتخاب کنید.
3. سپس روی GitHub به عنوان ارائه دهنده خود کلیک کنید.
4. “بانک وب سایت” یا نام پروژه خود را انتخاب کنید.
5. تنظیمات استقرار را دقیق تنظیم کنید (در مورد وب سایت ما، پیش فرض ها به خوبی کار می کنند)، سپس روی “Deploy site” کلیک کنید.
6. پس از استقرار، می توانید آن را در یک URL عمومی مشاهده کنید که می توانید آن را با جهان به اشتراک بگذارید. آری

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

مزایا و معایب

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

‏Vercel

پس زمینه

‏Vercel (در ابتدا با نام Zeit شناخته می شد) در سال 2015 تاسیس شد و به سرعت به شهرت رسید. آنها نگهدارنده Next.js، یک چارچوب محبوب React برای ساخت وب سایت هستند. آنها یک سطح رایگان به وب سایت های غیر تجاری و همچنین راه هایی برای استفاده از شبکه Edge خود برای عملکردهای بدون سرور ارائه می دهند.

نحوه استفاده

1. با GitHub وارد شوید یا ثبت نام کنید.
2. روی منوی کشویی «افزودن جدید…» کلیک کرده و «پروژه» را انتخاب کنید.                                                             
3. “بانک وب سایت” یا پروژه React مورد علاقه خود را انتخاب کنید.
4. ما با پیش‌فرض‌های تنظیمات استقرار رفتیم و سپس روی «استقرار» کلیک کردیم.
5. بعد از مدتی وب سایت را راه اندازی کردیم.

اینجاست ‏URL زنده.

مزایا و معایب

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

‏AWS Amplify

پس زمینه

‏AWS مجموعه عظیمی از محصولات ابری است و Amplify به عنوان راهی آسان برای دستیابی به برخی از آنها تبلیغ می شود. با AWS Amplify، می‌توانید به سرعت برنامه‌های full-stack را روی AWS بسازید، ارسال کنید و میزبانی کنید، با انعطاف‌پذیری برای استفاده از وسعت خدمات AWS با تکامل موارد استفاده.

نحوه استفاده

1. ثبت نام کنید یا وارد AWS شوید، سپس AWS Amplify را جستجو کنید و روی «شروع به کار» کلیک کنید.
2. ‏GitHub را انتخاب کنید و آن را مجاز کنید (من فقط آن را برای مخزن “بانک وب سایت” مجاز کردم).
3. مخزن را در بخش «مخزن‌های اخیراً به‌روزرسانی شده» انتخاب کنید.
   1. در تنظیمات ساخت، ما باید آن را تغییر دهیم پایگاه دایرکتوری برای اینکه برنامه ما باشد دور مثل این: سپس، تنظیمات ساخت باید به شکل زیر باشد:
4. در مرحله بعد روی «ذخیره و استقرار» کلیک کنید.
5. پس از مدتی، وب سایت مستقر و آماده استفاده خواهد شد.

و ما زنده هستیم! اینجاست ‏URL.

مزایا و معایب

باید آن را ویرایش کنید پایگاه دایرکتوری در مشخصات استقرار – خارج از جعبه تشخیص داده نمی شود. رابط کاربری کمی بد به نظر می رسد، اما این یک اولویت شخصی است. پتانسیل بسیار زیادی برای AWS Amplify وجود دارد زیرا بسیاری از خدمات وب AWS دیگر در دسترس هستند.

‏Firebase

پس زمینه

‏Firebase یک سرویس گوگل است که بیشتر به عنوان یک پلت فرم ذخیره سازی بلادرنگ شناخته می شود. اما یک گزینه میزبانی برای وب‌سایت‌های استاتیک و میکروسرویس‌های Express.js یا API نیز دارد و از پیش‌نمایش URL برای شاخه‌هایی که تیم شما روی آن کار می‌کنند پشتیبانی می‌کند. همانند Netlify، Vercel و دیگران، محتوای مستقر شده را از طریق یک شبکه CDN ارائه می کند.

نحوه استفاده

1. نصب کنید ‏firebase-tools با ‏npm نصب -g firebase-tools.
2. وارد Firebase شوید با ورود به سیستم firebase. پس از وارد شدن به سیستم، باید پیامی مانند این را مشاهده کنید:
3. به دایرکتوری پروژه بروید و اجرا کنید ‏firebase init، باید چیزی شبیه به این را ببینید: گزینه پیکربندی فایل‌ها برای میزبانی Firebase با گسترش اختیاری GitHub Action را انتخاب کنید. سپس، می‌توانید یک پروژه مستقیماً از CLI ایجاد کنید یا از Firebase UI برای انجام آن استفاده کنید و بعداً آن را متصل کنید. ما پروژه را از خط فرمان ایجاد کردیم، و به این صورت به سؤالات به دست آمده پاسخ دادیم:                                                                      پس از آن، فایل‌های `j` firebase ساده ایجاد می‌شوند.
4. سپس، اجرا کنید استقرار firebase تا در واقع فایل ها را از دوردایرکتوری اگر دایرکتوری وجود ندارد، حتما اجرا کنید ‏npm اجرای ساخت اول برای تولید فایل را استقرار firebase دستور باید خروجی مشابه مثال زیر تولید کند:

حالا شما می توانید وب سایت را مشاهده کنید در URL ارائه شده است. آری 

مزایا و معایب

‏Firebase نسبتاً ساده است، اما وقتی آن را در پروژه خود راه اندازی می کنید، سؤالاتی که باید به آنها پاسخ دهید کمی گیج کننده هستند. خوشبختانه، در بخش بالا به آنها پاسخ دادیم، اما قبل از ادامه، نیاز به درک ویژگی‌های واقعی Firebase دارند. به غیر از آن، Firebase سریع استقرار می یابد و می تواند یک URL ایجاد کند که در آن می توانید فایل های مستقر شده را پیش نمایش کنید. همچنین می‌توانید به راحتی آن را با استقرار اکشن GitHub با CLI خودکار کنید، که مرتب است.

صفحات GitHub

پس زمینه

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

نحوه استفاده

لطفا توجه داشته باشید که باید آن را ویرایش کنید ‏App.jsx جایی که ما تماس می گیریم روتر و اضافه کنید نام پایه به آن برای مطابقت با نام مخزن. پس اینجوری ‏App.jsx باید نگاه کرد:                                                                                        ما باید تغییر دهیم نام پایه زیرا صفحات GitHub وب سایت را در یک URL از این شکل «https://GITHUB_USERNAME.gitlab.io/REPO_NAME» مستقر خواهند کرد. وب سایت بدون نام پایه تنظیم شده برای آن به درستی کار نخواهد کرد ‏react-router-dom.

1. بعد از تغییر کد باید نصب کنیم صفحات gh بسته با:
2. و a اضافه کنید از قبل مستقر کنید و الف استقرار اسکریپت به ‏package.json:
3. سپس، ما به سادگی اجرا می کنیم ‏npm اجرا شود. باعث خواهد شد ‏npm اجرای ساخت و استفاده خواهد کرد صفحات gh برای انتشار مطالب دور به یک شعبه جداگانه در GitHub نامیده می شود صفحات gh.
4. در نهایت بررسی کنید که آیا صفحات gh برای صفحات GitHub مانند زیر استفاده می شود:

اینجاست ‏URL زنده.

مزایا و معایب

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

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

صفحات GitLab

پس زمینه

مانند GitHub، GitLab راه حل میزبانی مخصوص به خود را دارد و آنها آن را GitLab Pages می نامند. من باید آن را به آنها بدهم، راه اندازی یک استقرار مداوم برای صفحات GitLab راحت تر از صفحات GitHub است.

نحوه استفاده

1. ثبت نام کنید یا وارد GitLab شوید
2. اگر قبلاً آن را در آنجا ندارید، یک مخزن به GitLab اضافه کنید. شما می توانید اونی که اونجا اضافه کردم چنگال کن 
   مشابه صفحات GitHub، باید آن را ویرایش کنید ‏App.jsx جایی که ما تماس می گیریم روتر و اضافه کنید  نام پایه به آن برای مطابقت با نام مخزن. بنابراین این تغییر نهایی است:                                                               ما باید تغییر دهیم نام پایه زیرا صفحات GitLab وب سایت را در یک URL از این فرم مستقر خواهند کرد: ‏https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. وب سایت بدون نام پایه تنظیم شده برای آن به درستی کار نخواهد کرد ‏react-router-dom.
3. هنگامی که پروژه را ویرایش کردید و به GitLab منتقل کردید، به تنظیمات > صفحات بروید و با یک جادوگر چهار مرحله ای برای استقرار مخزن در صفحات GitLab استقبال خواهید کرد. 
4. اولین قدم در ویزارد وارد کردن تصویر ساخت است. ما از Node.js LTS استفاده خواهیم کرد.
5. در مرحله بعد دستور pre-build را وارد می کنیم. را ‏npm ci در اینجا کافی خواهد بود
6. حالا برای مرحله ساخت. باید پاس کنیم —disist-dir public زیرا صفحات GitLab انتظار دارند که وب سایت در آن ساخته شده باشد عمومی دایرکتوری شما نمی توانید با هیچ دایرکتوری دیگری فرار کنید، متاسفم.
7. جدید تولید شده را متعهد کنید .gitlab-ci.yml فایلی که به GitLab می گوید که چگونه وب سایت شما را راه اندازی کند.
8. اکنون به بخش CI/CD -> Pipelines مخزن بروید و عملکرد خط لوله جدید اضافه شده را مشاهده کنید.
9. پس از مدتی، کار خط لوله به پایان می رسد و وب سایت در صفحات GitLab مستقر می شود.

اینجاست نتیجه

مزایا و معایب

بسته‌ها به کندی نصب می‌شوند و باید کد اضافی اضافه کنید تا کار کند، اما جادوگر بسیار بصری است و تنها چهار مرحله برای استقرار دارد.

رندر کنید

پس زمینه

‏Render یک بچه جدید در بلوک است که در سال 2019 راه اندازی شده است. سعی می کند نحوه استفاده از خدمات خود (از جمله وب سایت های ثابت) را مختل کند. تا اینجای کار، آنها خوب عمل می کنند و تعداد آنها در حال افزایش است.

نحوه استفاده

1. ثبت نام کنید یا وارد Render شوید.
2. با فشار دادن دکمه “جدید” و انتخاب “سایت ثابت” یک وب سایت ثابت جدید ایجاد کنید.
3. مخزن مورد نظر برای استقرار را انتخاب کنید.
4. نگه دارید نخ؛ ساخت نخ دستور build در تنظیمات ساخت. متاسفانه باهاش کار نمیکنه ‏npm ci; npm اجرای ساخت مانند سایر خدمات “Publish directory” را به تغییر دهید دور و روی «ایجاد سایت استاتیک» کلیک کنید.
5. پس از مدتی، Render کد را مستقر می کند.

اینجاست ‏URL زنده از Render.

مزایا و معایب

این واقعا سریع است، اما برای پروژه ما با دستورات «npm ci» و «npm run build» به خوبی کار نمی کند. به نظر می رسد فقط «نخ» کار می کند.

موج

پس زمینه

‏Surge مدتی است که وجود دارد. در سمت راست خفاش، استفاده از سرویس آنها ساده است و برای استقرار وب سایت استاتیک شما فقط یک یا دو دستور لازم است. این برنامه رایگان است، اما یک برنامه پولی 30 دلار در ماه ارائه می دهد. رواقی بودن ابزار چیزی است که باعث درخشش آن می شود. نیازی به راه اندازی پیچیده نیست، فقط «surge» را نصب کنید و آن را با «surge» اجرا کنید.

نحوه استفاده

1. برای تهیه، اجرا کنید ‏npm اجرای ساخت برای تولید فایل های استاتیک در داخل دور دایرکتوری را موج از آنها برای استقرار استفاده خواهد کرد.
2. اجرا کنید ‏npm نصب –global surge
3. سپس، اجرا کنید موج.

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

سپس، از شما خواسته می‌شود که «پروژه» را وارد کنید، که باید مسیر رسیدن به آن باشد دور دایرکتوری شما فقط می توانید اضافه کنید دور به مسیری که در اختیار شما قرار می‌گیرد، اگر در مخزن‌ای که در حال استقرار آن هستید، جهش شدید داشته باشید.

سپس، URL آینده وب سایت خود را وارد کنید. چیزی منحصر به فرد را امتحان کنید زیرا چیست موج پیشنهاد شده برای من کار نکرد

پس از ورودی URL، موج مطالب را از دور به URL مشخص شده. این چیزی است که من دریافت کردم:

مزایا و معایب

این سریع و ساده است و نیازی به استفاده از یک رابط جداگانه ندارد – اما URL موجود را برای برنامه شما پیشنهاد نمی کند.

زمان استقرار برای هر سرویس میزبانی

3 سرویس میزبانی رایگان React ما

1. ‏Netlify
2. ‏Vercel
3. موج

خوراکی های کلیدی

پس از آزمایش هر یک از این سرویس‌های میزبانی رایگان برنامه React، ما فکر می‌کنیم Netlify بهترین از این دسته است. این استقرار سریع با بسیاری از ویژگی هایی که ممکن است به آن نیاز داشته باشید را ارائه می دهد. درست پس از آن Vercel است که دارای ویژگی های زیادی است و پس از استقرار اولیه نسبتاً سریع است. سپس، ما Surge را داریم که یک ابزار استقرار حداقلی است که در صورت تصمیم به ارتقا، می تواند نسبتاً ارزان باشد.

ساخت ظاهری خود را خودکار کنید و برنامه خود را 10 برابر سریعتر ارسال کنید. بیشتر بدانید.