ตัวอย่างทีละขั้นตอนสาธิตวิธีปรับใช้เว็บไซต์หน้าเดียวแบบคงที่กับ AWS S3

บริษัทของฉันสร้างเว็บไซต์ที่กำหนดเองสำหรับธุรกิจขนาดเล็กที่ต้องการความเรียบง่ายบนเว็บ เราสร้างไซต์หน้าเดียวเหล่านี้โดยใช้ HTML และ JavaScript และปรับใช้จาก GitHub ไปยัง AWS S3 โดยใช้ AWS CodePipeline จากนั้น AWS CloudFront จะเผยแพร่ไซต์เหล่านั้นให้โลกได้เห็น

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

ต่อไปนี้เป็นวิธีการตั้งค่า

สมมติฐาน

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

สร้างบัคเก็ต AWS S3

สำหรับไปป์ไลน์แรก คุณจะต้องมีบัคเก็ต AWS S3 สองอัน อันแรกจะเป็นที่เก็บข้อมูลที่มีโค้ดเว็บไซต์ที่คุณจะปรับใช้กับโลก ที่เก็บข้อมูลนี้ไม่ต้องการสิทธิ์พิเศษใดๆ เพื่อให้ CodePipeline ใช้งานได้

ในตัวอย่างนี้ ฉันจะสร้างบัคเก็ต S3 ชื่อ customer-website-sample และคงสิทธิ์เริ่มต้นไว้ทั้งหมด:

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

คุณสามารถปรับการตั้งค่าเหล่านี้ให้เหมาะกับสภาพแวดล้อมของคุณได้

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

AWS S3 ต้องใช้ชื่อที่ไม่ซ้ำกันทั่วโลกบนบัคเก็ต ดังนั้นเราจะตั้งชื่อบัคเก็ตนี้ another-codepipeline-artifacts (ชื่อของบริษัทซอฟต์แวร์ของฉันคือ อื่น) และเช่นเดียวกับบัคเก็ตก่อนหน้า เรา' จะคงการตั้งค่าเริ่มต้นทั้งหมดไว้เหมือนเดิม

แค่นั้นแหละ! เรามาสร้างไปป์ไลน์กันดีกว่า

การสร้างไปป์ไลน์

เข้าสู่ระบบบัญชี AWS ของคุณ จากนั้นไปที่ AWS CodePipeline Service

เลือกปุ่ม สร้างไปป์ไลน์ สีส้มที่มุมบนขวา นี่จะเป็นการเปิดหน้าจอโต้ตอบ เลือกการตั้งค่าไปป์ไลน์ ที่แสดงด้านล่าง

ใต้ ชื่อไปป์ไลน์ เราจะตั้งชื่อไปป์ไลน์นี้ Sample-Customer-Website ชื่อต้องไม่มีการเว้นวรรคหรืออักขระพิเศษ

AWS จะต้องมีบทบาทบริการที่มีสิทธิ์ที่เหมาะสมในการโต้ตอบกับบริการของ AWS อื่นๆ เช่น S3 แม้ว่าคุณจะสามารถสร้างบทบาทที่ไม่ซ้ำกันสำหรับแต่ละไปป์ไลน์ที่คุณสร้างได้ แต่สำหรับไปป์ไลน์แรกของคุณ ฉันขอแนะนำให้คุณเลือก บทบาทบริการใหม่ และเลือกช่องทำเครื่องหมายเพื่ออนุญาตให้ AWS CodePipeline สร้างบทบาทให้กับคุณ หากคุณกำลังสร้างและปรับใช้ไซต์ประเภทเดียวกันกับ AWS S3 มีความเป็นไปได้ที่คุณจะสามารถนำบทบาทบริการเดียวกันนี้กลับมาใช้ใหม่สำหรับไปป์ไลน์ในอนาคตได้

คุณยังสามารถยอมรับ ชื่อบทบาท เริ่มต้นที่แนะนำโดย AWS ได้หากต้องการ ในตัวอย่างนี้ ฉันกำลังเปลี่ยนชื่อบทบาทเป็น AWS-CodePipeline-Service-Role ครั้งถัดไปที่ฉันสร้างไปป์ไลน์ ฉันจะเลือกตัวเลือก บทบาทบริการที่มีอยู่ และเลือกอันนี้จากรายการ

อย่าเพิ่งคลิกปุ่มสีส้ม ถัดไป!

ขยายส่วนการตั้งค่าขั้นสูงบนหน้าจอนี้

ใต้ร้านค้าอาร์ติแฟกต์ เลือกปุ่มตัวเลือกตำแหน่งที่กำหนดเอง จากนั้นเลือกบัคเก็ต AWS S3 ที่คุณสร้างในขั้นตอนก่อนหน้าสำหรับพื้นที่จัดเก็บอาร์ติแฟกต์ CodePipeline ทั้งหมด ในตัวอย่างนี้นั่นคือ another-codepipeline-artifactsที่เก็บข้อมูล

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

