Redirect ทุกๆ request ไปยัง web ใหม่ด้วย Nginx

สวัสดีท่านผู้อ่านทุกท่านนะครับ บทความนี้ก็เป็นเรื่องของของการ redirect จากอีกเว็บนึง ไปยังเว็บนึง และโดยทั่วไปเเล้ว เราก็มีวิธีอยู่ 2 วิธีนะครับ ก็คือ

  1. Redirect ด้วย Web Server เป็นวิธีที่ง่าย หาตัวอย่างได้เยอะเเยะ
  2. Redirect ด้วย Programming ซึ่งปกติที่ใช้ๆกันก็จะเป็น Java Script ซึ่งอันนี้ เราสามารถใส่ลูกเล่นต่างๆนาๆเพิ่มเติมได้ เช่น ใส่ข้อความประกาศว่า ย้ายไปเว็บใหม่เเล้วนะ เเล้วมี countdown 5 วิ เเล้วค่อย redirect อะไรประมาณนี้ครับ

คราวนี้มาดูหลักการทำงาน ข้อดีข้อเสียของทั้งสองวิธีแบบละเอียดๆกัน !!

ข้อเเรก การ redirect ด้วย web server ครับ หลักการคือ เมื่อมี request เข้ามาที่เว็บเรา เจ้า web server จะส่ง 301 , 302 code (เเล้วเเต่จะตั้ง) กลับไปหา web brower หรือ user agent เเละจะเเนบ HTTP Header ตัวนึงมาด้วย ซึ่งก็คือ Location HTTP Header ครับ โดยจะมีค่าเป็น Full URL ของ Web site ที่จะไปต่อ เช่น ไปที่ https://www.paocloud.in.th เป็นต้น

ข้อดีก็คือ ไม่ว่า request จะมาในรูปเเบบอะไร ยังไงมันก็โดน redirect หมดครับ ขอเเค่ให้ hostname ตรงกันก็พอ

ส่วนข้อเสียก็คือ เราจะไม่สามารถเเสดงข้อมูลอะไรออกมาทางหน้าเว็บได้เลย เพราะ responce จาก Web server เป็น HTTP Code 301/302 เเละเเนบ Location HTTP Header มาด้วย

Redirect with Web Server

ต่อไปก็มาดูที่ข้อสองกันครับ ก็คือ การ Redirect ด้วย Programming ซึ่งในที่นี้ขอพูดถึง Java Script ล้ะกัน

หลักการก็ไม่ได้มีอะไรมากครับ เมื่อมี request เข้ามา Web server จะ responce มาด้วยหน้าเว็บอันสวยงาม เเละจะทำการ process JS ที่เราเขียนเอาไว้ ในที่นี้เราเขียนให้มัน redirect มันก็จะจัดการ redirect ไปยังหน้าเว็บใหม่ครับ

ข้อดีก็คือ เราสามารถเเสดงข้อความอะไรต่อมิอะไรให้ user รับรู้ได้ เช่น ย้ายเว็บเเล้วนะ ให้ไปเว็บใหม่ได้เลย อะไรประมาณนี้ เป็นต้น

ส่วนข้อเสียก็คือ ถ้ามี request หน้าตาเเปลกๆ จะโดน responce เป็น 404 Not Found เเทน ข้อนี้ผมขออธิบายยาวๆหน่อยล้ะกัน

Redirect with Java Script

โดยปกติ เวลาเราทำเว็บ ล้ะมีใครใช้ Search Engine เพื่อหาเว็บของเรา มันไม่ได้เเสดงเเค่ลิ๊งที่เป็น Homepage อย่างเดียวนะครับ เเต่มันจะเเสดงลิ๊งอื่นด้วย แต่โดยปกติเเล้ว เราจะวางหน้าเว็บเอาไว้เฉพาะหน้าเเรกเท่านั้น ถ้ามีใครเข้าไปยังลิ๊งอื่น ซึ่งมันเคยใช้ได้ เเต่พอย้ายเว็บเเล้ว ลิ๊งนี้มันใช้ไม่ได้ซะเเล้ว เจ้า Web Server ก็จะตอบกลับมาด้วย 404 Not found ซึ่งจะไม่เป็นผลดีกับ User ซักเท่าไรซิครับ

