هی هابر!
در این مقاله، به شما خواهم گفت که چگونه با استفاده از فناوری های Yandex، یعنی به راحتی و به سادگی، یک وب سایت ثابت را میزبانی کنید ذخیره سازی شی.
در پایان، شما یک وب سایت میزبانی وب خواهید داشت که از طریق یک لینک خارجی قابل دسترسی خواهد بود.
این مقاله مفید خواهد بود اگر شما
- یک توسعه دهنده مبتدی که به تازگی برنامه نویسی را یاد می گیرد.
- توسعه دهنده ای که یک نمونه کار ساخته است و می خواهد آن را در دامنه عمومی قرار دهد تا آن را به دوستان و کارفرمایان نشان دهد.
درباره خودم
به تازگی، من در حال توسعه یک سرویس SaaS بودم، نوعی بازار که در آن مردم مربیان ورزشی را برای تمرین شخصی پیدا می کنند. از پشته خدمات وب آمازون (که از این پس AWS نامیده می شود) استفاده کرد. اما هر چه بیشتر در پروژه غوطه ور شدم، نکات ظریف بیشتری را در مورد فرآیندهای مختلف سازماندهی یک استارت آپ یاد گرفتم.
من با مشکلات زیر مواجه شدم:
- AWS پول زیادی مصرف می کرد. پس از 3 سال کار در شرکت های Enterprise، به شادی هایی مانند Docker، Kubernetes، CI/CD، استقرار سبز آبی عادت کردم، و به عنوان یک برنامه نویس مشتاق استارت آپ، می خواستم همان را پیاده سازی کنم. در نتیجه، من به این نتیجه رسیدم که AWS ماهیانه 300-400 دلار مصرف می کند. معلوم شد Kubernetes گران‌ترین، حدود 100 دلار، با حداقل دستمزد یک کلاستر و یک گره است.
PS در ابتدا نیازی به انجام این کار نیست. - بعد، با فکر کردن به جنبه حقوقی، در مورد قانون 152-FZ یاد گرفتم که چیزی شبیه به زیر می گوید: "داده های شخصی شهروندان فدراسیون روسیه باید در قلمرو فدراسیون روسیه ذخیره شود"، در غیر این صورت جریمه، که من نمی خواستم. من تصمیم گرفتم قبل از اینکه از بالا به من برسد این مسائل را حل کنم :).
الهام گرفته در مورد انتقال زیرساخت از خدمات وب آمازون به Yandex.Cloud، تصمیم گرفتم پشته Yandex را با جزئیات بیشتری مطالعه کنم.
برای من، ویژگی های کلیدی Yandex.Cloud موارد زیر بود:
- 2-3 برابر ارزانتر (طبق مقاله بالا و لیست قیمت عمومی)
- ، که آمازون بزرگ هنوز نمی تواند به آن دست یابد.
من سایر رقبای این سرویس را مطالعه کردم، اما در آن زمان Yandex برنده بود.
من در مورد خودم به شما گفته ام، تا بتوانیم به کار بپردازیم.
مرحله 0. سایت را آماده کنید
ابتدا به وب سایتی نیاز داریم که بخواهیم آن را در اینترنت قرار دهیم. از آنجایی که من یک توسعه دهنده Angular هستم، یک الگوی برنامه کاربردی SPA ساده خواهم ساخت که سپس آن را در اینترنت قرار خواهم داد.
PS چه کسی Angular را می فهمد یا از مستندات آن اطلاع دارد ، رفتن به .
بیایید Angular-CLI را برای ایجاد سایت های SPA در Angular نصب کنیم:
npm install -g @angular/cliبیایید با استفاده از دستور زیر یک برنامه Angular ایجاد کنیم:
ng new angular-habr-object-storageسپس به پوشه برنامه بروید و آن را اجرا کنید تا عملکرد آن را بررسی کنید:
cd angular-habr-object-storage
ng serve --open
برنامه ایجاد شده است، اما هنوز برای میزبانی آماده نیست. بیایید برنامه را در یک بیلد کوچک (Production) مونتاژ کنیم تا همه چیزهای غیر ضروری حذف شود و فقط فایل های لازم باقی بماند.
در Angular می توانید با دستور زیر این کار را انجام دهید:
ng build --prodدر نتیجه این دستور، یک پوشه در ریشه برنامه ظاهر شد dist با وب سایت ما
آثار. حالا بریم سراغ میزبانی.
مرحله 1.
بریم تو سایت و بر روی دکمه "اتصال" کلیک کنید.
توجه:
- برای استفاده از سرویس Yandex، ممکن است به نامه Yandex نیاز داشته باشید (اما این مطمئن نیست)
- برای برخی از عملکردها باید پول را به حساب خود در حساب شخصی خود واریز کنید (حداقل 500 روبل).
پس از ثبت نام موفق و مجوز، ما در حساب شخصی شما هستیم.
بعد در سمت چپ در منو باید سرویس "Storage Object" را پیدا کنید که ما از آن برای میزبانی سایت استفاده خواهیم کرد.
به اختصار از نظر:
- Object Storage یک ذخیره‌سازی فایل سازگار با فناوری مشابه AWS S3 آمازون است که همچنین دارای API خاص خود برای مدیریت ذخیره‌سازی از روی کد است و مانند AWS S3 می‌تواند برای میزبانی یک سایت ثابت استفاده شود.
- در Object Storage ما "سطل" (buckets) ایجاد می کنیم که فضای ذخیره سازی جداگانه ای برای فایل های ما هستند.
بیایید یکی از آنها را ایجاد کنیم. برای انجام این کار، در کنسول سرویس، روی دکمه "ایجاد سطل" کلیک کنید.
فرم ایجاد یک سطل دارای فیلدهای زیر است، بیایید آنها را مرور کنیم:
- نام سطل. برای سادگی، اجازه دهید پروژه را همان Angular بنامیم -
angular-habr-object-storage - حداکثر اندازه. ما به اندازه وزن سایتمان شرط بندی می کنیم، زیرا سایت به صورت رایگان ذخیره نمی شود و به ازای هر گیگابایت اختصاص داده شده، یک پنی زیبا به Yandex می پردازیم.
- دسترسی به اشیاء خواندنی ما آن را روی "عمومی" تنظیم می کنیم، زیرا کاربر باید هر فایل سایت استاتیک ما را دریافت کند تا بتوان طرح بندی را به درستی روی آن ترسیم کرد، اسکریپت ها را پردازش کرد و غیره.
- دسترسی به لیست اشیاء و دسترسی به تنظیمات خواندن. آن را به عنوان "محدود" بگذارید. این برای استفاده از سطل به عنوان حافظه داخلی فایل برای برنامه ها ضروری است.
- کلاس ذخیره سازی آن را به عنوان "استاندارد" بگذارید. این بدان معنی است که سایت ما به طور مکرر بازدید می شود و بنابراین فایل های تشکیل دهنده سایت بارها دانلود می شوند. به علاوه این مورد بر عملکرد و پرداخت تأثیر می گذارد (لینک را وارد کنید).
روی "ایجاد سطل" کلیک کنید و سطل ایجاد می شود.
اکنون باید سایت خود را در سطل آپلود کنیم. ساده ترین راه این است که یک پوشه در این نزدیکی باز کنید dist سایت ما را مستقیماً با استفاده از دسته ها به صفحه بکشید. این راحت تر از کلیک کردن بر روی دکمه "بارگیری اشیاء" است، زیرا در این حالت پوشه ها منتقل نمی شوند و باید آنها را به صورت دستی در ترتیب صحیح ایجاد کنید.
بنابراین، سایت در فضای ذخیره‌سازی بارگذاری می‌شود، بنابراین می‌توانیم این فرصت را برای کاربران فراهم کنیم که به عنوان یک وب‌سایت به ذخیره‌سازی دسترسی داشته باشند.
برای انجام این کار، در سمت چپ منو، روی تب "وب سایت" کلیک کنید.
در صفحه تنظیم یک سطل به عنوان یک سایت، برگه "Hosting" را انتخاب کنید. در اینجا صفحه اصلی سایت، معمولاً index.html را نشان می دهیم. اگر یک برنامه SPA دارید، احتمالاً همه خطاها در صفحه اصلی پردازش می شوند، بنابراین index.html را نیز در صفحه خطا نشان خواهیم داد.
بلافاصله می بینیم که سایت ما از طریق کدام لینک قابل دسترسی خواهد بود. ذخیره را کلیک کنید.
بعد از حدود 5 دقیقه با کلیک بر روی لینک مشاهده می کنیم که سایت ما اکنون در دسترس همه است.
با تشکر از همه کسانی که تا آخر خواندند! این اولین مقاله من است؛ من قصد دارم سایر خدمات Yandex و ادغام آنها با فن آوری های frontend و backend را بیشتر توضیح دهم.
در نظرات بنویسید که چقدر علاقه مند به یادگیری سایر خدمات Yandex یا استفاده از Angular در توسعه مدرن هستید.
منبع: www.habr.com