87 lines
5.9 KiB
Plaintext
87 lines
5.9 KiB
Plaintext
╔════════════════════════════════════════════════════════════════╗
|
|
║ WEBSOCKET HTTPS ERROR - FIXED ✅ ║
|
|
║ ║
|
|
║ Date: December 17, 2025 ║
|
|
║ Status: RESOLVED ║
|
|
╚════════════════════════════════════════════════════════════════╝
|
|
|
|
┌────────────────────────────────────────────────────────────────┐
|
|
│ THE PROBLEM │
|
|
└────────────────────────────────────────────────────────────────┘
|
|
|
|
Error: Failed to construct 'WebSocket': An insecure WebSocket
|
|
connection may not be initiated from a page loaded over HTTPS.
|
|
|
|
Cause: Production build included webpack-dev-server code that
|
|
tried to open ws:// connection on HTTPS page
|
|
|
|
┌────────────────────────────────────────────────────────────────┐
|
|
│ THE FIX │
|
|
└────────────────────────────────────────────────────────────────┘
|
|
|
|
1. ✅ Added WDS_SOCKET_PROTOCOL=wss to .env
|
|
2. ✅ Created .env.production (no dev tools)
|
|
3. ✅ Rebuilt: npm run build
|
|
4. ✅ Restarted: systemctl restart church-music-frontend
|
|
5. ✅ Verified: No webpack-dev-server in bundle
|
|
|
|
┌────────────────────────────────────────────────────────────────┐
|
|
│ VERIFICATION │
|
|
└────────────────────────────────────────────────────────────────┘
|
|
|
|
✓ Bundle size reduced (removed dev server)
|
|
✓ 0 webpack-dev-server references in build
|
|
✓ HTTPS site loads without errors
|
|
✓ No WebSocket security errors
|
|
|
|
┌────────────────────────────────────────────────────────────────┐
|
|
│ QUICK REFERENCE │
|
|
└────────────────────────────────────────────────────────────────┘
|
|
|
|
Production Build:
|
|
$ cd frontend
|
|
$ npm run build
|
|
$ sudo systemctl restart church-music-frontend
|
|
|
|
Check Status:
|
|
$ sudo systemctl status church-music-frontend
|
|
$ curl -I https://houseofprayer.ddns.net
|
|
|
|
Verify Clean Build:
|
|
$ grep -r "webpack-dev-server" frontend/build/
|
|
(Should return 0 matches)
|
|
|
|
┌────────────────────────────────────────────────────────────────┐
|
|
│ IMPORTANT: NEVER DO THIS IN PRODUCTION │
|
|
└────────────────────────────────────────────────────────────────┘
|
|
|
|
❌ npm start (Runs webpack-dev-server)
|
|
❌ react-scripts start (Development mode)
|
|
|
|
✅ npm run build (Production build)
|
|
✅ serve -s build (Static file server)
|
|
✅ systemctl restart (Production service)
|
|
|
|
┌────────────────────────────────────────────────────────────────┐
|
|
│ FILES MODIFIED │
|
|
└────────────────────────────────────────────────────────────────┘
|
|
|
|
• frontend/.env (added WDS_SOCKET_PROTOCOL=wss)
|
|
• frontend/.env.production (created)
|
|
• frontend/build/ (rebuilt with production settings)
|
|
• WEBSOCKET_HTTPS_FIX.md (detailed documentation)
|
|
|
|
┌────────────────────────────────────────────────────────────────┐
|
|
│ TESTING ON YOUR BROWSER │
|
|
└────────────────────────────────────────────────────────────────┘
|
|
|
|
1. Clear cache: Ctrl+Shift+Delete
|
|
2. Force reload: Ctrl+Shift+R (Cmd+Shift+R on Mac)
|
|
3. Open console: F12
|
|
4. Check for errors: Should be NONE
|
|
5. Test app: Should work normally
|
|
|
|
╔════════════════════════════════════════════════════════════════╗
|
|
║ Full documentation: WEBSOCKET_HTTPS_FIX.md ║
|
|
╚════════════════════════════════════════════════════════════════╝
|