Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
83 lines (51 sloc) 7.02 KB
description
เปลี่ยนที่เก็บไฟล์มาเก็บเว็บอย่างง่ายกัน จบภายใน 5 นาที

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

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

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

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

ให้เราเปิดตัว 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

{% code-tabs %} {% code-tabs-item title="index.html" %}

<h1>Saladpuk.com</h1>

{% endcode-tabs-item %} {% endcode-tabs %}

{% code-tabs %} {% code-tabs-item title="error.html" %}

<h1>Sorry page not found 404</h1>

{% endcode-tabs-item %} {% endcode-tabs %}

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

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

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

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

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

🎯 บทสรุป

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

{% hint style="success" %} การเอาไปใช้งานจริง
ในสถานะการจริงเวลาที่เซิฟเวอร์ต้องรับโหลดหนักๆเช่นช่วงสิ้นเดือนไรงี้ ก็อาจทำให้ server ล่มได้ง่ายๆเลย แต่ถ้าเรามี content ที่ไม่ได้เปลี่ยนบ่อย เช่น ทั้งวันข้อมูลตัวนี้ไม่เปลี่ยนเลยจนกว่าจะถึงเที่ยงคืนไรงี้ แทนที่เราจะให้ข้อมูลแบบนี้มาโหลดที่เซิฟเวอร์ เราก็เปลี่ยนมาเก็บไว้ที่ Azure Storage แบบนี้แทนก็ได้ ซึ่งเจ้า Storage นี้มันถูกออกแบบให้อ่านข้อมูลหลัก TB ได้แบบชิวๆเลยครับ {% endhint %}

You can’t perform that action at this time.