كيفية استضافة موقع ثابت باستخدام Yandex.Cloud Object Storage

يا هبر!

في هذه المقالة، سأخبرك بكيفية استضافة موقع ويب ثابت بسهولة وبساطة باستخدام تقنيات Yandex، وهي تخزين الكائنات.

في النهاية، سيكون لديك موقع ويب مستضاف على الويب ويمكن الوصول إليه عبر رابط خارجي.

هذه المقالة ستكون مفيدة إذا كنت

• مطور مبتدئ يتعلم البرمجة للتو؛
• المطور الذي أنشأ محفظة ويريد وضعها في الملكية العامة لعرضها على الأصدقاء وأصحاب العمل.

معلومات عني

لقد قمت مؤخرًا بتطوير خدمة SaaS، وهي نوع من السوق حيث يجد الأشخاص مدربين رياضيين للتدريب الشخصي. تم استخدام مكدس Amazon Web Services (المشار إليه فيما يلي باسم AWS). لكن كلما تعمقت في المشروع، كلما تعلمت المزيد من الفروق الدقيقة حول العمليات المختلفة لتنظيم الشركة الناشئة.

لقد واجهت المشاكل التالية:

• كانت AWS تستهلك الكثير من المال. بعد أن عملت لمدة 3 سنوات في شركات المؤسسات، اعتدت على أشياء مثل Docker وKubernetes وCI/CD والنشر الأزرق والأخضر، وباعتباري مبرمجًا طموحًا في مجال بدء التشغيل، أردت تنفيذ الشيء نفسه. ونتيجة لذلك، توصلت إلى استنتاج مفاده أن AWS تستهلك ما بين 300 إلى 400 دولار شهريًا. تبين أن Kubernetes هي الأغلى، بحوالي 100 دولار، مع الحد الأدنى للأجور لمجموعة واحدة وعقدة واحدة.
  ملاحظة: ليست هناك حاجة للقيام بذلك في البداية.
• بعد ذلك، بالتفكير في الجانب القانوني، تعرفت على القانون 152-FZ، الذي ينص على ما يلي: "يجب تخزين البيانات الشخصية لمواطني الاتحاد الروسي على أراضي الاتحاد الروسي"وإلا الغرامات التي لم أكن أريدها. قررت معالجة هذه المشكلات قبل أن تصل إلي من الأعلى :).

ربما مقالة - سلعة حول ترحيل البنية التحتية من Amazon Web Services إلى Yandex.Cloud، قررت دراسة مكدس Yandex بمزيد من التفاصيل.

بالنسبة لي، كانت الميزات الرئيسية لبرنامج Yandex.Cloud هي التالية:

• أرخص 2-3 مرات (حسب المقالة أعلاه وقوائم الأسعار العامة)
• تخزين البيانات الشخصية للمستخدمين على أراضي الاتحاد الروسيوهو ما لا تستطيع منطقة الأمازون العظيمة تحقيقه بعد.

لقد درست المنافسين الآخرين لهذه الخدمة، ولكن في ذلك الوقت كان ياندكس هو الفائز.

لقد أخبرتك عن نفسي حتى نتمكن من البدء في العمل.

الخطوة 0. قم بإعداد الموقع

أولاً، نحتاج إلى موقع ويب نريد وضعه على الإنترنت. نظرًا لأنني مطور Angular، فسوف أقوم بإنشاء قالب تطبيق SPA بسيط، ثم سأقوم بنشره على الإنترنت.

ملحوظة: من يفهم Angular أو يعرف وثائقها https://angular.io/guide/setup-local، اذهب إلى الخطوة 1.

لنقم بتثبيت Angular-CLI لإنشاء مواقع SPA في Angular:

npm install -g @angular/cli

لنقم بإنشاء تطبيق Angular باستخدام الأمر التالي:

ng new angular-habr-object-storage

بعد ذلك، انتقل إلى مجلد التطبيق وقم بتشغيله للتحقق من وظائفه:

cd angular-habr-object-storage
ng serve --open

تم إنشاء التطبيق، ولكنه ليس جاهزًا بعد للاستضافة. لنقم بتجميع التطبيق في بنية صغيرة (إنتاج) لإزالة كل الأشياء غير الضرورية وترك الملفات الضرورية فقط.
في Angular يمكنك القيام بذلك باستخدام الأمر التالي:

ng build --prod

ونتيجة لهذا الأمر، ظهر مجلد في جذر التطبيق dist مع موقعنا.

يعمل. الآن دعنا ننتقل إلى الاستضافة.

الخطوة 1.

