การปรับใช้แยกอิสระและ CI Pipelines สำหรับ MFE
ตั้งค่า CI/CD pipeline แยกกัน เพื่อให้ micro-frontend แต่ละตัวนำไปใช้งานได้โดยไม่ต้องประสานงานกัน
การปรับใช้แยกอิสระและ CI Pipelines สำหรับ MFE เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
เป้าหมาย: การนำไปใช้งานอย่างเป็นอิสระ
ไมโครฟรอนต์เอนด์แต่ละรายการควรนำไปใช้งานได้อย่างอิสระโดยไม่ต้องประสานงานกับทีมอื่น ซึ่งต้องใช้ที่เก็บโค้ดแยกกัน (หรือ Nx/Turborepo) กระบวนการ CI แยกกัน และโฮสติ้งแยกกัน
กลยุทธ์การจัดการที่เก็บโค้ด
มีสองแนวทาง ได้แก่ Polyrepo (MFE หนึ่งรายการต่อที่เก็บโค้ดหนึ่งแห่ง เป็นอิสระอย่างแท้จริง) และ Monorepo (MFE ทั้งหมดอยู่ในที่เก็บโค้ดเดียว ใช้เครื่องมือร่วมกัน และมี CI ตามส่วนที่ได้รับผลกระทบ) โดยทั่วไป Monorepo เริ่มต้นได้ง่ายกว่า
กลยุทธ์ URL ของจุดเริ่มต้นรีโมต
MFE แต่ละรายการจะเปิดเผย remoteEntry.js ที่ URL ซึ่งคาดเดาได้ นำไปใช้งานที่พาธซึ่งระบุรุ่นไว้ หรือใช้ไฟล์แมนนิเฟสต์เพื่อค้นหาแบบไดนามิก
// Versioned URL strategy:
https://cdn.example.com/products/1.2.3/remoteEntry.js
// Latest URL strategy (simpler, no host update needed):
https://cdn.example.com/products/latest/remoteEntry.js
// Dynamic manifest:
https://cdn.example.com/manifest.json
// { products: 'https://cdn.example.com/products/1.2.3/remoteEntry.js' }กระบวนการของ GitHub Actions สำหรับรีโมต
กระบวนการ CI โดยทั่วไปสำหรับไมโครฟรอนต์เอนด์คือ ทดสอบ สร้าง อัปโหลดไปยัง CDN และอาจแจ้งให้โฮสต์อัปเดตแมนนิเฟสต์
# .github/workflows/deploy.yml
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci
- run: npm test
- run: npm run build
- uses: aws-actions/configure-aws-credentials@v4
with:
aws-access-key-id: ${{ secrets.AWS_KEY }}
aws-secret-access-key: ${{ secrets.AWS_SECRET }}
aws-region: us-east-1
- run: aws s3 sync dist/ s3://cdn-bucket/products/ --deleteURL รีโมตตามสภาพแวดล้อม
ใช้ตัวแปรสภาพแวดล้อมในการกำหนดค่า webpack หรือแมนนิเฟสต์ของโฮสต์ เพื่อชี้ไปยังรีโมตของสภาพแวดล้อมเตรียมใช้งานเทียบกับสภาพแวดล้อมจริง
// Host webpack.config.js
const PRODUCTS_URL = process.env.PRODUCTS_REMOTE_URL ?? 'https://cdn.example.com/products/latest/remoteEntry.js';
new ModuleFederationPlugin({
remotes: { products: `products@${PRODUCTS_URL}` },
});Nx Affected สำหรับ Monorepo
ใน monorepo ของ Nx คำสั่ง nx affected จะสร้างและนำไปใช้งานเฉพาะ MFE ที่มีการเปลี่ยนแปลง ไม่ใช่ทั้งหมด — ช่วยประหยัดเวลา CI
# Only build MFEs affected by the current PR
npx nx affected:build --base=origin/main
npx nx affected:test --base=origin/mainการทดสอบสัญญา
เมื่อรีโมตเปลี่ยน API ของโมดูลที่เปิดเผย ผู้บริโภคจะหยุดทำงาน การทดสอบสัญญา (Pact) จะตรวจสอบว่าผู้ผลิตและผู้บริโภคเห็นพ้องกันเกี่ยวกับอินเทอร์เฟซก่อนนำไปใช้งาน
การนำไปใช้งานแบบคานารี
นำรีโมตรุ่นใหม่ไปใช้งานกับผู้ใช้จำนวนน้อยก่อน ตรวจสอบอัตราข้อผิดพลาดก่อนขยายให้ผู้ใช้ทั้งหมด — ช่วยลดขอบเขตผลกระทบจากการเปลี่ยนแปลงที่ทำให้ระบบเดิมเสียหาย
กลยุทธ์การย้อนกลับ
เก็บ remoteEntry.js ของรีโมตรุ่นก่อนหน้าไว้บน CDN การอัปเดตแมนนิเฟสต์ให้ชี้กลับไปยังรุ่นเก่าก็เพียงพอสำหรับการย้อนกลับ
// Rollback: update manifest to previous version
await updateManifest({ products: 'https://cdn/products/1.1.0/remoteEntry.js' });การแคชจุดเริ่มต้นรีโมตบน CDN
กำหนด TTL ให้สั้น (หรือไม่แคชเลย) สำหรับ remoteEntry.js เพื่อให้โฮสต์รับรุ่นล่าสุดเสมอ ใช้ TTL ที่ยาวสำหรับไฟล์ชังก์ที่ระบุรุ่นไว้
# CloudFront cache behavior:
# remoteEntry.js → Cache-Control: no-cache, max-age=0
# *.chunk.js → Cache-Control: max-age=31536000, immutableการทดสอบควันหลังนำไปใช้งาน
เรียกใช้การทดสอบควันของ Playwright แบบขั้นต่ำหลังการนำไปใช้งานแต่ละครั้ง เพื่อตรวจสอบว่ารีโมตโหลดและแสดงผลได้อย่างถูกต้องภายใต้บริบทของเชลล์
ตรวจสอบอย่างรวดเร็ว
ข้อได้เปรียบสำคัญของการใช้ไฟล์แมนนิเฟสต์ที่ระบุรุ่นสำหรับ URL รีโมต แทนการเขียน URL ตายตัวไว้ในการกำหนดค่า webpack ของโฮสต์คืออะไร
สรุปทบทวน
MFE แต่ละรายการมีขั้นตอน CI ของตนเอง: ทดสอบ → สร้าง → อัปโหลดไปยัง CDN ใช้ URL รีโมตที่ระบุรุ่นหรืออ้างอิงจากแมนนิเฟสต์เพื่อให้สามารถย้อนกลับได้ กำหนด TTL แคชให้สั้นสำหรับ remoteEntry.js เพื่อให้รับรุ่นใหม่ได้ทันที ใน monorepo ของ Nx ให้ใช้ nx affected เพื่อนำไปใช้งานเฉพาะ MFE ที่เปลี่ยนแปลง
เรียนรู้ React ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 88
- บทเรียน
- 324
คำถามที่พบบ่อย
บทเรียน “การปรับใช้แยกอิสระและ CI Pipelines สำหรับ MFE” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การปรับใช้แยกอิสระและ CI Pipelines สำหรับ MFE” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การปรับใช้แยกอิสระและ CI Pipelines สำหรับ MFE”
ตั้งค่า CI/CD pipeline แยกกัน เพื่อให้ micro-frontend แต่ละตัวนำไปใช้งานได้โดยไม่ต้องประสานงานกัน คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การปรับใช้แยกอิสระและ CI Pipelines สำหรับ MFE” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- แนวคิด Micro-Frontend และข้อแลกเปลี่ยน
- Module Federation ด้วย Webpack 5
- สถานะร่วมและการกำหนดเส้นทางระหว่าง MFE
- การปรับใช้แยกอิสระและ CI Pipelines สำหรับ MFE