การให้บริการเนื้อหาแบบคงที่ด้วย Nginx
ตั้งค่า Nginx เพื่อให้บริการไฟล์และทรัพยากรแบบคงที่อย่างมีประสิทธิภาพ พร้อมเพิ่มประสิทธิภาพการทำงานของแอปพลิเคชันเว็บ
การให้บริการเนื้อหาแบบคงที่ด้วย Nginx เป็นบทเรียน API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) มีบทเรียนทั้งหมด 4 บทเรียน
เนื้อหาคงที่คืออะไร
เมื่อคุณเข้าชมเว็บไซต์ คุณมักจะเห็นเนื้อหาหลายประเภทผสมกัน บางส่วนเปลี่ยนแปลงบ่อย (เช่น ฟีดข่าว) ขณะที่บางส่วนยังคงเดิม
เนื้อหาคงที่ หมายถึงไฟล์ที่ส่งให้ผู้ใช้ในสภาพเดียวกับที่จัดเก็บไว้ ไฟล์เหล่านี้จะไม่เปลี่ยนแปลงตามผู้ที่กำลังดูหรือเวลาที่เข้าชม
- ไฟล์ HTML: โครงสร้างของหน้าเว็บ
- ไฟล์ CSS: รูปแบบและการนำเสนอด้วยภาพ
- ไฟล์ JavaScript: องค์ประกอบแบบโต้ตอบและตรรกะฝั่งไคลเอ็นต์
- รูปภาพ: JPG, PNG, GIF, SVG
- แบบอักษร: แบบอักษรเว็บ เช่น TTF, WOFF
Nginx มีประสิทธิภาพสูงมากในการให้บริการไฟล์คงที่เหล่านี้
การกำหนดไดเรกทอรีราก
หากต้องการบอก Nginx ว่าควรค้นหาไฟล์คงที่ของคุณที่ใด ให้ใช้คำสั่ง root คำสั่งนี้จะระบุไดเรกทอรีพื้นฐานสำหรับเนื้อหาของเว็บไซต์
เมื่อ Nginx ได้รับคำขอ จะนำ URI ที่ร้องขอไปต่อท้ายเส้นทาง root เพื่อค้นหาไฟล์
http {
server {
listen 80;
server_name example.com;
root /var/www/mywebsite; # Nginx looks for files here
}
}บล็อก Location สำหรับเส้นทาง
บล็อก location มีความสำคัญอย่างยิ่งในการกำหนดทิศทางให้ Nginx จัดการคำขอประเภทต่าง ๆ ตามเส้นทาง URL
คุณสามารถกำหนดกฎเฉพาะสำหรับคำขอไปยัง / (รากของเว็บไซต์), /images/, /css/ หรือเส้นทางอื่นใดก็ได้
server {
# ...
root /var/www/mywebsite;
location / {
# Rules for requests to the root path
}
location /images/ {
# Rules for requests to /images/...
}
}การให้บริการหน้า HTML พื้นฐาน
ลองใช้ root และ location / ร่วมกันเพื่อให้บริการหน้า HTML อย่างง่าย โดยค่าเริ่มต้น Nginx จะค้นหา index.html หากคุณใส่คำสั่ง index
หากมีคำขอไปยัง http://localhost/ Nginx จะพยายามค้นหา /usr/share/nginx/html/index.html
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
location / {
index index.html index.htm; # Try to serve index.html or index.htm
}
}การจัดการ CSS และ JavaScript
คุณไม่จำเป็นต้องมีบล็อก location แยกสำหรับไฟล์ทุกประเภทเสมอไป หากกำหนดคำสั่ง root อย่างถูกต้อง Nginx จะให้บริการไฟล์อย่าง /css/style.css หรือ /js/app.js ได้โดยตรง
อย่างไรก็ตาม คุณสามารถใช้บล็อก location เฉพาะเพื่อควบคุมอย่างละเอียด เช่น การใช้กฎการแคชเฉพาะกับไฟล์บางประเภท
server {
listen 80;
server_name myapp.com;
root /var/www/myapp/public;
location / {
index index.html;
}
location ~* \.(css|js)$ {
# This matches .css or .js files
# Could add specific headers or caching here
add_header X-Content-Type-Options nosniff;
}
}คำสั่ง 'index'
คำสั่ง index จะบอก Nginx ว่าควรค้นหาไฟล์ใดเมื่อมีการร้องขอไดเรกทอรี ไม่ใช่ไฟล์ใดไฟล์หนึ่งโดยเฉพาะ
ตัวอย่างเช่น หากผู้ใช้ร้องขอ http://example.com/blog/ Nginx จะค้นหา index.html ภายในไดเรกทอรี blog ก่อน หากไม่พบ จะลองค้นหา index.php และไฟล์อื่น ๆ ต่อไป
server {
# ...
root /var/www/mywebsite;
location / {
index index.html index.php default.html; # Order matters!
}
}ทำความเข้าใจประเภท MIME
ประเภท MIME (Multipurpose Internet Mail Extensions) คือป้ายกำกับที่ระบุประเภทของเนื้อหาในไฟล์ เช่น text/html สำหรับเอกสาร HTML หรือ image/jpeg สำหรับรูปภาพ JPEG
เมื่อ Nginx ให้บริการไฟล์ จะส่งส่วนหัว HTTP Content-Type พร้อมประเภท MIME ที่เหมาะสมไปด้วย ซึ่งจะบอกเบราว์เซอร์ว่าควรตีความไฟล์อย่างไร
โดยทั่วไป Nginx จะมีไฟล์ mime.types ในตัว ซึ่งจับคู่นามสกุลไฟล์กับประเภท MIME ที่ถูกต้อง ดังนั้นคุณจึงแทบไม่ต้องกำหนดค่าด้วยตนเองสำหรับไฟล์คงที่ทั่วไป
การแคชเพื่อประสิทธิภาพ
เพื่อเพิ่มประสิทธิภาพ Nginx สามารถสั่งให้เบราว์เซอร์และเซิร์ฟเวอร์พร็อกซีแคชไฟล์คงที่ได้ ซึ่งหมายความว่าผู้เข้าชมซ้ำไม่จำเป็นต้องดาวน์โหลดไฟล์เดิมอีกครั้ง
คำสั่ง expires จะกำหนดส่วนหัว HTTP Expires และ Cache-Control เพื่อบอกไคลเอ็นต์ว่าสามารถจัดเก็บไฟล์ไว้ได้นานเท่าใดก่อนที่จะร้องขอไฟล์อีกครั้ง
server {
# ...
location ~* \.(jpg|jpeg|gif|png|css|js|ico)$ {
expires 30d; # Cache these files for 30 days
add_header Cache-Control "public, no-transform";
}
location ~* \.html$ {
expires 1h; # HTML files might change more often, cache for 1 hour
add_header Cache-Control "public, no-transform";
}
}ตรวจสอบความเข้าใจอย่างรวดเร็ว: เนื้อหาคงที่
พิจารณาส่วนการกำหนดค่า Nginx ต่อไปนี้:
server {
listen 80;
server_name example.com;
root /var/www/myproject/public;
location / {
index index.html;
}
location /assets/ {
expires 7d;
}
}หากมีคำขอไปยัง http://example.com/assets/image.png Nginx จะค้นหาไฟล์ image.png ที่ใด
สรุปและขั้นตอนถัดไป
ทำได้ดีมากครับ/ค่ะ! คุณได้เรียนรู้พื้นฐานการให้บริการเนื้อหาคงที่ด้วย Nginx แล้ว
- คำสั่ง
rootกำหนดไดเรกทอรีพื้นฐานสำหรับไฟล์ของคุณ - บล็อก
locationช่วยให้คุณใช้กฎเฉพาะตาม URL ของคำขอ - คำสั่ง
indexระบุไฟล์เริ่มต้นสำหรับคำขอไดเรกทอรี - Nginx จัดการประเภท MIME สำหรับไฟล์ส่วนใหญ่โดยอัตโนมัติ
- การใช้คำสั่ง
expiresช่วยเพิ่มประสิทธิภาพด้วยการเปิดใช้การแคชในเบราว์เซอร์
การให้บริการเนื้อหาคงที่อย่างมีประสิทธิภาพเป็นจุดแข็งหลักของ Nginx ทำให้เว็บแอปพลิเคชันของคุณทำงานได้รวดเร็วและตอบสนองได้ดีขึ้น ในบทเรียนถัดไป เราจะเจาะลึกการกำหนดค่า Nginx ที่ซับซ้อนยิ่งขึ้น!
เรียนรู้ API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 12
- บทเรียน
- 48
คำถามที่พบบ่อย
บทเรียน “การให้บริการเนื้อหาแบบคงที่ด้วย Nginx” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การให้บริการเนื้อหาแบบคงที่ด้วย Nginx” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) ให้อัปเกรดเป็น CoddyKit PRO คอร์ส API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การให้บริการเนื้อหาแบบคงที่ด้วย Nginx”
ตั้งค่า Nginx เพื่อให้บริการไฟล์และทรัพยากรแบบคงที่อย่างมีประสิทธิภาพ พร้อมเพิ่มประสิทธิภาพการทำงานของแอปพลิเคชันเว็บ คุณปฏิบัติ API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การให้บริการเนื้อหาแบบคงที่ด้วย Nginx” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) นี้ได้ไหม
ได้ บทเรียน API Gateway & Reverse Proxy (Nginx + Spring Cloud Gateway) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การติดตั้งและตั้งค่า Nginx
- การตั้งค่า Nginx เบื้องต้น
- การให้บริการเนื้อหาแบบคงที่ด้วย Nginx
- บล็อก Location ของ Nginx และการจับคู่คำขอ