Link หน้าอื่นๆที่ Google ค้นเจอ

มาถึงตอนนี้ ทุกๆท่านน่าจะพอนึกภาพออกเเล้วนะครับ ว่าเเต่ละวิธีมันเป็นยังไง ???

และก็มาถึง Requirement ของผมเเล้ว ว่าจะทำยังไง ให้เเก้ปัญหาต่างๆได้

ซึ่ง Requirement ของผมก็คือ

  1. ไม่ว่าหน้าตา request เป็นเเบบไหน จะต้อง redirect กลับไปยังหน้าเเรก พร้อมเเสดงข้อความว่าย้ายเว็บเเล้ว เเละมี countdown 5 วิ จากนั้น ก็ redirect ไปยังเว็บใหม่
  2. สำหร้บ domain ของเว็บเก่า ผมจะไม่ต่ออายุเเล้ว เพราะจะใช้เว็บใหม่ไปเลย ดังนั้น มันจะสามารถ redirect ได้เเค่ 1 ปี ตามเวลาที่ผมจดโดเมนเอาไว้เท่านั้น

สาระสำคัญจะอยู่ในข้อเเรกเท่านั้นครับ จะเห็นว่า ผมจะต้องใช้ทั้งสองวิธีในการ redirect เลย ทั้งใช้ Programming ด้วย Java Script เเละการกำหนดค่าบน Web Server

ผมก็จัดการเขียนหน้าเว็บเพื่อเเจ้งข่าวสารให้ user ทราบ ว่า ย้าย domain ใหม่เเล้วนะ ล้ะก็มี countdown 5วิ ก่อนจะ redirect ไปยังเว็บใหม่ domain ใหม่ อันนี้ก็เขียนโดยการใช้ HTML,CSS,JS + รูปภาพ เเบบพื้นๆธรรมดาๆได้เลย ตามต้องการครับ

และก็มี config ที่ Web Server ซึ่งในที่นี้จะเป็น Nginx หน้าตาก็จะออกมา ประมาณนี้ครับ

server {

listen 80;

server_name www.paocloud.academy

root /mnt/efs/paocloud-academy-redirector/;

index index.html;

}

เพียงเเค่นี้ครับ ธรรมดาๆมาก ไม่มีอะไรซับซ้อน เวลาใครเข้า www.paocloud.academy มันก็จะเเสดงหน้าเว็บตามที่เราระบุ Path จาก root config เเล้ว เเละจะจัดการ redirect ต่อไปยังเว็บอื่นตามที่เขียน Java Script ไว้ครับ

แต่ชีวิตก็ไม่ได้ง่ายขนาดนั้ครับ 5555+ ยังไม่ตอบโจทย์ เเละตรง requirement ทั้งหมด เพราะถ้าเกิดมีคนเข้าเว็บ เเล้วมี url หน้าตาเเบบนี้ล้ะ

https://www.paocloud.academy/learn-more/

https://www.paocloud.academy/a/aaa/pao/112233

https://www.paocloud.academy/page?=pageid=1234

ผลที่ได้คือ Web Server มันจะไม่เข้าใจ request พวกนี้ เเละจะโดนตอบกลับเป็น 404 Not found

เเล้วจะทำยังไงล้ะทีนี้ ???

มาดูวิธีเเรกกันครับ ก็คือ การใช้ท่า try_file

สำหรับใครที่มีประสบการณ์ Deploy พวก WordPress หรือว่า Web App ที่เขียนกับ Angular , React อะไรพวกนี้ เวลาเข้าบางลิ๊ง เจ้า web server มันไม่เข้าใจ request เลย responce กลับมาเป็น 404 not found เราก็มักจะใช้ try_file ในการเเก้ปัญหากัน โดยมีหน้าตา config ประมาณนี้ครับ

