เฮ้ ฮับ!
ในบทความนี้ ฉันจะบอกคุณถึงวิธีการโฮสต์เว็บไซต์แบบคงที่โดยใช้เทคโนโลยี Yandex ได้อย่างง่ายดายและง่ายดาย การจัดเก็บวัตถุ.
ในที่สุด คุณจะมีเว็บไซต์ที่โฮสต์เว็บซึ่งสามารถเข้าถึงได้ผ่านลิงก์ภายนอก
บทความนี้จะมีประโยชน์หากคุณ
- นักพัฒนามือใหม่ที่เพิ่งเรียนรู้การเขียนโปรแกรม
- นักพัฒนาที่สร้างพอร์ตโฟลิโอและต้องการวางไว้ในโดเมนสาธารณะเพื่อแสดงให้เพื่อนและนายจ้างเห็น
คำแถลง
เมื่อเร็วๆ นี้ ฉันกำลังพัฒนาบริการ SaaS ซึ่งเป็นตลาดซื้อขายที่ผู้คนค้นหาผู้ฝึกสอนกีฬาสำหรับการฝึกซ้อมส่วนตัว ใช้สแต็ก Amazon Web Services (ต่อไปนี้จะเรียกว่า AWS) แต่ยิ่งฉันเจาะลึกโครงการนี้มากเท่าไหร่ ฉันก็ยิ่งได้เรียนรู้ความแตกต่างมากขึ้นเกี่ยวกับกระบวนการต่างๆ ในการจัดการสตาร์ทอัพ
ฉันพบปัญหาต่อไปนี้:
- AWS ใช้เงินเป็นจำนวนมาก หลังจากทำงานในบริษัทระดับ Enterprise มาเป็นเวลา 3 ปี ฉันคุ้นเคยกับความสุขต่างๆ เช่น Docker, Kubernetes, CI/CD, การปรับใช้สีน้ำเงินเขียว และในฐานะโปรแกรมเมอร์สตาร์ทอัพที่มีความมุ่งมั่น ฉันก็อยากจะปรับใช้สิ่งเดียวกัน ด้วยเหตุนี้ ฉันจึงได้ข้อสรุปว่า AWS ใช้เงิน 300-400 ดอลลาร์ต่อเดือน Kubernetes กลายเป็นราคาแพงที่สุด ประมาณ 100 ดอลลาร์ โดยมีค่าจ้างขั้นต่ำหนึ่งคลัสเตอร์และหนึ่งโหนด
ป.ล. ไม่จำเป็นต้องทำเช่นนี้ตั้งแต่เริ่มต้น - ต่อไป เมื่อคิดถึงด้านกฎหมาย ฉันได้เรียนรู้เกี่ยวกับกฎหมาย 152-FZ ซึ่งกล่าวไว้ดังนี้: "ข้อมูลส่วนบุคคลของพลเมืองของสหพันธรัฐรัสเซียจะต้องถูกเก็บไว้ในอาณาเขตของสหพันธรัฐรัสเซีย"มิฉะนั้นจะถูกปรับซึ่งฉันไม่ต้องการ ฉันตัดสินใจที่จะแก้ไขปัญหาเหล่านี้ก่อนที่ปัญหาจะมาถึงฉันจากด้านบน :)
ได้แรงบันดาลใจ เกี่ยวกับการย้ายโครงสร้างพื้นฐานจาก Amazon Web Services ไปยัง Yandex.Cloud ฉันตัดสินใจศึกษา Yandex Stack อย่างละเอียดมากขึ้น
สำหรับฉัน คุณสมบัติที่สำคัญของ Yandex.Cloud มีดังต่อไปนี้:
- ถูกกว่า 2-3 เท่า (ตามบทความด้านบนและรายการราคาสาธารณะ)
- ซึ่งอเมซอนผู้ยิ่งใหญ่ยังทำไม่ได้
ฉันศึกษาคู่แข่งรายอื่นของบริการนี้ แต่ในขณะนั้นยานเดกซ์ก็ชนะ
ฉันเล่าให้คุณฟังเกี่ยวกับตัวเองแล้ว เพื่อที่เราจะได้ลงมือทำธุรกิจกัน
ขั้นตอนที่ 0 เตรียมสถานที่
ขั้นแรก เราต้องการเว็บไซต์ที่เราต้องการวางบนอินเทอร์เน็ต เนื่องจากฉันเป็นนักพัฒนาเชิงมุม ฉันจะสร้างเทมเพลตแอปพลิเคชัน SPA แบบง่ายๆ ซึ่งฉันจะโพสต์บนอินเทอร์เน็ต
ป.ล. ใครเข้าใจ 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
สร้างแอปพลิเคชันแล้ว แต่ยังไม่พร้อมสำหรับการโฮสต์ เรามาประกอบ Application กันเป็น build ขนาดเล็ก (Production) เพื่อลบสิ่งที่ไม่จำเป็นออกให้หมดและเหลือไว้แต่ไฟล์ที่จำเป็นเท่านั้น
ใน Angular คุณสามารถทำได้โดยใช้คำสั่งต่อไปนี้:
ng build --prodจากคำสั่งนี้ โฟลเดอร์จึงปรากฏขึ้นที่รูทของแอปพลิเคชัน dist กับเว็บไซต์ของเรา
ได้ผล ตอนนี้เรามาดูโฮสติ้งกันดีกว่า
ขั้นตอนที่ 1
ไปที่เว็บไซต์ และคลิกที่ปุ่ม "เชื่อมต่อ"
หมายเหตุ:
- หากต้องการใช้บริการ Yandex คุณอาจต้องใช้จดหมาย Yandex (แต่นี่ไม่แน่นอน)
- สำหรับบางฟังก์ชั่น คุณจะต้องฝากเงินเข้าบัญชีของคุณในบัญชีส่วนตัวของคุณ (ขั้นต่ำ 500 รูเบิล)
หลังจากการลงทะเบียนและการอนุญาตสำเร็จ เราจะอยู่ในบัญชีส่วนตัวของคุณ
ถัดไปทางด้านซ้ายในเมนูคุณจะต้องค้นหาบริการ "Object Storage" ซึ่งเราจะใช้สำหรับโฮสต์ไซต์
ในแง่ย่อ:
- Object Storage คือพื้นที่จัดเก็บไฟล์ที่เข้ากันได้กับเทคโนโลยี AWS S3 ที่คล้ายกันของ Amazon ซึ่งมี API ของตัวเองสำหรับการจัดการพื้นที่จัดเก็บจากโค้ด และเช่นเดียวกับ AWS S3 ที่สามารถใช้เพื่อโฮสต์ไซต์แบบคงที่ได้
- ใน Object Storage เราสร้าง "บัคเก็ต" (บัคเก็ต) ซึ่งเป็นพื้นที่จัดเก็บแยกต่างหากสำหรับไฟล์ของเรา
มาสร้างหนึ่งในนั้นกันเถอะ ในการดำเนินการนี้ในคอนโซลบริการให้คลิกที่ปุ่ม "สร้างที่เก็บข้อมูล"
แบบฟอร์มสำหรับสร้างที่เก็บข้อมูลมีช่องต่อไปนี้ มาดูกัน:
- ชื่อถัง. เพื่อความง่าย ให้เราเรียกโปรเจ็กต์เหมือนกับ Angular -
angular-habr-object-storage - สูงสุด ขนาด. เราเดิมพันได้มากเท่าที่ไซต์ของเรามีน้ำหนัก เนื่องจากไซต์ไม่ได้ถูกจัดเก็บฟรี และสำหรับแต่ละกิกะไบต์ที่จัดสรร เราจะจ่ายเงินให้กับยานเดกซ์เป็นเพนนี
- การเข้าถึงเพื่ออ่านวัตถุ เราตั้งค่าเป็น "สาธารณะ" เนื่องจากผู้ใช้จะต้องได้รับแต่ละไฟล์ของไซต์คงที่ของเรา เพื่อให้สามารถวาดเค้าโครงได้อย่างถูกต้อง สามารถประมวลผลสคริปต์ได้ ฯลฯ
- เข้าถึงรายการออบเจ็กต์และเข้าถึงการตั้งค่าการอ่าน ปล่อยให้มันเป็น "จำกัด " นี่เป็นสิ่งจำเป็นเพื่อใช้บัคเก็ตเป็นที่จัดเก็บไฟล์ภายในสำหรับแอปพลิเคชัน
- ชั้นจัดเก็บข้อมูล ปล่อยให้มันเป็น "มาตรฐาน" ซึ่งหมายความว่าไซต์ของเราจะถูกเยี่ยมชมบ่อยครั้ง ดังนั้นไฟล์ที่ประกอบเป็นไซต์จะถูกดาวน์โหลดบ่อยครั้ง แถมรายการส่งผลต่อประสิทธิภาพและการชำระเงินด้วย (ใส่ลิงค์)
คลิก "สร้างที่เก็บข้อมูล" และที่เก็บข้อมูลจะถูกสร้างขึ้น
ตอนนี้เราต้องอัปโหลดไซต์ของเราไปที่ถัง วิธีที่ง่ายที่สุดคือเปิดโฟลเดอร์ใกล้เคียง dist ไซต์ของเราแล้วลากไปยังหน้าโดยตรงโดยใช้ที่จับ สะดวกกว่าการคลิกปุ่ม "โหลดวัตถุ" เพราะในกรณีนี้โฟลเดอร์จะไม่ถูกถ่ายโอนและคุณจะต้องสร้างโฟลเดอร์ด้วยตนเองตามลำดับที่ถูกต้อง
ดังนั้น ไซต์จึงถูกโหลดลงในพื้นที่เก็บข้อมูล ดังนั้นเราจึงสามารถให้โอกาสผู้ใช้ในการเข้าถึงพื้นที่เก็บข้อมูลในรูปแบบเว็บไซต์ได้
โดยคลิกที่แท็บ "เว็บไซต์" ทางด้านซ้ายของเมนู
ในหน้าการตั้งค่าบัคเก็ตเป็นไซต์ ให้เลือกแท็บ "โฮสติ้ง" ที่นี่เราระบุหน้าหลักของเว็บไซต์ ซึ่งมักจะเป็น index.html หากคุณมีแอปพลิเคชัน SPA ข้อผิดพลาดทั้งหมดอาจได้รับการประมวลผลบนหน้าหลักด้วย ดังนั้นเราจะระบุ index.html ในหน้าข้อผิดพลาดด้วย
เราจะเห็นได้ทันทีว่าลิงก์ใดที่เว็บไซต์ของเราจะสามารถเข้าถึงได้ผ่าน คลิกบันทึก
หลังจากผ่านไปประมาณ 5 นาที เมื่อคลิกลิงก์ เราก็พบว่าเว็บไซต์ของเราพร้อมให้บริการสำหรับทุกคนแล้ว
ขอบคุณทุกคนที่อ่านจนจบ! นี่เป็นบทความแรกของฉัน ฉันวางแผนที่จะอธิบายเพิ่มเติมเกี่ยวกับบริการ Yandex อื่น ๆ และการบูรณาการกับเทคโนโลยีส่วนหน้าและส่วนหลัง
เขียนความคิดเห็นว่าคุณสนใจที่จะเรียนรู้เกี่ยวกับบริการ Yandex อื่น ๆ หรือเกี่ยวกับการใช้ Angular ในการพัฒนาสมัยใหม่ในความคิดเห็นอย่างไร
ที่มา: will.com