การปรับใช้ที่ทันสมัยสำหรับไซต์ WordPress ของคุณ

หากคุณเป็นเหมือนฉัน ประสบการณ์ครั้งแรกของคุณในการส่งไฟล์ไปยังเว็บเซิร์ฟเวอร์อาจผ่านตัวจัดการไฟล์บนเว็บ เช่น cPanel หรือไคลเอนต์ File Transfer Protocol (FTP) เช่น Transmit หรือ Filezilla เชื่อมต่อกับเซิร์ฟเวอร์ ลากไฟล์ของคุณไปไว้เหนือ และรอให้การถ่ายโอนเสร็จสิ้น

ง่ายใช่มั้ย?

อย่างไรก็ตาม ทันทีที่ฉันเริ่มทำงานกับสิ่งที่ซับซ้อนกว่าไฟล์ HTML แบบสแตติก การปรับใช้โค้ดของฉันกลายเป็นเรื่องที่ซับซ้อนมากขึ้น: จะเกิดอะไรขึ้นหากฉันพลาดไฟล์ที่ผู้อื่นต้องการ หรือเครื่องหมายอัฒภาคใน Global รวมถึงและหน้าจอสีขาว ทั้งไซต์? เกิดอะไรขึ้นถ้าพลาดขั้นตอนสำคัญในระหว่างกระบวนการ?

ปัญหา "การเข้ารหัสคาวบอย" เหล่านี้จะแย่ลงเมื่อมีผู้คน สภาพแวดล้อม และการพึ่งพาอาศัยเข้ามาเกี่ยวข้องมากขึ้น เป็นผลให้มันยากขึ้นเรื่อย ๆ ที่จะเดินหน้าต่อไปในขณะที่เล่นกลชิ้นส่วนที่เคลื่อนไหวเหล่านี้ทั้งหมด ที่แย่ที่สุด การปล่อยโค้ดกลาย เป็นเรื่องใหญ่ และเป็นสาเหตุของความวิตกกังวลอย่างต่อเนื่อง

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

ติดตามการเปลี่ยนแปลงด้วยการควบคุมเวอร์ชัน

ขั้นตอนแรกในการย้ายออกจากการอัปเดตเฉพาะกิจและการเข้ารหัสคาวบอยคือการทำให้ไซต์ของคุณอยู่ภายใต้การควบคุมเวอร์ชัน โดยใช้เครื่องมือเช่น Git

การใช้การควบคุมเวอร์ชันหมายความว่าคุณจะสามารถดูว่ามีอะไรเปลี่ยนแปลงบ้าง ใครเป็นคนทำการเปลี่ยนแปลง และแม้แต่ทำงานกับการเปลี่ยนแปลงหลายชุดพร้อมกันโดยใช้สาขา ด้วยเหตุนี้ งานจะไม่ถูกเขียนทับและมีการเน้นย้ำข้อขัดแย้งระหว่างไฟล์อย่างชัดเจน

หากคุณไม่เคยทำงานกับ Git มาก่อน ก็ไม่ต้องกลัว เราได้เขียนทั้งบทนำเกี่ยวกับ Git และโพสต์เกี่ยวกับเวิร์กโฟลว์ Git ขั้นสูง

ตัดสินใจว่าจะติดตามอะไร

ขณะที่เราย้ายไซต์ของเราภายใต้การควบคุมเวอร์ชัน สิ่งที่เรา ไม่ได้ ติดตามนั้นเกือบจะมีความสำคัญพอๆ กับสิ่งที่เราทำ:

โดยทั่วไป การควบคุมเวอร์ชันมีไว้สำหรับการติดตามซอร์สโค้ด ไม่ใช่สินทรัพย์ที่สร้างโดยเครื่องมือหรือกระบวนการ ซึ่งรวมถึงสิ่งต่าง ๆ เช่น CSS และ JavaScript ที่ต่อกัน/ย่อเล็กสุด การพึ่งพาภายนอก ฯลฯ โดยรวมแล้ว เราเรียกรายการเหล่านี้ว่าเป็น สิ่งประดิษฐ์

ตัวอย่างเช่น หากคุณใช้ตัวประมวลผลล่วงหน้าของ CSS เช่น Sass ไฟล์ CSS ที่สร้างขึ้น ไม่ ควรถูกติดตามภายใต้การควบคุมเวอร์ชัน ไม่เพียงแต่จะทำซ้ำได้ง่ายเท่านั้น แต่ยังอ่านได้ยาก และเป็นสาเหตุของข้อขัดแย้งในการผสานรวมเมื่อมีนักพัฒนาหลายคนเกี่ยวข้องด้วย