location / {

try_files $uri /index.html;

}

อันข้างบนจะเป็นของพวก JS ทั้งหลาย (React , Angular)

แต่ถ้า config เเบบนี้ จะเป็นของ WordPress ครับ

location ~ \.php$ {

                try_files $uri =404;

}

แต่เนื่องจากว่า Redirector web ที่ผมเขียนเอาไว้เป็น HTML + CSS + JS ไม่ได้ใช้ PHP ก็เลยใช้ try_file แบบเเรก ซึ่ง request อะไรก็ตามที่เข้ามา Web Server ก็ Serv หน้า index.html มาให้ตลอดเเน่ๆ

แต่ๆๆๆ ก็มีปัญหานี่ซิครับ เพราะมันโหลดเฉพาะ index.html อย่างเดียวเลย ถ้าเราไป import css เข้ามา หรือมีการเเทรกรูปภาพ มันจะโหลดไม่ขึ้นครับ ดังนั้น ท่า try_file จึงไม่ work ตัดออกไป !!! 555+

ดังนั้นก็เหลือเเค่ท่าไม้ตายล้ะครับ นั่นก็คือท่า “request_filename” ครับผม ซึ่งเราจะเขียน config ประมาณนี้ครับ

location / {

if (!-e $request_filename) {

rewrite ^ / permanent;

}

}

ท่านี้เราจะใช้ในการเช็คว่า ถ้าไม่มี file นั้นๆตาม request ก็ให้จัดการ rewrite ซะ เเต่ถ้าเกิด request เเล้วมี file ก็ไม่ต้องไป rewrite ให้จัดการ serv file นั้นๆมาเลย

คือมันอาจจะดูงงๆนะครับ เอาเป็นว่า ผมจะอธิบายใหม่ เเบบยกตัวอย่าง

หน้าเว็บที่ผมใช้ทำ redirector นะครับ ผมจะเขียน CSS ยัดลงไปด้วย โดย url ของมันก็คือ

https://www.paocloud.academy/style.css

ซึ่งถ้าผมลอง curl url นี้ มันจะไม่โดน redirect นะครับ มันจะ return 200 OK กลับมา

แต่ถ้าผมยิง request ไปถามหา file css ที่ไม่มีอยู่จริง อย่างเช่น

https://www.paocloud.academy/aaa.css

เวลาผม curl ไปหามัน มันก็จะตอบกลับมาว่า return 301 เเล้ว redirect ไปหา home page ที่ผมเซทเอาไว้นั่นเอง

ด้วยท่าไม้ตายนี้ ทำให้ผมสามารถเเสดงหน้าจอเเจ้งข่าวสารว่าย้ายเว็บเเล้ว Count Down 5 วิ พอครบกำหนดก็ redirect ด้วย windows.location.href ไปยังหน้าเว็บใหม่ได้ เเละยังเเสดงหน้าตาเว็บอย่างสวยงาม เพราะ Load CSS , รูปภาพได้ด้วย

สำหรับวิธีการตั้งค่าก็ประมาณนี้นะครับ ท่านใดสงสัยส่วนไหนก็สอบถามเข้ามาได้เลย นำเทคนิคนี้ไปใช้ก็ได้นะครับ ไม่ว่ากัน อิอิ

สุดท้ายนี้ก็ขอขอบคุณทุกๆท่านที่เข้ามาอ่านนะครับ พบกันใหม่ในบทความต่อไปนะครับ สวัสดีครับ

พื้นที่โฆษณา

“AWS Basic Course” ใครอยาก Implement AWS เป็น มาลงเรียนกันได้นะครับ รายละเอียดที่นี่เลย

Network / Cloud Engineer , Instructor / Blogger รักเเละหลงไหลไปกับเทคโนโลยีต่างๆมากมาย

Leave A Reply