ปัจจุบันมี 2 แพลตฟอร์มที่ได้รับความนิยมสูงสุดในการโฮสต์เว็บไซต์คงที่: Netlify และ Google App Engine (GAE)
Netlify ได้รับความนิยมอย่างมากเมื่อเร็ว ๆ นี้เนื่องจากมอบประสบการณ์แบบบูรณาการกับการสร้างและปรับใช้เว็บไซต์คงที่ âÃÂàทั้งหมดในแพลตฟอร์มเดียวกัน
GAE มีความยืดหยุ่นมากกว่าในแง่ของการรองรับเว็บไซต์ที่ไม่คงที่เช่นกัน แต่ก็ขาดระดับการผสานรวมที่ Netlify มอบให้ เหตุใดฉันจึงยังคงใช้ GAE ในหลาย ๆ กรณี คำตอบนั้นง่ายมาก âÃÂàบ่อยครั้งที่ GAE มีตัวเลือกการกำหนดราคาที่ดีกว่า ในขณะเดียวกันก็ช่วยให้มีคุณสมบัติทั้งหมดของ Netlify และอื่น ๆ โดยใช้เครื่องมือง่าย ๆ ไม่กี่อย่าง (GitHub Actions และ Reliza Hub) ซึ่งฉันจะอธิบายในบทความนี้
ราคา
ก่อนอื่นให้ฉันพูดถึงสถานการณ์การกำหนดราคาเมื่อ GAE + GitHub Actions คอมโบเหมาะสมกว่า ประเด็นสำคัญคือการสร้างนาที NetlifyâÃÂÃÂs Free Tier ให้เวลาสร้างเพียง 300 นาทีต่อเดือน ซึ่งไม่มากสำหรับบัญชีใดๆ หากคุณใช้บางอย่าง เช่น แอพ node.js ที่สร้างแบบสแตติก และงานสร้างของคุณใช้เวลาเฉลี่ย 2-3 นาที คุณจะได้รับงานสร้างประมาณ 100+ งานต่อเดือนบน Netlify ซึ่งอาจจะไม่เพียงพอ โดยเฉพาะอย่างยิ่งถ้าคุณมีมากกว่าหนึ่งเว็บไซต์
หากคุณต้องการเวลาสร้างเพิ่มเติมบน Netlify âÃÂàจ่าย $7 ต่อ 500 นาทีพิเศษ หรือย้ายไปยังระดับถัดไปซึ่งรวม 1,000 นาที แต่มีค่าใช้จ่าย $45 ต่อเดือน ในทางกลับกัน บน GitHub Actions คุณจะได้รับ 2,000 นาทีในการสร้างฟรีสำหรับที่เก็บส่วนตัว และไม่จำกัดจำนวนนาทีในการสร้างสำหรับสาธารณะ สมมติว่าคุณกำลังสร้างเว็บไซต์เอกสารประกอบและตัดสินใจเผยแพร่สู่สาธารณะบน GitHub âÃÂàคุณจะได้รับการสร้างไม่จำกัดจำนวนนาทีบน GitHub Actions âÃÂàและนั่นทำให้ ความแตกต่างอย่างมาก
การพิจารณาต่อไปคือค่าใช้จ่ายในการเข้าชม Netlify ให้แบนด์วิธออก 100GB ต่อเดือนซึ่งรวมอยู่ใน Free Tier ซึ่งถือว่ามาก Google เสนอข้อมูลขาออก 1GB ต่อวันฟรี ซึ่งคิดเป็นประมาณ 30GB ต่อเดือน ดังนั้นหากข้อมูลขาออกของคุณอยู่ระหว่าง 30GB ถึง 100GB คุณอาจได้รับข้อเสนอที่ดีกว่าบน Netlify อย่างไรก็ตาม เมื่อคุณใช้เกิน 100GB แล้ว Netlify จะเรียกเก็บเงินคุณ $20 สำหรับ 100GB ถัดไปในเดือนนั้นทันที Google มีนโยบายการกำหนดราคาต่อ GB ออก ซึ่งมีค่าใช้จ่าย $0.12 หมายความว่าคุณจ่าย $12/100GB âÃÂàเทียบกับ $20/100GB บน Netlify
ดังนั้นขึ้นอยู่กับการรับส่งข้อมูล คุณอาจจะดีกว่าใน Netlify หรือ GAE จากผู้มีโอกาสเป็นลูกค้าขาออก แต่ในหลายกรณี GAE จะให้คุณค่าที่ดีกว่าที่นี่เช่นกัน
คำพูดสุดท้ายเกี่ยวกับการกำหนดราคา âÃÂàหากคุณใช้บางอย่างเช่น GitHub Actions หรือ CircleCI สำหรับงานสร้างของคุณ คุณยังสามารถปรับใช้บน Netlify âÃÂàซึ่งทำให้ GitHub Actions ระบบที่ยืดหยุ่นมากขึ้น
การกำหนดค่าโครงการ Google App Engine
เราเริ่มต้นด้วยการไปที่ httpsconsole.cloud.google.com/appengine และสร้างโครงการใหม่ หากคุณมีอยู่แล้ว âÃÂàก่อนอื่นให้คลิกชื่อโครงการของคุณที่ด้านบน จากนั้นคลิกที่
**โครงการใหม่**
ป้อนชื่อโครงการ จดรหัสโครงการที่คุณได้รับ (คุณจะต้องใช้ในภายหลัง) âÃÂàในกรณีของฉันคือ
*âÃÂÃÂevie-landing-tutorialâÃÂÃÂ* âÃÂàและคลิก **CREATE จากนั้นสลับไปที่ โครงการนี้จากตัวเลือกโครงการที่ด้านบนของหน้า
คลิกที่
**สร้างแอปพลิเคชัน** และเลือกภูมิภาคที่คุณต้องการ จากนั้นสำหรับแอปพลิเคชันแบบสแตติกให้เลือก Python และสภาพแวดล้อมมาตรฐาน (ระดับฟรีใช้กับสภาพแวดล้อมมาตรฐานเท่านั้น) ณ จุดนี้ ใบสมัครของคุณพร้อมสำหรับขั้นตอนต่อไป
หากต้องการชี้ชื่อโดเมนของคุณไปที่แอปพลิเคชันนี้ ให้ไปที่ httpsconsole.cloud.google.com/appengine/settings/domains
แล้วคลิก
**เพิ่มโดเมนที่กำหนดเอง ทำตามคำแนะนำและชี้ DNS จากโดเมนของคุณไปยังระเบียนที่ GoogleâÃÂÃÂs ให้ไว้ เมื่อเสร็จสิ้น Google จะชี้โดเมนของคุณไปที่แอปพลิเคชันนี้โดยอัตโนมัติและจัดการใบรับรอง SSL ด้วย
สุดท้าย เราต้องเตรียมบัญชีบริการซึ่งจะรับผิดชอบการปรับใช้โดยอัตโนมัติ ไปที่ httpsconsole.cloud.google.com/iam-admin/serviceaccounts?project=your_project_id (แทนที่
*your_project_id *ในลิงค์นี้ซึ่งมีรหัสโครงการจริงของคุณ ในกรณีของฉัน นี่จะเป็น *evie-landing-tutorial คุณจะไปที่หน้าเมนูต่อไปนี้:
คลิกที่ไอคอน 3 จุดในคอลัมน์การดำเนินการใกล้กับบัญชีบริการเริ่มต้นของ App Engine และเลือก
**ตัวเลือกสร้างคีย์** จากเมนูแบบเลื่อนลง
เลือก JSON เป็นประเภทคีย์ของคุณแล้วคลิก
**CREATE ซึ่งจะดาวน์โหลดไฟล์ .json ลงในเครื่องของคุณ สิ่งสุดท้ายที่เราต้องทำที่นี่คือการเข้ารหัสไฟล์นี้ในรูปแบบ base64 âÃÂàเราจะต้องใช้สิ่งนี้ในภายหลังเมื่อย้ายไปที่ GitHub Actions
สามารถทำได้โดยใช้บรรทัดคำสั่งดังต่อไปนี้:
base64 your_json_file.json >key.base64
จากนั้นไฟล์ key.base64 จะมีคีย์เข้ารหัส base64
**บันทึกความปลอดภัยที่นี่ ไฟล์คีย์ json และ base64 เหล่านี้อนุญาตให้ควบคุมโปรเจ็กต์ GAE ของคุณ ดังนั้นหลังจากที่คุณเพิ่มลงใน GitHub Actions (ดังที่ IâÃÂàจะแสดงด้านล่าง) ขอแนะนำให้ทำลาย ลบไฟล์นี้ สามารถทำได้จาก cli ดังต่อไปนี้:
ทำลาย key_file_name&& rm key_file_name
เมื่อได้รับคีย์แล้ว เราจำเป็นต้องเปิดใช้งาน Google App Engine API âÃÂàเพื่อดำเนินการดังกล่าว ไปที่หน้า httpsconsole.developers.google.com/apis/api/appengine .googleapis.com/overview แล้วคลิก
**เปิดใช้งาน**
การตั้งค่า GitHub Repository และ GitHub Actions
ในที่สุดก็ถึงเวลาเตรียม GitHub Repository ของเรา บทช่วยสอนนี้ครอบคลุมการตั้งค่าธีม Evie โดย Undraw (นี่คือธีมที่ฉันกำลังใช้สำหรับหน้า Landing Page ของ Reliza Hub!) ธีม Evie ดั้งเดิมโฮสต์ที่นี่ แต่ฉันจะใช้ Fork ของ RelizaâÃÂàในที่เก็บนี้
ดังที่ฉันได้กล่าวไปแล้วในบทความอื่นๆ ปรัชญาการสร้างของฉันในทุกวันนี้คือการเชื่อมต่อกับทุกสิ่งและใช้งาน
สร้างนักเทียบท่าเป็นสภาพแวดล้อมการสร้าง CI แบบรวมในหลายแพลตฟอร์ม ดังนั้นฉันจึงเพิ่ม Dockerfile, การกำหนดค่า nginx และอัปเดตเวอร์ชัน npm ที่สัมพันธ์กับธีม Evie ดั้งเดิมเพื่อให้มี build dockerized ที่ใช้งานได้
ตอนนี้ถ้าเราทำ
คำสั่ง docker build บน RelizaâÃÂÃÂs เนื้อหาที่เก็บ Evie มันจะสร้างอิมเมจที่ใช้ nginx ที่ให้บริการธีม Evie โดยไม่มีเอกสารประกอบบนพอร์ต 80
ถึงเวลาเตรียมสคริปต์ GitHub Actions แล้ว เราจะใช้การดำเนินการของ actions-hub/gcloud@master ซึ่งทำให้กระบวนการทั้งหมดง่ายขึ้น
เราเริ่มต้นด้วยการตั้งค่าความลับ 2 GitHub Actions ที่จำเป็นสำหรับการดำเนินการ ไปที่การตั้งค่า ->ความลับภายในที่เก็บ GitHub ของคุณแล้วคลิก
**ความลับใหม่** เพื่อตั้งค่าความลับ 2 ข้อต่อไปนี้:
- GCLOUD_PROJECT_ID âÃÂàตั้งค่าเป็นรหัสโครงการที่ระบุไว้เมื่อคุณสร้างโครงการของคุณ: evie-landing-tutorial ในกรณีของฉัน
- GOOGLE_APPLICATION_CREDENTIALS âÃÂàตั้งค่าเป็นเนื้อหาของไฟล์ json-key ที่เข้ารหัส base64 ที่ได้รับสำหรับบัญชีบริการ Google ด้านบน
ตอนนี้ในที่เก็บฉันสร้างไดเร็กทอรี .github จากนั้นไดเร็กทอรีเวิร์กโฟลว์ข้างใน และภายในนั้นฉันสร้าง gae_build.yml นอกจากนี้ เราจำเป็นต้องเพิ่มไฟล์ app.yaml ซึ่งมีการกำหนดค่า GAE และจะง่ายมากสำหรับกรณีการใช้งานแอปแบบสแตติกที่ฉันมี
หลังจากที่คุณกดโค้ดนี้แล้ว มันจะทริกเกอร์ GitHub Actions build ซึ่งจะทำการปรับใช้กับแอปพลิเคชัน GAE ของคุณ âÃÂàและบริการของคุณจะใช้งานได้! การพุชไปที่ GitHub ทุกครั้งจะทริกเกอร์การสร้าง GitHub Actions ใหม่โดยอัตโนมัติและอัปเดตแอปพลิเคชันบน GAE โดยอัตโนมัติ
ตอนนี้คุณมีไปป์ไลน์ CICD พื้นฐานสำหรับเว็บไซต์แบบคงที่ของคุณแล้ว! คุณสามารถหยุดที่นี่หรืออ่านวิธีเพิ่มฟังก์ชันการมองเห็นการอนุมัติและการปรับใช้โดยใช้ Reliza Hub ต่อไป
โบนัส: เพิ่มการอนุมัติและการมองเห็นโดยใช้ Reliza Hub
สมมติว่าเราไม่ต้องการให้งานสร้างใหม่ทั้งหมดเข้าสู่การผลิตโดยอัตโนมัติแต่เราต้องการให้ติดตั้งก่อนที่อื่นที่ไม่ใช่การผลิต และถ้าเราชอบพวกเขา âÃÂàคุณหรือผู้อนุมัติของคุณ (เช่น ผู้จัดการฝ่ายการตลาด) ต้องการ เพื่อคลิกปุ่มและเลื่อนระดับเป็นการผลิตต่อไปนี้คือวิธีทำให้สำเร็จได้ด้วย Reliza Hub นอกเหนือจากการกำหนดค่าที่ฉันอธิบายไว้1 à ¢ÃÂàStreaming Release Metadata ไปยัง Reliza Hubขั้นแรก ไปที่ httpsapp.relizahub.com รับรองความถูกต้องกับ GitHub และสร้างองค์กรของคุณ ในกรณีของฉัน ฉันจะใช้*âÃÂÃÂEvie Landing TutorialâÃÂÃÂ* เป็นชื่อองค์กรคลิกที่รายการเมนู **VCS** จากนั้นบนไอคอนวงกลมบวกเพื่อเพิ่มที่เก็บ VCSวาง URI ที่เก็บ GitHub ของคุณในอินพุตและ Reliza Hub จะ แยกวิเคราะห์โดยอัตโนมัติคลิก**ส่ง และสิ่งนี้จะสร้างที่เก็บของคุณไปที่เมนูโครงการแล้วคลิกไอคอนวงกลมบวกเพื่อสร้างโครงการป้อนชื่อโครงการของคุณ (ฉันจะใช้ *Evie Landing Set version schema เป็น Single Component (Major) âÃÂàนั่นเป็นเพราะ GAE ใช้การกำหนดเวอร์ชันของตัวเองซึ่งประกอบด้วยองค์ประกอบเดียว âÃÂàซึ่งเราจะใช้ภายใน Reliza Hub ตามที่เป็นอยู่เลือกที่เก็บ VCS เป็นที่เก็บที่คุณเพิ่งสร้างในขั้นตอนก่อนหน้าและคลิก**Submit สิ่งนี้จะสร้างโครงการใหม่จากนั้นคลิกชื่อโครงการที่สร้างขึ้นใหม่นี้และคลิกที่ไอคอนแม่กุญแจเพื่อสร้างรหัส api ของโครงการเมื่อคุณเห็น API ID และ API Key ที่สร้างขึ้นสำหรับโครงการของคุณ ให้สร้าง 2 ความลับใหม่ใน GitHub Actions âÃÂàRELIZA_API_PROJECT_ID และ RELIZA_API_PROJECT_KEY ด้วยค่าที่สอดคล้องกันตอนนี้ ถึงเวลาอัปเดตสคริปต์ gae_build.yml ของเราเพื่อสตรีมรายละเอียดการสร้างไปยัง Reliza และสลับเป็นโหมดไม่โปรโมตซึ่งหมายความว่าในการกด git ทุกครั้ง การปรับใช้จะถูกสร้างขึ้นบน GAE แต่ Google จะ ไม่เปลี่ยนทราฟฟิกไปยังการปรับใช้ใหม่นี้จนกว่าจะมีขั้นตอนแบบแมนนวลล่าช้า rสคริปต์ที่อัปเดตประกอบด้วยการรายงานการติดตามเวลาบิลด์ไปยัง Reliza Hub และจะมี URI ของการปรับใช้แต่ละรายการที่ไม่ได้โปรโมตบน GAEคุณสามารถดูคำอธิบายของแฟล็กต่างๆ ที่เราใช้ในที่เก็บ GitHub ของ Reliza Go Clientหลังจาก GitHub Actions ทำงานเมื่อพุชเสร็จสิ้น คุณสามารถนำทางไปยังเพจของ รีลีสของคุณใน Reliza Hub และดูรูปภาพต่อไปนี้:โปรดทราบว่าการคลิกที่ลิงก์**Test endpoint** จะนำคุณไปยังเวอร์ชันการปรับใช้จริงบน GAE ที่สอดคล้องกับ รายการซอร์สโค้ดนี้ âÃÂàแต่ยังไม่ได้เลื่อนขั้นเพื่อให้บริการรับส่งข้อมูลคุณยังสามารถเพิ่มการผสานรวมแบบหย่อนตามคำแนะนำที่นี่เพื่อรับการแจ้งเตือนของรุ่นใหม่ทุกครั้ง บน Reliza Hub2 âÃÂàการเพิ่มการอนุมัติไปที่หน้าการตั้งค่าของ Reliza Hub และที่ด้านล่างสุดนั้นกำหนดค่าเมทริกซ์การอนุมัติของคุณ สำหรับสภาพแวดล้อมการผลิตในกรณีของฉัน ฉันต้องการเพียงการอนุมัติจาก MARKETING สำหรับรุ่นที่จะเลื่อนระดับเป็นการผลิตดังต่อไปนี้:Click on**Save Matrix**Next I install Reliza GitHub app à¢ÃÂàhttpsgithub.com/apps/reliza-hub âÃÂàและทำตามบทช่วยสอนที่ฉันเขียนไว้ก่อนหน้านี้ ลงทะเบียนสำหรับโครงการสุดท้าย Ia เวิร์กโฟลว์ GitHub Actions ใหม่ที่จะทริกเกอร์เมื่อได้รับอนุมัติจาก Reliza Hub âÃÂàคุณสามารถดูได้ที่นี่โดยพื้นฐานแล้ว เวิร์กโฟลว์นี้จะสอบถาม Reliza Hub สำหรับเวอร์ชันล่าสุดที่ได้รับอนุมัติการผลิต จากนั้นขอให้ Google App Engine เปลี่ยนทราฟฟิกเป็นเวอร์ชันนั้นสิ่งเดียวที่ต้องมีการกำหนดค่าในเรื่องนี้ สคริปต์คือตัวแปรสภาพแวดล้อม RELIZA_PROJECT_ID âÃÂàซึ่งจำเป็นต้องตั้งค่าเป็นโครงการ UUID ที่ได้รับจากหน้าโครงการใน Reliza Hub:ตอนนี้ การเปิดตัวโครงการล่าสุดด้วย การอนุมัติจาก MARKETING จะได้รับการเลื่อนระดับโดยอัตโนมัติในฝั่ง Google App Engineสำหรับรายละเอียด วิธีเพิ่มผู้อนุมัติในองค์กร ดูวิดีโอแนะนำเกี่ยวกับการอนุมัติ3 âÃÂàเพิ่มการมองเห็นสำหรับสิ่งที่ปรับใช้เมื่อสุดท้ายนี้เราต้องการเพิ่มการเปิดเผยบน Reliza Hub ว่ามีการใช้งานจริงรุ่นใดและเมื่อใดก่อนอื่นให้ไปที่ Instances ใน Reliza Hub แล้วคลิกไอคอนวงกลมบวกเพื่อสร้างใหม่ อินสแตนซ์จากนั้นฉันป้อน URI ของอินสแตนซ์ของฉันและเลือกสภาพแวดล้อมที่จะเป็น PRODUCTION âÃÂàเนื่องจากฉันมีเฉพาะสภาพแวดล้อมที่ใช้งานจริงในเว็บไซต์แบบสแตติกนี้การคลิก**Submit** จะสร้างอินสแตนซ์ใหม่ของฉันต่อไป ฉันเลือกอินสแตนซ์ที่สร้างขึ้นใหม่นี้และคลิกที่ไอคอนแม่กุญแจเพื่อสร้างคีย์ apiเมื่อสร้าง API ID และ API Key ให้สร้าง 2 ความลับใหม่ใน GitHub Actions âÃÂàRELIZA_API_INSTANCE_ID และ RELIZA_API_INSTANCE_KEY ด้วยค่าที่สอดคล้องกันด้วยสิ่งนี้ ก่อนอื่นฉันอัปเดตสคริปต์การปรับใช้ตามการอนุมัติเพื่อเพิ่มส่วนเพื่อตรวจสอบการปรับใช้บน GAE และสตรีมไปยัง Reliza Hubและฉันยังเพิ่มเวิร์กโฟลว์ cron GitHub Actions เพื่อตรวจสอบสถานะของแอปพลิเคชัน GAE ของฉันหลังจากเวิร์กโฟลว์เหล่านี้ทำงาน เราจะได้รับภาพรวมการปรับใช้แอปพลิเคชัน GAE ของเราใน Reliza Hub ในมุมมองอินสแตนซ์ของเราดังต่อไปนี้:สรุปนี่แหละ ตอนนี้เรามีไปป์ไลน์ CI CD แบบกดปุ่มเต็มรูปแบบพร้อม GitHub Actions ที่ปรับใช้กับ GAE และการอนุมัติและการมองเห็น จัดการโดย Reliza Hubเรายังสามารถมีการแจ้งเตือน Slack และผู้จัดการฝ่ายการตลาดของเราดูการเปลี่ยนแปลงและกดปุ่มเพื่อเลื่อนขั้นเป็นการผลิตโดยไม่ต้องขอเจ้าหน้าที่ด้านเทคนิคเด็ดแค่ไหน
หากคุณต้องการพูดคุยกับฉันและพูดคุยเกี่ยวกับเรื่องนี้หรือเวิร์กโฟลว์อื่นๆ เพิ่มเติม âÃÂàจองการโทรสาธิต Reliza Hub 30 นาทีแบบไม่มีเงื่อนไขกับฉัน âààและฉันจะพยายามอย่างเต็มที่เพื่อช่วย
งาน; บันทึกชีวิต; Taleodor