เมื่อพูดถึงการพึ่งพา (ไลบรารี ปลั๊กอิน WordPress ฯลฯ) ให้ใช้ประโยชน์จากเครื่องมืออย่าง Composer และ WPackagist แทนการรวมโค้ดที่คุณไม่ต้องรับผิดชอบในที่เก็บของคุณ

นอกจากนี้ ที่เก็บ Git ไม่ควรมีสิ่งต่างๆ เช่น รหัสผ่าน คีย์ SSH ส่วนตัว หรือข้อมูลลับอื่นใดที่ถือว่าเป็น ความลับ เนื่องจากนักพัฒนาซอฟต์แวร์ทุกรายที่มีสำเนาของที่เก็บจะมีข้อมูลที่ละเอียดอ่อนนั้นอยู่ในคอมพิวเตอร์ของตน

การจัดโครงสร้างที่เก็บของคุณ

เมื่อตั้งค่าที่เก็บ Git สำหรับไซต์ WordPress หรือ WooCommerce วิธีที่ดีที่สุดคือถือว่า wp-content/ เป็นรูทของที่เก็บ เนื่องจากโดยทั่วไปคุณจะไม่แตะต้องไฟล์เหนือไดเร็กทอรีนี้

ปลั๊กอินและธีมที่ไซต์ของคุณใช้ แต่คุณไม่ได้ดูแลโค้ดสำหรับควรโหลดผ่าน Composer เนื่องจากเป็นการพึ่งพาภายนอก ในทำนองเดียวกัน ไฟล์ CSS และ JavaScript ที่ประมวลผลแล้วควรได้รับการยกเว้นผ่านไฟล์ .gitignore เนื่องจากอาร์ติแฟกต์เหล่านี้จะถูกสร้างขึ้นสำหรับเราโดยเป็นส่วนหนึ่งของกระบวนการเผยแพร่ของเรา

เรามีเทมเพลตพื้นที่เก็บข้อมูลฟรีบน GitHub เพื่อให้คุณเริ่มต้นได้

บทนำสู่ CI/CD

เมื่อพูดถึงการปรับใช้ซอฟต์แวร์ มีสองคำสำคัญที่ต้องทำความเข้าใจ: การบูรณาการแบบต่อเนื่อง (CI) และ การจัดส่งแบบต่อเนื่อง (CD)

คำสองคำนี้มีความเกี่ยวข้องกันอย่างใกล้ชิด มากจนมักเรียกรวมกันว่า “CI/CD” และเส้นทางที่การเปลี่ยนแปลงของเราดำเนินไปจึงกลายเป็น “ไปป์ไลน์ CI/CD” ไปป์ไลน์นี้มักจะอยู่ในรูปแบบต่อไปนี้:

1. สร้างการเปิดตัว: ติดตั้งการพึ่งพา (Composer, npm ฯลฯ ) จากนั้นสร้างสิ่งประดิษฐ์ (Webpack, Grunt, Sass เป็นต้น)
2. ทดสอบบิลด์: เรียกใช้การทดสอบหน่วย ตรวจสอบมาตรฐานการเข้ารหัส ดำเนินการวิเคราะห์รหัสคงที่ ฯลฯ
3. ปรับใช้รีลีสกับสภาพแวดล้อมอย่างน้อยหนึ่งสภาพแวดล้อม

การบูรณาการอย่างต่อเนื่อง เป็นกระบวนการของการทดสอบโค้ดของเราอย่างต่อเนื่องเพื่อให้แน่ใจว่าการเปลี่ยนแปลงจะไม่ทำลายฟังก์ชันที่มีอยู่ เพื่อให้การเปลี่ยนแปลงใหม่ของเรา รวมเข้า กับฐานโค้ดที่มีอยู่อย่างหมดจด ทุกครั้งที่มีการผลักดันการเปลี่ยนแปลงใหม่ การตรวจสอบจะดำเนินการเพื่อให้แน่ใจว่าเราไม่ได้ "ทำลายงานสร้าง"

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

การผสานรวมอย่างต่อเนื่องไม่ได้จำกัดเฉพาะการทดสอบหน่วย แต่เนื่องจากมีการตรวจสอบ "ปราศจากโค้ด" จำนวนหนึ่งที่สามารถเรียกใช้โดยอัตโนมัติกับโค้ดของคุณ ซึ่งรวมถึง:

• การตรวจสอบมาตรฐานการเข้ารหัส (PHP_CodeSniffer, PHP Coding Standards Fixer)
• การวิเคราะห์รหัสคงที่ (PHPStan, สดุดี)

การเรียกใช้การตรวจสอบเหล่านี้โดยอัตโนมัติทุกครั้งที่กดยังช่วยให้มั่นใจว่าโค้ดทั้งหมดถูกเรียกใช้ผ่านการตรวจสอบเดียวกัน ป้องกันไม่ให้รหัสที่ไม่ผ่านถูกปล่อยออกมา

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

การมีสคริปต์การปรับใช้ของคุณหมายความว่าคุณสามารถปรับใช้ทั้ง อย่างสม่ำเสมอ และ สม่ำเสมอ การปรับใช้ทุกครั้ง ควร ทำงานเหมือนกับก่อนหน้านี้ ด้วยเหตุนี้ ทีมของคุณสามารถปรับใช้ได้อย่างสม่ำเสมอมากขึ้นด้วยระดับความมั่นใจที่สูงขึ้นและความกังวลน้อยลงว่าจะมีใครพลาดขั้นตอนระหว่างทาง สำหรับบางทีม ไม่ใช่เรื่องแปลกที่จะปรับใช้หลายสิบ (หรือหลายร้อย) ครั้งต่อวัน!

ขึ้นอยู่กับไซต์ของคุณ คุณอาจต้องการดู "ซีดีอื่น", การ ปรับใช้อย่างต่อเนื่อง ; มันคล้ายกับการส่งแบบต่อเนื่องมาก แต่ภายใต้โมเดลนี้ ทุกการพุชไปยังสาขาจะถูกปรับใช้โดยอัตโนมัติ สิ่งนี้จะมีประสิทธิภาพอย่างมากเมื่อใช้โครงร่างการควบคุมเวอร์ชันแยก (เช่น Github Flow) แต่อาจไม่พึงปรารถนา หากคุณต้องการกำหนดเวลาเผยแพร่หน้าต่างหรือทำงานทั้งหมดในแบรนช์หลัก

การปรับใช้ไซต์ WordPress หรือ WooCommerce ด้วย CI/CD

ตอนนี้เราเข้าใจคำศัพท์พื้นฐานแล้ว มาดูการใช้งานไซต์ WordPress หรือ WooCommerce ทั่วไป:

สำหรับแบบฝึกหัดนี้ เราจะใช้ Branch ซึ่งเป็นเครื่องมือ CI/CD ที่ออกแบบตามความต้องการของนักพัฒนา WordPress จากกลุ่มเดียวกับที่อยู่เบื้องหลัง WP Pusher เหนือสิ่งอื่นใด Branch มีการสนับสนุนการติดตั้ง Nexcess ในตัว!

ในการเริ่มต้น ลงชื่อสมัครใช้ Branch โดยเชื่อมต่อบัญชี GitHub, GitLab หรือ Bitbucket จากนั้นสร้างเว็บไซต์แรกของคุณ

ต่อไป เราต้องการกำหนดค่าขั้นตอนทั้งหมดที่จำเป็นในการสร้างเว็บไซต์ของเรา Branch มี "สูตร" จำนวนมากสำหรับการดำเนินการทั่วไป (การติดตั้งการพึ่งพา Composer การรัน Webpack ฯลฯ ) แต่ยังช่วยให้เราสามารถเพิ่มขั้นตอนที่กำหนดเองจำนวนเท่าใดก็ได้

เมื่อเราสรุปขั้นตอนที่จำเป็นในการสร้างไซต์ของเราแล้ว เราสามารถไปยังขั้นตอนต่อไปของไปป์ไลน์ของเรา นั่นคือ การทดสอบ

หากคุณมีชุดทดสอบอัตโนมัติสำหรับไซต์ของคุณอยู่แล้ว คุณสามารถบอกให้ Branch รันคำสั่งใดก็ได้ที่จำเป็น แม้ว่าคุณจะยังไม่มีการทดสอบ Branch ช่วยให้คุณเพิ่ม Linting มาตรฐานการเข้ารหัสและการตรวจสอบความเข้ากันได้ได้อย่างง่ายดาย