دعنا نذهب إلى الموقع https://console.cloud.yandex.ru/ وانقر على زر "الاتصال".

ملاحظة:

• لاستخدام خدمة Yandex، قد تحتاج إلى بريد Yandex (لكن هذا غير مؤكد)
• بالنسبة لبعض الوظائف، سيتعين عليك إيداع الأموال في حسابك في حسابك الشخصي (الحد الأدنى 500 روبل).

بعد التسجيل والترخيص الناجح، نحن في حسابك الشخصي.

بعد ذلك، على اليسار في القائمة، تحتاج إلى العثور على خدمة "تخزين الكائنات"، والتي سنستخدمها لاستضافة الموقع.

باختصار في المصطلحات:

• تخزين الكائنات هو تخزين ملفات متوافق مع تقنية AWS S3 المشابهة من Amazon، والتي لديها أيضًا واجهة برمجة تطبيقات خاصة بها لإدارة التخزين من التعليمات البرمجية، ويمكن استخدامها، مثل AWS S3، لاستضافة موقع ثابت.
• في تخزين الكائنات نقوم بإنشاء "دلاء" (دلاء)، وهي مناطق تخزين منفصلة لملفاتنا.

دعونا إنشاء واحد منهم. للقيام بذلك، في وحدة تحكم الخدمة، انقر فوق الزر "إنشاء مجموعة".

يحتوي نموذج إنشاء المجموعة على الحقول التالية، فلنستعرضها:

• اسم دلو. للتبسيط، دعنا نسمي المشروع نفس اسم Angular - angular-habr-object-storage
• الأعلى. مقاس. نحن نراهن بقدر وزن موقعنا، نظرًا لأنه لا يتم تخزين الموقع مجانًا ولكل جيجابايت مخصصة، سندفع لـ Yandex فلسًا واحدًا.
• الوصول إلى قراءة الكائنات. لقد قمنا بتعيينه على "عام"، حيث يجب على المستخدم أن يتلقى كل ملف من موقعنا الثابت حتى يمكن رسم التخطيط عليه بشكل صحيح، ويمكن معالجة البرامج النصية، وما إلى ذلك.
• الوصول إلى قائمة الكائنات والوصول إلى إعدادات القراءة. اتركها "محدودة". يعد ذلك ضروريًا لاستخدام المجموعة كمخزن داخلي للملفات للتطبيقات.
• فئة التخزين. اتركه كـ "قياسي". وهذا يعني أنه سيتم زيارة موقعنا بشكل متكرر، وبالتالي سيتم تنزيل الملفات التي يتكون منها الموقع بشكل متكرر. بالإضافة إلى أن العنصر يؤثر على الأداء والدفع (أدخل الرابط).

انقر فوق "إنشاء مجموعة" وسيتم إنشاء المجموعة.

الآن نحن بحاجة إلى تحميل موقعنا على دلو. أسهل طريقة هي فتح مجلد قريب dist موقعنا واسحبه مباشرة إلى الصفحة باستخدام المقابض. يعد هذا أكثر ملاءمة من النقر فوق الزر "تحميل الكائنات"، لأنه في هذه الحالة لا يتم نقل المجلدات وسيتعين عليك إنشاؤها يدويًا بالتسلسل الصحيح.

لذلك، يتم تحميل الموقع في وحدة التخزين، حتى نتمكن من تزويد المستخدمين بفرصة الوصول إلى وحدة التخزين كموقع ويب.
للقيام بذلك، على الجانب الأيسر من القائمة، انقر فوق علامة التبويب "موقع الويب".

في صفحة إعداد المجموعة كموقع، حدد علامة التبويب "الاستضافة". نشير هنا إلى الصفحة الرئيسية للموقع، وهي عادة ملف Index.html. إذا كان لديك تطبيق SPA، فمن المحتمل أن تتم معالجة جميع الأخطاء أيضًا على الصفحة الرئيسية، لذلك سنشير أيضًا إلى ملف Index.html في صفحة الخطأ.

نرى على الفور الرابط الذي سيتم الوصول إلى موقعنا من خلاله. انقر فوق حفظ.

وبعد حوالي 5 دقائق من الضغط على الرابط نرى أن موقعنا أصبح الآن متاحًا للجميع.

شكرا لكل من قرأ حتى النهاية! هذه هي مقالتي الأولى، وأخطط لتقديم وصف إضافي لخدمات Yandex الأخرى وتكاملها مع تقنيات الواجهة الأمامية والخلفية.

اكتب في التعليقات مدى اهتمامك بالتعرف على خدمات Yandex الأخرى أو استخدام Angular في التطوير الحديث.

المصدر: www.habr.com