Update Dockerfile to enhance TypeScript configuration with JSX support, install wget for health checks, and improve healthcheck command compatibility.
This commit is contained in:
64
DEPLOYMENT_FIXES.md
Normal file
64
DEPLOYMENT_FIXES.md
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
# 🔧 Deployment Issue Fixes
|
||||||
|
|
||||||
|
## 🔍 Issues Identified from Latest Log
|
||||||
|
|
||||||
|
### **Issue 1: TypeScript JSX Configuration Missing** ❌→✅
|
||||||
|
**Problem**: TypeScript compilation failing with `error TS6142: '--jsx' is not set`
|
||||||
|
**Root Cause**: Generated tsconfig.json in Docker was missing JSX configuration
|
||||||
|
**Fix Applied**: Added `"jsx":"react-jsx"` to the tsconfig.json generation in Dockerfile
|
||||||
|
**Line Fixed**: Line 77 in Dockerfile
|
||||||
|
|
||||||
|
### **Issue 2: Health Check Tool Mismatch** ❌→✅
|
||||||
|
**Problem**: Health checks failing with `wget: can't connect to remote host: Connection refused`
|
||||||
|
**Root Cause**:
|
||||||
|
- Dockerfile uses `curl` for health checks
|
||||||
|
- Coolify deployment system uses `wget` for health checks
|
||||||
|
- Tool mismatch causing health check failures
|
||||||
|
|
||||||
|
**Fix Applied**:
|
||||||
|
1. Added `wget` installation alongside `curl`
|
||||||
|
2. Updated health check command to support both tools: `curl -f http://localhost/ || wget -q --spider http://localhost/ || exit 1`
|
||||||
|
|
||||||
|
### **Issue 3: Container Health Check Endpoint** ❌→✅
|
||||||
|
**Problem**: Health check trying to access `/health` endpoint that doesn't exist
|
||||||
|
**Fix Applied**: Changed health check to use root path `/` which always exists for Nginx
|
||||||
|
|
||||||
|
## 📋 Changes Made
|
||||||
|
|
||||||
|
### **1. Updated Dockerfile (Lines 77, 89, 113)**
|
||||||
|
```dockerfile
|
||||||
|
# Fixed TypeScript JSX configuration
|
||||||
|
RUN echo '{"compilerOptions":{..."jsx":"react-jsx"...}}' > tsconfig.json
|
||||||
|
|
||||||
|
# Added wget for Coolify compatibility
|
||||||
|
RUN apk add --no-cache curl wget
|
||||||
|
|
||||||
|
# Fixed health check with fallback
|
||||||
|
CMD curl -f http://localhost/ || wget -q --spider http://localhost/ || exit 1
|
||||||
|
```
|
||||||
|
|
||||||
|
## ✅ Expected Results
|
||||||
|
|
||||||
|
After these fixes:
|
||||||
|
|
||||||
|
1. **TypeScript Build**: ✅ Should compile `.tsx` files successfully
|
||||||
|
2. **Health Check**: ✅ Should pass using either curl or wget
|
||||||
|
3. **Container Status**: ✅ Should show as healthy
|
||||||
|
4. **Deployment**: ✅ Should complete without rollback
|
||||||
|
|
||||||
|
## 🎯 Root Cause Analysis
|
||||||
|
|
||||||
|
The deployment failures were caused by:
|
||||||
|
1. **Build Configuration**: Missing JSX support in generated TypeScript config
|
||||||
|
2. **Health Check Compatibility**: Tool mismatch between Docker image and deployment platform
|
||||||
|
3. **Endpoint Mismatch**: Health check looking for non-existent endpoint
|
||||||
|
|
||||||
|
## 🚀 Next Deployment
|
||||||
|
|
||||||
|
The next deployment should:
|
||||||
|
- ✅ Build successfully with JSX support
|
||||||
|
- ✅ Pass health checks with both curl and wget
|
||||||
|
- ✅ Complete without rollbacks
|
||||||
|
- ✅ Result in a fully functional application
|
||||||
|
|
||||||
|
**Status**: Ready for redeployment with fixes applied! 🎉
|
12
Dockerfile
12
Dockerfile
@ -73,8 +73,8 @@ RUN printf 'export interface CreateUserData {\n email: string;\n username: str
|
|||||||
# Create a custom package.json script that skips TypeScript
|
# Create a custom package.json script that skips TypeScript
|
||||||
RUN echo '{"name":"scriptshare","scripts":{"build-no-ts":"vite build --mode development"}}' > package-build.json
|
RUN echo '{"name":"scriptshare","scripts":{"build-no-ts":"vite build --mode development"}}' > package-build.json
|
||||||
|
|
||||||
# Create a very lenient tsconfig.json that allows everything and includes path mappings
|
# Create a very lenient tsconfig.json that allows everything and includes path mappings and JSX
|
||||||
RUN echo '{"compilerOptions":{"target":"ES2020","useDefineForClassFields":true,"lib":["ES2020","DOM","DOM.Iterable"],"module":"ESNext","skipLibCheck":true,"moduleResolution":"bundler","allowImportingTsExtensions":true,"resolveJsonModule":true,"isolatedModules":true,"noEmit":true,"strict":false,"noImplicitAny":false,"noImplicitReturns":false,"noFallthroughCasesInSwitch":false,"baseUrl":".","paths":{"@/*":["./src/*"]}},"include":["src"],"references":[{"path":"./tsconfig.node.json"}]}' > tsconfig.json
|
RUN echo '{"compilerOptions":{"target":"ES2020","useDefineForClassFields":true,"lib":["ES2020","DOM","DOM.Iterable"],"module":"ESNext","skipLibCheck":true,"moduleResolution":"bundler","allowImportingTsExtensions":true,"resolveJsonModule":true,"isolatedModules":true,"noEmit":true,"jsx":"react-jsx","strict":false,"noImplicitAny":false,"noImplicitReturns":false,"noFallthroughCasesInSwitch":false,"baseUrl":".","paths":{"@/*":["./src/*"]}},"include":["src"],"references":[{"path":"./tsconfig.node.json"}]}' > tsconfig.json
|
||||||
|
|
||||||
# Force build with very lenient settings - try multiple approaches
|
# Force build with very lenient settings - try multiple approaches
|
||||||
RUN npm run build || npx vite build --mode development || echo "Build failed, creating fallback static site..." && mkdir -p dist && echo "<!DOCTYPE html><html><head><title>ScriptShare Demo</title></head><body><h1>ScriptShare</h1><p>Demo deployment - build in progress</p></body></html>" > dist/index.html
|
RUN npm run build || npx vite build --mode development || echo "Build failed, creating fallback static site..." && mkdir -p dist && echo "<!DOCTYPE html><html><head><title>ScriptShare Demo</title></head><body><h1>ScriptShare</h1><p>Demo deployment - build in progress</p></body></html>" > dist/index.html
|
||||||
@ -85,8 +85,8 @@ RUN ls -la /app/dist && echo "Build completed successfully!"
|
|||||||
# Production stage
|
# Production stage
|
||||||
FROM nginx:alpine
|
FROM nginx:alpine
|
||||||
|
|
||||||
# Install curl for health checks
|
# Install curl and wget for health checks (Coolify uses wget)
|
||||||
RUN apk add --no-cache curl
|
RUN apk add --no-cache curl wget
|
||||||
|
|
||||||
# Copy built files from builder stage
|
# Copy built files from builder stage
|
||||||
COPY --from=builder /app/dist /usr/share/nginx/html
|
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||||
@ -108,9 +108,9 @@ RUN chmod -R 755 /var/cache/nginx /var/log/nginx /var/run/nginx
|
|||||||
# Expose port 80
|
# Expose port 80
|
||||||
EXPOSE 80
|
EXPOSE 80
|
||||||
|
|
||||||
# Add healthcheck
|
# Add healthcheck (compatible with both curl and wget)
|
||||||
HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
|
HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
|
||||||
CMD curl -f http://localhost/health || exit 1
|
CMD curl -f http://localhost/ || wget -q --spider http://localhost/ || exit 1
|
||||||
|
|
||||||
# Start nginx
|
# Start nginx
|
||||||
CMD ["nginx", "-g", "daemon off;"]
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
|
Reference in New Issue
Block a user