AWS S3 + CloudFront के साथ deploy करते समय static files लोड न होने से white screen आने की समस्या को हल करना

यह लेख उस समस्या को AWS S3 + CloudFront से हल करने के बारे में है, जिसमें deploy के समय static files लोड नहीं हो पाती थीं और white screen दिखाई देती थी। उम्मीद है कि AWS S3 + CloudFront के साथ स्थिर static file deployment को अधिक भरोसेमंद बनाने पर विचार कर रहे लोगों के लिए यह मददगार होगा.

[समस्या होने की पृष्ठभूमि]

• React + Vite आधारित Frontend service का संचालन
• deploy के बाद बीच-बीच में white screen आना → static files लोड नहीं हो रहीं
• console error: MIME type mismatch (text/html return होना)

[समस्या का विश्लेषण]

• MIME type mismatch: static file की जगह HTML response लौटना
• Github Actions cancel होने → ECS instance हट जाने की परिकल्पना
• deploy timing और static file serving के बीच असंगति
• पुराने version का index.html नए static files को refer करता है, लेकिन वे files हट चुकी थीं

[समाधान का तरीका]

• CloudFront + S3 का उपयोग (अंतिम निर्णय)
• S3 absolute path का उपयोग करके पिछले version की static files को बनाए रखना
• Vite build के समय filename में commitHash, timestamp जोड़ना → uniqueness बनाए रखना
• S3 Lifecycle setting से अनावश्यक files का automatic deletion
• CloudFront को जोड़कर तेज़ और स्थिर static file serving
• Local, Dev, Prod environment के लिए अलग-अलग setting

[सत्यापन के परिणाम]

• CloudFront + S3 तरीका सामान्य रूप से काम करता है, यह पुष्टि हुई
• caching strategy लागू: browser cache (Cache-Control, max-age) की जाँच
• file uniqueness देने से cache invalidation की ज़रूरत नहीं
• पहले की तरह static file missing होने की समस्या के बिना स्थिर deployment संभव

[सीखी गई बातें]

• deployment environment में static file management का UX पर बड़ा असर पड़ सकता है.
• परिकल्पना की जाँच करते समय तेज़ और सरल approach महत्वपूर्ण है
• S3 + CloudFront का उपयोग करके deployment environment optimization का अनुभव
• environment के अनुसार deployment strategy (Local, Dev, Prod) में भेद ज़रूरी
• browser caching behavior (Cache-Control, from disk cache) की समझ आवश्यक

[cnaa97]

यह rolling है, तो समस्या होना स्वाभाविक है। deployment time को छोटा करें, या deployment को अलग करके traffic को एक तरफ़ मोड़ने वाली blue-green strategy अपनाएँ।

नहीं तो React में error catch करके reload को ज़बरदस्ती trigger भी कर सकते हैं।