สู่สังเวียน Netlify ยกที่ 1

ตอนที่เริ่มทำ Blog นี้จริงจัง ก็หาข้อมูลเกี่ยวกับการ Deploy Project แล้วทาง Gatsby เองก็มีพูดถึง Netlify ด้วย (สนับสนุนเลยล่ะ) ก็เลยมะ! เรามาลองกันสักตั้งสิ! ว่าจะโอเคจริงรึป่าวววว

---

ช่วงที่กำลังบันทึกอยู่ตอนนี้ Blog ก็ยังไม่นิ่งดีนะ ยังมีปรับโน้นนี่บ้าง แต่เป็นจุดที่เล็ก ๆ น้อย ๆ แล้ว ก็เลยมาเตรียมตัว deploy v.1.0.0 ไว้ก่อนดีกว่า เพราะทุกทีเวลา deploy เว็บทีไรจะชอบงงกับตัวเอง เพราะเว็บเดิมก็นาน ๆ ทีถึงจะปรับงี้ งวดนี้เลยอยากเตรียมให้ดีหน่อย เพราะน่าจะอัพเดตบ่อยกว่าปกติ (นิดนึง)

ที่เดิมของเรา

Blog ตัวเก่าจะใช้ Hosting ธรรมดา ที่ build เสร็จ ก็โยนไฟล์ผ่าน FTP ส่วนโดเมนก็จดไว้ที่เดียวกันด้วย ซึ่งราคารวมต่อปีก็คือถูกม๊ากกก ไม่ถึงพันเลยด้วยซ้ำ ใช้มานาน และไม่เคยมีปัญหาเลย

แต่ตอนนี้รู้สึกว่า อยากลองเปลี่ยนสักหน่อย ด้วยเนื้องานที่ทำอยู่ปัจจุบัน มันก็ค่อนข้างต่างจากเมื่อไม่กี่ปีก่อนมากอยู่เหมือนกัน การใช้วิธีแบบเดิมไม่มีปัญหา แต่วิธีใหม่จะช่วยซับพอร์ตและเพิ่มการเรียนรู้ของเรามากกว่า ก็เลยเลือกที่จะเปลี่ยนจากวิธีโยนไฟล์แบบเดิม ๆ มาเป็น Automated Deployment แทน

Netlify คืออะไรกันนะ

Netlify ถ้าจะสรุปอย่างสั้นก็คือ

ผู้ให้บริการ Hosting กับเว็บไซต์ที่เป็น Static Website นั้นเอง

และยิ่งกับโปรเจคที่เก็บ source files ไว้บน Version Control ด้วยแล้วก็ยิ่งใช้งานสะดวกแค่ connect account แล้วกำหนดคำสั่ง deploy จบปิ๊ง!

ตอนนี้ทาง Netlify เขาก็เพิ่ม Feature อื่น ๆ เข้ามาเพื่อช่วยให้การดูแลเว็บไซต์ง่ายขึ้นอีกเยอะ ซึ่งจะไม่ขอกล่าวถึงเพราะไม่เคยลองใช้ในส่วนนั้น

ถ้ากังวลเรื่องค่าใช้จ่ายก็สบายใจได้ เพราะเขามีเบบ Free Plan ให้ใช้ด้วย (ดีงามมม) กับโปรเจคเล็ก ๆ อย่างเราก็โล่งใจไปเปราะนึง และถ้ามีแววว่าต้องใช้ feature อื่นนอกจากปกติแล้วเราก็ค่อยพิจารณาซื้อเพิ่มทีหลังได้

Deploy ง่ายจริ๊งงง~

หลังจากสมัครเสร็จแล้วเข้ามาที่หน้า Dashboard ที่ UX/UI เขาก็สวยและใช้ง่ายเลยทีเดียว ลองจิ้มเมนูนั้น เมนูนี้ไปแล้วกับเปลี่ยนภาพ cover ซะจะได้งามขึ้นมาหน่อย (ฮา) แล้วเดียวต่อไป จขบ. ก็จะขอกล่าวเป็นลำดับเพื่อง่ายต่อการเข้าใจ และเผื่อใครอยากจะลองทำตามบ้างละเนอะ

*เนื่องจาก Blog นี้เก็บโค้ดไว้ที่ GitHub ขั้นตอนที่กล่าวถึงเลยเป็นการ Deploy ผ่าน Git เป็นหลัก

1. สร้างไซต์ใหม่

หลังจากสมัคร Account เรียบร้อยแล้วก็จะเข้าสู่หน้า Dashboard กลางที่ยังโล่งอยู่ ก็เพราะยังไม่ได้ทำอะไร ให้เริ่มสร้าง Site ใหม่โดยการกดปุ่มสีเขียว “New site from Git”

2. New site จาก Git

หน้าถัดมาจะให้เลือกว่าเราจะดึงโปรเจคมาจาก Version Control ค่ายไหน จาก 3 ค่ายฮอตฮิตอย่าง GitHub GitLab และ Bitbucket พอเลือกได้แล้วก็กดปุ่มเลย

3. เชื่อม account

หลังจากเลือกได้แล้วว่าจะใช้ account ไหน ก็จะขึ้น popup แจ้งขอการเข้าถึง account git ของเรา ให้กดปุ่ม “Authorize Netlify” ได้เลย