ตอนนี้เราได้ติดตั้งการพึ่งพา สร้างทุกอย่าง และผ่านการทดสอบแล้ว ก็ถึงเวลานำโค้ดของเราไปใช้จริง!

สาขามีสูตรสำหรับการปรับใช้กับ Nexcess (เช่นเดียวกับผู้ให้บริการโฮสต์หลักรายอื่น) และการเชื่อมต่อทั้งสองแพลตฟอร์มนั้นไม่ลำบาก:

1. เลือกไซต์ของคุณในแดชบอร์ดสาขา คลิก "การตั้งค่า" จากนั้นคว้าคีย์ SSH สาธารณะของไซต์สาขาของคุณ
2. เพิ่มคีย์สาธารณะนี้ลงในรายการคีย์ภายในพอร์ทัล Nexcess

เมื่อ Branch สามารถสื่อสารกับไซต์ Nexcess ของคุณได้ เราก็สามารถเลือกสูตรการปรับใช้ "Nexcess" และกรอกรายละเอียดเล็กน้อย:

1. ชื่อโฮสต์และชื่อผู้ใช้สำหรับไซต์ (พร้อมใช้งานผ่านพอร์ทัล Nexcess บนหน้าจอ "การเข้าถึง")
2. เว็บรูทที่เราปรับใช้ หาก git repo ของเรามีไว้เพื่อใช้เป็นไดเร็กทอรี wp-content/ ค่านี้ควรเป็น "public_html/wp-content"
3. ไฟล์ที่เราต้องการปรับใช้ (โดยทั่วไปแล้ว ค่าดีฟอลต์ “*” ก็เพียงพอแล้ว)
4. สาขา git เพื่อปรับใช้กับสภาพแวดล้อมนี้

การตั้งค่า "สาขา Git" มีความสำคัญเป็นพิเศษ เนื่องจากช่วยให้คุณสามารถระบุการใช้งานที่แตกต่างกันสำหรับสาขาต่างๆ ได้ ตัวอย่างเช่น คุณอาจมีสาขา "staging" ที่ปรับใช้กับสภาพแวดล้อมการจัดเตรียมของคุณ ให้คุณทดสอบการเปลี่ยนแปลงก่อนที่จะเผยแพร่

เป็นที่น่าสังเกตว่า Branch ใช้โมเดล การปรับใช้ อย่างต่อเนื่องโดยค่าเริ่มต้น โดยที่ไปป์ไลน์ทำงานด้วยการกดแต่ละครั้งไปยังสาขาที่กำหนด หากคุณต้องการรูปแบบ การจัดส่ง แบบต่อเนื่องมากกว่า (ซึ่งต้องมีการดำเนินการโดยเจ้าหน้าที่) คุณอาจพิจารณาคงไว้ซึ่งสาขา "การผลิต" ที่จะถูกรวมเข้าด้วยกันเมื่อคุณพร้อมที่จะเผยแพร่เท่านั้น

ณ จุดนี้ Branch ควรได้รับการกำหนดค่าเพื่อสร้างและปรับใช้ที่เก็บ git ของคุณกับ Nexcess! คุณสามารถทริกเกอร์การทำให้ใช้งานได้ครั้งแรกโดยคลิกปุ่ม "เรียกใช้การปรับใช้" บนหน้า "ไปป์ไลน์" ของไซต์หรือกดไปที่ที่เก็บ Git ของคุณ

การปรับแต่งกระบวนการเผยแพร่ของคุณ

คุณลักษณะที่ดีอย่างหนึ่งของ Branch คือความสามารถในการกำหนดค่าขั้นตอนเพิ่มเติมหลังจากการปรับใช้ที่ประสบความสำเร็จ เช่น การล้างแคชออบเจ็กต์ของไซต์ของคุณโดยอัตโนมัติหลังจากการปรับใช้ สามารถทำได้โดยใช้สูตร WP-CLI ภายใต้ "อื่นๆ"

โดยทั่วไป โฮสต์และชื่อผู้ใช้จะเหมือนกับที่เราใช้ในขั้นตอนการปรับใช้ และคุณสามารถเชื่อมโยงคำสั่งต่างๆ ได้มากเท่าที่จำเป็น

บทสรุป

หากคุณยังคงดิ้นรนกับการแสดงตลกในการเขียนโค้ดคาวบอยและ/หรือการเผยแพร่ที่วิตกกังวล ให้ดูที่ Branch และทำให้การปรับใช้เป็นเรื่องง่าย!