สร้างเว็บจากที่ฝากไฟล์บนคลาว์

เปลี่ยนที่เก็บไฟล์มาเก็บเว็บอย่างง่ายกัน จบภายใน 5 นาที

ในบทความนี้เราจะมาเอาที่เก็บไฟล์บนคลาว์มาเปลี่ยนเป็นที่เก็บ static เว็บไซต์กันว่ามันจะง่าย อธิบายจบได้ภายใน 5 นาทีจริงป่าว ปะเริ่มกันเลยโม้ไว้เยอะเวลามีจำกัด

บทความนี้ต้องสร้าง Azure Storage แล้วนะถ้าใครยังไม่ได้สร้างลองไปอ่านวิธีสร้างดูจากลิงค์ด้านล่างนี้ ลองสร้างที่เก็บไฟล์กันเลย

ตั้งค่าให้เปิดเว็บได้

ให้เราเปิดตัว Storage Account ที่สร้างไว้แล้วขึ้นมา แล้วที่เมนูด้านซ้ายให้เลือก Static website แล้วก็สั่ง Enabled ได้เลยครับ

ถัดมาเขาจะถามว่าหน้าแรกของเว็บจะให้เปิดไฟล์ไหน กับ ถ้าเกิดหาไฟล์ไม่เจอจะให้มันเปิดไฟล์ไหน ซึ่งผมเลือกหน้าแรกเป็น index.html และ หน้าหาไฟล์ไม่เจอเป็น error.html ครับ เมื่อตั้งค่าเสร็จให้กดปุ่ม Save ได้เลย

พอกด Save เรียบร้อยแล้วเขาก็จะเอาสร้างลิงค์สำหรับเข้าเว็บของเราออกมาครับ ลองกดปุ่ม copy แล้วไปเปิดใน web browser ได้เลยครับ

ไม่ต้องแปลกใจครับ เพราะเรายังไม่มีไฟล์ index.html เลยไงล่ะ มันก็เลยบอกว่าหาไฟล์ไม่เจอ 404 ดังนั้นขั้นตอนถัดไปเราก็จะไปเขียนหน้าเว็บง่ายๆมาใส่นะครับ

สร้างหน้าเว็บของเรากัน

ในคราวนี้ผมก็จะสร้างหน้าเว็บง่ายๆขึ้นมา 2 หน้าคือหน้า index.html กับหน้า error.html นะครับ โดยการเปิด Visual Studio Code ขึ้นมา แล้วจิ้มสร้างไฟล์ index.html แล้วเขียนหน้าเว็บง่ายๆกันเลย

กดที่ Open Folder แล้วเลือก folder ที่จะทำงานด้วย
สร้างไฟล์ index.html และ error.html
index.html
<h1>Saladpuk.com</h1>
error.html
<h1>Sorry page not found 404</h1>

ถัดไปก็ทำการคลิกขวาที่พื้นที่ว่างๆแล้วเลือก Deploy to Static Website ได้เลยครับ แล้วก็เลือก subscription กับตัว Azure Storage account ให้ถูกตัว

ทำเรียบร้อยแล้วก็ลองกด Browse to website โลด หรือจะเข้าผ่านลิงค์ที่ copy ไว้ก็ได้ครับ

เรียบร้อยครับสวยงามตามท้องเรื่อง

ไหนลองเติมลิงค์มั่วๆเข้าไปหน่อยซิจะเกิดอะไรขึ้น

เยี่ยมเลยหน้า error.html ก็โชว์ออกมาละถ้าหา content นั้นไม่เจอ

🎯 บทสรุป

ถ้าเราอยากมีที่เก็บ static content แบบเร่งด่วนและไม่มีผลกระทบกับเซิฟเวอร์หลักเลย ผมแนะนำว่าตัว static website ของ Azure Storage แบบนี้ก็น่าจะประหยัดเวลาเราได้เยอะทีเดียวนะครับ และขั้นตอนการทำทั้งหมดก็แสนง่ายให้ฝ่าย IT หรือน้องๆฝึกงานมาช่วยสร้าง content ให้ก็ยังไหวครับ

Last updated

Was this helpful?