4. เชื่อมต่อ Repo กับ Netlify

มาถึงตรงนี้ก็ให้เลือกว่าจะเชื่อมกับ repo ไหนบ้างมีทั้งแบบเลือกหมด (All repositories) หรือเลือกแค่ repo ที่เราต้องการ (Only select repositories) พอดีว่า จขบ.ต้องการเลือกแบบเจาะจง ก็เลยเลือกเป็นแบบ Only select repositories และเลือกต่ออีกที่ว่าจะใช้ repo ไหนในการ Deploy จากนั้นก็กดปุ่ม install เลย

5. เลือก Repo สำหรับสร้างเว็บไซต์

หลังจากเชื่อมต่อ account เรากับ Netlify แล้ว ก็มาถึงส่วนสำคัญอีกส่วนคือการเลือก repo ของโปรเจคว่าเราจะใช้ repo ไหนในการสร้างไซต์นะ ก็ให้ทำการเลือกเลยจ้า

6. เซ็ตอัพ Site กับ Build

มาถึงขั้นตอน setting ลำดับสุดท้ายกันแล้ว เย้! จุดสำคัญที่อยากให้ตรวจสอบกันก็คือ Branch to Deploy ที่เราต้องการ Deploy เว็บว่าใช่ที่เราตั้งใจรึเปล่า ถัดมาจะเป็นส่วนของ build setting ที่สำหรับใส่ command ในการ build เว็บไซต์ของเราที่ช่อง Build command ที่ก็จะแตกต่างกันไปตาม framework ที่แต่ละคนใช้เนอะ พอทุกอย่างดูเข้าที่แล้วก็กดปุ่มเขียว Deploy Site โลดดด

7. Your site deploy in progress…

ตอนนี้เว็บไซต์เราก็กำลัง Deploy แล้วนะทุกโค๊นน สังเกตุได้จากตัวหลังสือสีออกส้ม ๆ เหลือง ๆ บอกไว้ว่า Site deploy inprogress (ที่มีน้องหน้าเว็บกำลังยิ้มอ่อนให้กำลังใจอยู่ข้าง ๆ ด้วย)

โดยที่ข้างล่างก็จะมี Step บอกว่าตอนนี้เว็บไซต์เรากำลังอยู่ขั้นตอนไหน และขั้นตอนต่อไปเราควรจะทำอะไรต่อ

เท่านี้เว็บไซต์ของเราก็พร้อมที่จะแสดงตัวสู่สายตาทุกคนแล้ววว Happy~

Deploy Failed!!

Site deploy faile มาได้ยังไงคะ?!! จะว่าไปก็แอบเห็นเค้าลางมาตั้งแต่ url ที่สร้างมาให้ละ sad-euclid-8ba7a3 (ฮา)

ถ้าลองดูจาก log บรรทัดแรกที่เห็น error เลยก็คือบรรทัดที่ 30 ก็จะเห็นแจ้งข้อความแบบนี้

npm ERR! code EINTEGRITY

หลังจากไปหาวิธีแก้ ซึ่งก็ได้คำแนะนำมาว่าให้เอา package-lock.json ออกจากโปรเจค แล้ว Deploy ใหม่

จขบ. เลยไปเพิ่มชื่อไฟล์ไว้ใน .gitignore แทน ไม่ให้อัพไฟล์นี้ขึ้นไป แต่ยังมีอยู่บน local จากนั้นก็ merge code แล้ว Deploy ใหม่

คำแนะนำจากกระทู้นี้ EINTEGRITY error on default Gatsby site

Happy Ending ~ ในที่สุดก็ Deploy ผ่านแล้วจ้า จะเห็นว่าตรง step เปลี่ยนจากสีเขียวที่เลข 1 มาที่เลข 2 เป็นที่เรียบร้อย ซึ่งจะเป็นขั้นตอนของการ setup domain โดยเราสามารถเข้าดูเว็บไซต์ได้จาก url ที่ทาง Netlify gen ออกมาให้ได้เลย (ลิงก์สีเขียวที่อยู่ด้านบน)

สุดท้าย แต่ยังไม่ท้ายสุด

พอเข้าหน้าเว็บได้แล้วก็รู้สึกชื่นใจขึ้นแล้ว (ฮา) แล้วเดี๋ยวขั้นตอนถัดไปที่เป็นส่วนของการ setting domain จะขอยกไปไว้นบทความถัดไปแทน (จะพยายามเข็นออกมาให้ได้ไวที่สุดนะ)

หวังว่าบทความนี้จะเป็นประโยชน์กับใครหลาย ๆ คนที่กำลังมองหาแนวทางในการใช้งานตัว Netlify ที่เหมาะทั้งเว็บไซต์ขนาดเล็ก หรือขนาดใหญ่ก็ได้ แถมยังมี feature ที่หลากหลายน่าใช้มากทีเดียว (ที่ใช้อยู่ก็ส่วนของ CD แค่นั้น) ขอเป็นอีกหนึ่งเสียงเชียร์เล็ก ๆ ให้ลองใช้งานกันดูนะ

แล้วพบกันใหม่ ~

อ้างอิง

• https://answers.netlify.com/t/eintegrity-error-on-default-gatsby-site/2250