ในเมนูแบบเลื่อนลง ผู้ให้บริการแหล่งที่มา ให้เลือก GitHub (Version 2) (คุณสามารถอ่านเพิ่มเติมเกี่ยวกับคุณลักษณะและความแตกต่างระหว่างตัวเลือกเวอร์ชัน 1 และเวอร์ชัน 2 ในเอกสารประกอบของ AWS โดยใช้ลิงก์ เรียนรู้เพิ่มเติม ที่ให้ไว้ใน ข้อความข้อมูล)

ซึ่งจะเปิดส่วนที่เหลือของหน้าจอสำหรับพารามิเตอร์ที่จำเป็นทั้งหมดเพื่อเชื่อมต่อกับบัญชี GitHub ของคุณ

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

ใต้ ชื่อการเชื่อมต่อ ตั้งชื่อที่ไม่ซ้ำให้กับการเชื่อมต่อใหม่ของคุณ ในกรณีนี้ ฉันจะตั้งชื่อของฉันว่า Another GitHub Connection เพื่อสร้างการเชื่อมต่อกับองค์กร GitHub ของฉันสำหรับ อื่น

จากนั้นเลือกปุ่มติดตั้งแอปใหม่ ซึ่งจะเป็นการเปิดหน้าต่าง AWS Connector for GitHub ซึ่งช่วยให้คุณสามารถเลือกบัญชีหรือองค์กร GitHub ที่เหมาะสมได้

สำหรับตัวอย่างของฉัน ฉันกำลังเลือกองค์กร “anotherllc” สิ่งนี้จะนำคุณไปยังหน้าจอที่คุณจะเลือกการตั้งค่าการเข้าถึงพื้นที่เก็บข้อมูลสำหรับ AWS

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

ซึ่งจะนำฉันกลับไปที่หน้าต่าง เครื่องมือสำหรับนักพัฒนา AWS ซึ่งตอนนี้เราเห็นรหัสแอปที่ไม่ซ้ำกันซึ่งกำหนดโดย AWS ในตัวเลือก แอป GitHub

คลิกปุ่ม เชื่อมต่อ สีส้มเพื่อดำเนินการต่อ สิ่งนี้จะทำให้คุณกลับไปที่การตั้งค่า AWS CodePipeline และคุณจะเห็นการเชื่อมต่อใหม่กรอกลงในตัวเลือก การเชื่อมต่อ และข้อความแสดงความสำเร็จที่แจ้งให้คุณทราบว่าการเชื่อมต่อ GitHub ของคุณพร้อมใช้งานแล้ว!

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

ในตัวเลือกชื่อสาขา ให้เลือกสาขาที่คุณต้องการปรับใช้ ในตัวอย่างของฉัน ฉันเลือกสาขา main

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

สำหรับ รูปแบบส่วนเอาต์พุต ปล่อยให้ ค่าเริ่มต้นของ CodePipeline เลือกไว้

คลิกปุ่ม ถัดไป สีส้ม ซึ่งจะนำคุณไปยังขั้นตอนต่อไป ซึ่งก็คือหน้าจอ เพิ่มขั้นตอนการสร้าง

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

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

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

เลือก ภูมิภาค AWS ที่เหมาะสม หากจำเป็น และในตัวเลือก บัคเก็ต ให้เลือกบัคเก็ต AWS S3 ที่เราสร้างในขั้นตอนก่อนหน้า ในตัวอย่างนี้ นี่คือที่เก็บข้อมูล customer-website-sample ที่ฉันสร้างขึ้น

ทำเครื่องหมายในช่อง แยกไฟล์ก่อนปรับใช้ ถัดไป

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

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

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

การดำเนินการนี้จะบันทึกการตั้งค่าทั้งหมดของคุณและสร้าง AWS CodePipeline ของคุณ จากนั้นจะทริกเกอร์การปรับใช้งานครั้งแรกของคุณและดึงโค้ดล่าสุดจากสาขาพื้นที่เก็บข้อมูล GitHub ที่คุณระบุและปรับใช้กับบัคเก็ต AWS S3 ของคุณ

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

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

และคุณก็ได้แล้ว! ตอนนี้คุณได้สร้างการบูรณาการและการปรับใช้อย่างต่อเนื่องอย่างง่ายๆ กับ S3 โดยใช้ AWS CodePipeline และ GitHub

หากคุณพบว่าบทความนี้มีประโยชน์ โปรดอย่าลืมอ่าน บทความอื่นๆ ของฉัน ที่ให้คำแนะนำในการตั้งค่าสภาพแวดล้อมการพัฒนาของคุณ รวมถึงตัวอย่างโค้ดบางส่วนสำหรับโครงการของคุณ