เล่าประสบการณ์ทำเว็บสร้างรูปเรารักในหลวง
Edit: เรศมาเล่าฝั่ง Backend แล้วครับ ไปอ่านกันๆๆ
https://medium.com/@narate/เล่าประสบการณ์ทำเว็บสร้างรูปเรารักในหลวง-ฝั่ง-backend-b159aad5daf7#.rlmsongwt
—
ก่อนอื่นออกตัวครับว่า มีบล็อกครับ แต่ไม่เขียนครับ มัน out เห็นใครๆ ก็ใช้ medium กันหมดก็เลยเอาบ้าง เป็นคนได้รับอิทธิพลง่ายครับ 55
ตอนแรกกะเก็บไว้เขียนวันพรุ่งนี้ แต่ไหนๆ ก็ไหนๆ ตีเหล็กก็ต้องตีตอนร้อนๆ เขียนตอนนี้น่าจะเก็บรายละเอียดได้ดีกว่าพรุ่งนี้ เพราะเป็นคนสมองปลาทองเดี๋ยวจะลืม งั้นอัดชาเขียวแล้วเขียนเลยละกัน
เข้าเรื่อง…
ช่วงสองวันมานี้ เชื่อว่าผู้อ่านทุกคนจะต้องผ่านตากันมาบ้างกับรูปสไตล์นี้ ถูกต้องไหมครับ?
กระแสนี้เริ่มมาจากคุณ Kulthida Kul เป็นผู้ริเริ่ม แล้วผมก็เริ่มสังเกต pain ของชาวเน็ตครับ “มันหาชื่อมันไม่เจอ!” และที่สำคัญไปยิ่งกว่านั้น นั่นคือ pain ของคุณกุล เจ้าของไวรอล ที่ต้องเจียดเวลาชีวิตมาสร้างภาพเรารักในหลวงให้กับชาวเน็ตทั้งประเทศ …ครับ พูดได้เต็มปากว่าทั้งประเทศจริงๆ
อ้อ เผื่อใครไม่ทราบ คุณกุลเขียนด้วยลายมือตัวเองนะครับ ไม่ใช่ฟอนต์เด้อ นับถือใจเลยอะ เขียนไปหลายร้อยชื่อมากๆ
ผมเห็นอย่างนั้นก็เลยขออาสาทำเว็บให้ซะเลย ใครหาชื่อไม่เจอก็ทำมันซะเองเลยสิ จะไปรบกวนคุณกุลกันทำไม!
เอ่อ… คือ… ขอสารภาพครับ จริงๆ ผมไม่ได้เป็นคนคิดจะทำหรอก แต่แฟนสั่งให้ทำ ทีแรกก็ว่าจะทำให้แฟนใช้กับเพื่อนๆ เค้า แค่นั้นแหละ ที่โม้เรื่อง Pain อะไรนั้นโกหกทั้งเพ ไม่ได้พระเอกอะไรขนาดนั้น แค่เชื่อฟังแฟน ฮาาา
อ่ะต่อๆ
เทคโนโลยีที่ผมเลือกใช้ก็ไม่มีอะไรมาก แค่ html5 เท่านั้น ไม่มีฝั่ง server side ใดๆ ทั้งสิ้น เพราะรู้อยู่แล้วว่ามันอาจจะไวรอลมีคนถล่มเป็นหมื่นๆ คนแน่นอน
ผมขอไม่ลงรายละเอียดเชิงโปรแกรมมิ่งมาก อธิบายสั้นๆ เพียงแค่ว่ามี Canvas เป็นพระเอกของงาน ทำรูปไปยัด Canvas แล้ว Fill text เป็นชื่อคนใส่เพิ่มเข้าไป จากนั้นก็ทำปุ่มให้ดาวน์โหลด โดยใช้เทคนิค สร้างแท็ก <a> ขึ้นมา ใส่ href เป็น base64encode ของรูปที่ได้จาก Canvas แล้วใส่ attribute download = “filename.png” เวลาคลิกมันก็จะดาวน์โหลดได้ทันที ไม่จำเป็นต้องมีฝั่ง Server
ใครอยากรู้ละเอียดๆ ผมว่าเรามาคุยกันด้วยโค้ดน่าจะดีที่สุด
https://github.com/earthchie/we_love_the_king_generator
เมื่อได้เว็บแล้ว ก็เตรียมรับมือกับโหลดมหาศาลกันต่อ
จากประสบการณ์เดิมที่ทำเว็บ https://pogo.earthchie.com/ เอาไว้ ทำให้ทราบว่า Cloudflare นั้นช่วยไว้ได้เยอะมากๆ เคย concurrent แตะหมื่นแต่ก็ไม่สะท้านเลย ครั้งนี้ก็เลยไว้ใจมัน เอาเว็บไปโฮสไว้ที่ DigitalOcean $5 ใช้เว็บเซิร์ฟเวอร์เป็น Apache ธรรมดาๆ นี่แหละ (สารภาพว่าใช้ nginx ไม่เป็น)
คิดว่าเป็น static html อยู่แล้ว เอาไปฝากไว้ Cloudflare ได้ไม่ต้องห่วง $5 ก็พอ ชิลๆ
เท่านี้ก็เป็นอันเสร็จสิ้นกระบวนการทำเว็บ เริ่มทำราวๆ 4 ทุ่มครึ่ง เสร็จตอนเที่ยงคืน
ฝาก TeamSocial ช่วยโปรโมทให้แล้วก็เข้านอน
เช้ามา เว็บล่ม…
สาเหตุน่ะหรอครับ?
เรื่องเล่าเช้านี้
http://morning-news.bectero.com/share-of-the-day/13-Oct-2016/89112
https://twitter.com/MorningNewsTV3/status/786433813933006848
ไทยรัฐ
http://www.thairath.co.th/content/751856
ข่าวสด
https://www.khaosod.co.th/special-stories/news_48833
เนชั่น
http://www.nationtv.tv/main/content/social/378520295/
สนุกดอทคอม
http://hitech.sanook.com/1412561/
ผู้จัดการ
http://www.manager.co.th/CelebOnline/ViewNews.aspx?NewsID=9590000102917
PPTV
https://www.pptvthailand.com/news/ประเด็นร้อน/36742
ร้อยแปดบล็อก
http://www.108blog.net/long-live-the-king-facebook-profile/
ผู้หญิงถึงผู้หญิง (วินาทีที่ 55 เป็นต้นไป)
https://youtu.be/0eb_rHlK2YQ?start=55&end=170
เทคมีเอาท์ไทยแลนด์
https://www.facebook.com/takemeoutthailand/posts/1167608256666014
Kullarat
https://www.facebook.com/pageforthaiwomen/posts/1075452999216915
JobsDBTH
https://twitter.com/JobsDBTH/status/786404611854700544 1014
พอ!!
จริงๆ มีที่อื่นๆ อีกมากมาย แต่ผมไม่สามารถไล่ตามเก็บ Source มาได้ทั้งหมดจริงๆ
ขอขอบคุณสื่อทุกแขนงด้วยใจจริง มา ณ ที่นี้ด้วยครับ
กลับมาถามตัวเองใหม่ ล่มได้ไงวะ หลบหลัง Cloudflare แล้วนี่?
จนบัดนี้ก็ยังเป็นปริศนาครับ เว็บประกอบไปด้วย
- html 1 ไฟล์
- js ลิงก์มาจาก CDN ทั้งหมด ส่วนของเว็บเองก็เขียนแบบ inline ไป
- css 2 ไฟล์
- ฟอนต์ 1 ไฟล์
- รูป 3 รูป
ทุกอย่างก็น่าจะถูกแคชไว้หมด ผมไล่ดู cache settings ใน Cloudflare ก็ไม่พบอะไรผิดปกติ
ที่รู้แน่ๆ คือทราฟฟิกมาจากตัวไฟล์ index.html นั่นแหละ เป็นไฟล์เดียวที่ไม่โดน Cache งงมาก
แล้วประเด็นคือ Service ไม่ตายนะครับ htop ดู resource ทุกอย่างยังเหลือเฟือ
ที่ตายเพราะ Data Transfer เต็มครับ 1TB เกลี้ยงเลย
ผมก็เลย resize Droplet เป็นแพลน $20 เพื่อเอา Data Transfer 3TB
คืนชีพมาได้ 20 นาที เอ้า ล่มอีก
สาเหตุไม่ใช่ Data Transfer เต็มโควต้าแล้วครับ
สาเหตุคือ…
#จบไอ้สัสจบ คิดว่า DO ให้ลิงก์ 10Gbps มาตั้งนาน
ก็เลยร้องไห้ไปฟ้องทีม DomeCloud ครับ
ปรากฎว่านเรศ Clone โค้ดไปรอที่เซิร์ฟตัวใหม่แล้วเรียบร้อย อย่างกับรู้
ผมก็เลยไม่ต้องทำอะไร เอามือปาดน้ำตาแล้วชี้ DNS ไปที่เซิร์ฟตัวนู้นก็จบปัญหาเลย
และภายใต้การดูแลเซิร์ฟเวอร์ของทีม DomeCloud เราก็ได้จุดพีคที่สุดมาอยู่ที่
ในส่วนของ Pageviews นั้น ดูข้อมูลล่าสุดได้แค่ตอน 16:00 น. ครับ หลังจากนั้นดูไม่ได้อีกเลยเพราะ Google Analytic เดี้ยง ตัวเลขเยอะเกินไป
สรุปก็คือ ปล่อยเว็บไป 16 ชั่วโมง
- เกิด Pageview ขึ้นทั้งหมด 9 ล้านเพจวิว
- UIP ทั้งหมด 2.17 ล้าน UIP
- ยอดดาวน์โหลดรวมกันกว่า 4.47 ล้านครั้ง
นั่นแค่ 16 ชั่วโมง นี่ปล่อยมาครบ 24 ชั่วโมงแล้ว ผมว่า UIP น่าจะแตะ 3 ล้านไปแล้ว เอาไว้ดูสถิติได้เมื่อไหร่จะเอามาอวดครับ
— Edit ได้สถิติมาดูแล้วครับ
สรุป
- เว็บใช้เวลาพัฒนาราว 90 นาที
- รองรับคนได้ 2 ล้าน+ UIP
- รองรับ Concurrent ได้กว่า 62,000 คน
- ใช้ Server แค่ตัวเดียว
ความรู้ที่ได้จากเหตุการณ์ครั้งนี้
- น้ำขึ้นให้รีบตัก
- Viral จะเกิดขึ้นเมื่อไหร่ และเกิดขึ้นเพราะอะไร ไม่มีใครรู้ แต่สำคัญที่เรามีสติพอจะรับมือไหวหรือเปล่าเมื่อมันเกิดขึ้น
- การทำเว็บให้รับคนเข้าได้เยอะๆ นั้น ต้องเริ่มตั้งแต่การวางแผนก่อนเขียนโค้ด ควรผลักภาระมาไว้ที่ฝั่ง Client ให้มากที่สุด ส่วนฝั่ง Server ก็ต้องแคชทุกอย่างที่แคชได้ แล้วคุณจะรู้ว่าเซิร์ฟเวอร์ตัวเดียวก็รับโหลดระดับล้าน UIP ได้สบาย
น่าเสียใจครับ ภายในวันเดียวกันนั้นเอง ผมก็ได้รับการติดต่อจากพี่ๆ ที่กระปุก ให้ทำเว็บนี้อีกเวอร์ชัน เป็นเวอร์ชันถวายคำอาลัย…
จากนั้นทีมกระปุกและ DomeCloud รวมทั้ง TeamSocial ก็รวมตัวกันสร้างสรรค์เว็บใหม่ขึ้นมาใช้เวลาเพียง 3 ชั่วโมงก็เสร็จ
http://king.kapook.com/farewell/
พ่อหลวงครับ ถึงพวกผมจะไม่อยู่ในฐานะที่จะช่วยเหลืออะไรพระองค์ได้ แต่พวกผมก็ได้ทำสิ่งที่พวกผมพอจะทำได้อย่างสุดความสามารถที่สุด เพื่อเพื่อนพี่น้องชาวไทยแล้วครับ พวกผม จะทำดีตามรอยพ่อครับ
ขอบพระคุณทุกคนที่มีส่วนร่วมในการช่วยกันสร้างปรากฎการโลกสีชมพูกับผมนะครับ
- ขอบคุณพี่เอ๋อ @iwhale สำหรับโอกาสที่มีให้เสมอมา รวมถึงคำแนะนำด้านกฎหมาย
- ขอบคุณพี่โดม @dometel สำหรับโอกาส ความรู้ ความเอาใจใส่ กำลังใจ และอีกมากมาย
- ขอบคุณเรศ @enarate เพื่อนที่รู้ใจ แทบไม่ต้องพูดอะไรก็รู้งานไปซะหมด คอยสอนคอยให้คำแนะนำผมตลอด
- ขอบคุณคุณกุล Kulthida Kul เจ้าของไวรอลและเจ้าของดีไซน์
- ขอบคุณครอบครัว เสิร์ฟข้าวเสิร์ฟน้ำให้ตลอด แทบไม่ต้องลุกจากโต๊ะเลย เป็นกำลังใจที่สำคัญมากๆ เป็นผู้ Support อยู่เบื้องหลังอย่างแท้จริง
- ขอบคุณน้องปูปอ ผู้จุดประกายให้ทำเว็บ รวมถึงกำลังใจที่มีให้เสมอมา (ขออนุญาตไม่แท็ก หึง!)
- ขอบคุณทีมงาน Kapook.com ทุกคน ใครจะเชื่อว่าเพียง 3 ชั่วโมง พวกเราทำอะไรออกมาได้มากมายขนาดนี้ ขอบคุณที่สอนให้รู้จักคำว่าการทำงานอย่างมืออาชีพ
- ขอบคุณทีมงาน DomeCloud ทุกคน ที่ช่วยดูแลเซิร์ฟเวอร์ให้ เข้ามาแก้ปัญหาไวมาก 10 นาทีกู้ชีพกลับมาได้เลย หลังจากนั้นเนียนกริบ เร็วปรู้ด ไม่มีสะดุดอีกเลย
- ขอบคุณทีมงาน TeamSocial ที่โปรโมทให้จนกลายเป็น Viral ได้ขนาดนี้
ท้ายที่สุด ขอบคุณประชาชนทุกคน ที่เป็นส่วนหนึ่งกับปรากฎการณ์โลกสีชมพูครั้งนี้ พวกเราได้ทำ ทำเท่าที่ประชาชนคนหนึ่งพึงกระทำเพื่อพ่อหลวงของเราได้แล้วครับ ขอพวกเราจงเดินตามรอยพ่อต่อไป ท่านเฝ้ามองเราอยู่ เงยหน้าแล้วเดินต่อไป ชีวิตยังมีพรุ่งนี้เสมอ.
