כיצד לארח אתר סטטי באמצעות Yandex.Cloud Object Storage

היי הבר!

במאמר זה, אספר לכם כיצד לארח בקלות ובפשטות אתר סטטי באמצעות טכנולוגיות Yandex, כלומר אחסון אובייקטים.

בסופו של דבר, יהיה לך אתר אינטרנט מתארח שיהיה נגיש באמצעות קישור חיצוני.

מאמר זה יהיה שימושי אם אתה

• מפתח מתחיל שרק לומד לתכנת;
• מפתח שהכין תיק עבודות ורוצה למקם אותו ברשות הרבים כדי להראות אותו לחברים ולמעסיקים.

על עצמי

לאחרונה פיתחתי שירות SaaS, מעין שוק שבו אנשים מוצאים מאמני ספורט לאימון אישי. השתמש בערימת שירותי האינטרנט של אמזון (להלן AWS). אבל ככל שצללתי עמוק יותר לתוך הפרויקט, כך למדתי יותר ניואנסים על התהליכים השונים של ארגון סטארט-אפ.

נתקלתי בבעיות הבאות:

• AWS צרכה הרבה כסף. לאחר שעבדתי 3 שנים בחברות Enterprise, התרגלתי להנאות כמו Docker, Kubernetes, CI/CD, פריסה כחולה ירוקה, וכמתכנת סטארט-אפ שואף, רציתי ליישם את אותו הדבר. כתוצאה מכך, הגעתי למסקנה ש-AWS צרכה 300-400 דולר בחודש. Kubernetes התברר כיקר ביותר, כ-100 דולר, עם שכר מינימום של אשכול אחד וצומת אחד.
  נ.ב. אין צורך לעשות זאת בהתחלה.
• לאחר מכן, כשחשבתי על הצד המשפטי, למדתי על חוק 152-FZ, שאומר משהו כמו הבא: "נתונים אישיים של אזרחי הפדרציה הרוסית חייבים להיות מאוחסנים בשטח הפדרציה הרוסית", אחרת קנסות, שלא רציתי. החלטתי להתמודד עם הנושאים האלה לפני שזה יגיע אליי מלמעלה :).

בהשראה מאמרים לגבי העברת תשתית משירותי האינטרנט של אמזון ל-Yandex.Cloud, החלטתי ללמוד את ערימת Yandex ביתר פירוט.

עבורי, תכונות המפתח של Yandex.Cloud היו הבאות:

• זול פי 2-3 (לפי המאמר למעלה ומחירונים ציבוריים)
• אחסון נתונים אישיים של משתמשים בשטח הפדרציה הרוסית, שאמזון הגדול עדיין לא יכול להשיג.

למדתי מתחרים אחרים של השירות הזה, אבל באותה תקופה Yandex ניצחה.

סיפרתי לך על עצמי, כדי שנוכל להתחיל בעניינים.

שלב 0. הכן את האתר

ראשית, אנו צריכים אתר אינטרנט שאנו רוצים למקם באינטרנט. מכיוון שאני מפתח Angular, אני אכין תבנית אפליקציה פשוטה של ​​SPA, אותה אפרסם אחר כך באינטרנט.

נ.ב. מי שמבין ב-Angular או יודע על התיעוד שלה https://angular.io/guide/setup-local, לך ל שלב 1.

בואו נתקין את Angular-CLI כדי ליצור אתרי ספא ב-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.

בוא נלך לאתר https://console.cloud.yandex.ru/ ולחץ על כפתור "התחבר".

הערה:

• כדי להשתמש בשירות Yandex, ייתכן שתזדקק לדואר Yandex (אבל זה לא בטוח)
• עבור פונקציות מסוימות תצטרך להפקיד כסף לחשבון שלך בחשבונך האישי (מינימום 500 רובל).

לאחר רישום ואישור מוצלחים, אנו נמצאים בחשבונך האישי.

בהמשך בצד שמאל בתפריט, עליך למצוא את שירות "אחסון חפצים", בו נשתמש לאירוח האתר.

בקצרה במונחים:

• אחסון אובייקטים הוא אחסון קבצים התואם לטכנולוגיית AWS S3 הדומה של אמזון, שיש לה גם API משלה לניהול אחסון מקוד ובדומה ל-AWS S3, ניתן להשתמש בה לארח אתר סטטי.
• ב-Object Storage אנו יוצרים "דליים" (דליים), שהם אזורי אחסון נפרדים לקבצים שלנו.

בואו ניצור אחד מהם. כדי לעשות זאת, במסוף השירות, לחץ על כפתור "צור דלי".

הטופס ליצירת דלי מכיל את השדות הבאים, בוא נעבור עליהם:

• שם הדלי. לשם הפשטות, בואו נקרא לפרויקט זהה ל-Angular - angular-habr-object-storage
• מקסימום גודל. אנחנו מהמרים כמה שהאתר שלנו שוקל, מכיוון שהאתר אינו מאוחסן בחינם ועל כל גיגה-בייט שהוקצה, נשלם ל-Yandex אגורה יפה.
• גישה לקריאה של אובייקטים. הגדרנו אותו ל"ציבורי", מכיוון שהמשתמש חייב לקבל כל קובץ של האתר הסטטי שלנו כדי שניתן יהיה לצייר בו את הפריסה בצורה נכונה, לעבד סקריפטים וכו'.
• גישה לרשימת האובייקטים והגדרות גישה לקריאה. השאר את זה כ"מוגבל". זה הכרחי כדי להשתמש בדלי כאחסון קבצים פנימי עבור יישומים.
• שיעור אחסון. השאר את זה בתור "סטנדרטי". המשמעות היא שהאתר שלנו יבקר בתדירות גבוהה, ולכן הקבצים המרכיבים את האתר יורדו בתדירות גבוהה. בנוסף, הפריט משפיע על הביצועים והתשלום (הכנס קישור).

לחץ על "צור דלי" והדלי נוצר.

עכשיו אנחנו צריכים להעלות את האתר שלנו לדלי. הדרך הקלה ביותר היא לפתוח תיקיה בקרבת מקום dist האתר שלנו וגרור אותו ישירות אל הדף באמצעות נקודות אחיזה. זה נוח יותר מאשר לחיצה על כפתור "טען אובייקטים", מכיוון שבמקרה זה התיקיות אינן מועברות ותצטרך ליצור אותן באופן ידני ברצף הנכון.

אז האתר נטען לאחסון, כך שנוכל לספק למשתמשים את ההזדמנות לגשת לאחסון כאתר אינטרנט.
Для этого слева в меню жмем на вкладку "Веб-сайт".

בדף להגדרת דלי כאתר, בחר בכרטיסייה "אירוח". כאן אנו מציינים את העמוד הראשי של האתר, בדרך כלל index.html. אם יש לך אפליקציית SPA, אז כנראה שכל השגיאות מעובדות גם בעמוד הראשי, אז נציין גם את index.html בדף השגיאה.

אנו רואים מיד באיזה קישור האתר שלנו יהיה נגיש דרכו. לחץ על שמור.

לאחר כ-5 דקות, לחיצה על הקישור, אנו רואים שהאתר שלנו זמין כעת לכולם.

תודה לכל מי שקרא עד הסוף! זהו המאמר הראשון שלי; אני מתכנן להמשיך לתאר שירותים אחרים של Yandex והשילוב שלהם עם טכנולוגיות חזית וגב.

כתוב בהערות עד כמה אתה מעוניין ללמוד על שירותי Yandex אחרים או על השימוש ב-Angular בפיתוח מודרני.

מקור: www.habr.com