feat: Fix product tables and responsive fonts
- Add product detail page ([slug].astro) with table rendering - Display productTables from site-config.ts on product pages - Add responsive font scaling for large screens (1280px+) - Base font scales from 16px to 24px on 4K displays - All text elements use responsive sizing (md/lg/xl breakpoints) - Tables styled with green headers and alternating rows - Add comprehensive documentation (FIXES_SUMMARY.md) Fixes: - Product specification tables now visible on product pages - Font too small on large screens - now responsive
This commit is contained in:
Kunthawat Greethong
284
dealplustech-astro/DEPLOYMENT.md
Normal file
284
dealplustech-astro/DEPLOYMENT.md
Normal file
@@ -0,0 +1,284 @@
|
||||
# 🚀 Easypanel Deployment Guide
|
||||
|
||||
**Project:** Deal Plus Tech Astro Migration
|
||||
**Deployment Target:** Easypanel (Docker-based)
|
||||
**Build Command:** `npm run build`
|
||||
**Output:** Static site served via `npm run preview`
|
||||
|
||||
---
|
||||
|
||||
## 📋 Prerequisites
|
||||
|
||||
1. **Easypanel Account** - Access to Easypanel instance at `http://110.164.146.46:3000`
|
||||
2. **Git Repository** - Code pushed to Git (Gitea/GitHub/GitLab)
|
||||
3. **Domain** (optional) - Custom domain for production
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Deployment Steps
|
||||
|
||||
### Option 1: Deploy from Git Repository (Recommended)
|
||||
|
||||
#### Step 1: Connect Git Repository
|
||||
|
||||
1. Login to Easypanel: `http://110.164.146.46:3000`
|
||||
2. Click **"New Project"** or select existing project
|
||||
3. Click **"New Service"** → **"Git Repository"**
|
||||
4. Connect your Git provider (Gitea, GitHub, GitLab)
|
||||
5. Select repository: `dealplustech/dealplustech-astro`
|
||||
6. Select branch: `main`
|
||||
|
||||
#### Step 2: Configure Build Settings
|
||||
|
||||
**Build Configuration:**
|
||||
- **Build Command:** `npm run build`
|
||||
- **Publish Directory:** `dist`
|
||||
- **Dockerfile:** (Leave empty - uses auto-detection)
|
||||
- **Node Version:** `20`
|
||||
|
||||
**Environment Variables:**
|
||||
```bash
|
||||
NODE_ENV=production
|
||||
PORT=4321
|
||||
HOST=0.0.0.0
|
||||
```
|
||||
|
||||
#### Step 3: Deploy
|
||||
|
||||
1. Click **"Deploy"**
|
||||
2. Wait for build to complete (~2-3 minutes)
|
||||
3. Easypanel will automatically assign a URL (e.g., `dealplustech-astro.easypanel.app`)
|
||||
4. Test the deployment
|
||||
|
||||
#### Step 4: Auto-Deploy (Optional)
|
||||
|
||||
Enable auto-deploy on push:
|
||||
1. Go to Service Settings → **Git**
|
||||
2. Enable **"Auto Deploy"**
|
||||
3. Select branch: `main`
|
||||
|
||||
Now every push to `main` will trigger automatic deployment!
|
||||
|
||||
---
|
||||
|
||||
### Option 2: Deploy with Dockerfile
|
||||
|
||||
If you prefer using the provided Dockerfile:
|
||||
|
||||
#### Step 1: Build Docker Image Locally
|
||||
|
||||
```bash
|
||||
cd dealplustech-astro
|
||||
|
||||
# Build Docker image
|
||||
docker build -t dealplustech-astro:latest .
|
||||
|
||||
# Test locally
|
||||
docker run -p 4321:4321 dealplustech-astro:latest
|
||||
```
|
||||
|
||||
Visit `http://localhost:4321` to test
|
||||
|
||||
#### Step 2: Push to Container Registry
|
||||
|
||||
```bash
|
||||
# Tag for your registry
|
||||
docker tag dealplustech-astro:latest your-registry.com/dealplustech-astro:latest
|
||||
|
||||
# Push to registry
|
||||
docker push your-registry.com/dealplustech-astro:latest
|
||||
```
|
||||
|
||||
#### Step 3: Deploy on Easypanel
|
||||
|
||||
1. Login to Easypanel
|
||||
2. **New Service** → **"Docker Image"**
|
||||
3. Enter image URL: `your-registry.com/dealplustech-astro:latest`
|
||||
4. Configure port: `4321`
|
||||
5. Click **"Deploy"**
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Configuration
|
||||
|
||||
### Environment Variables
|
||||
|
||||
| Variable | Value | Description |
|
||||
|----------|-------|-------------|
|
||||
| `NODE_ENV` | `production` | Production mode |
|
||||
| `PORT` | `4321` | Astro preview server port |
|
||||
| `HOST` | `0.0.0.0` | Listen on all interfaces |
|
||||
|
||||
### Resource Allocation
|
||||
|
||||
**Recommended Resources:**
|
||||
- **CPU:** 0.5 - 1 vCPU
|
||||
- **Memory:** 512MB - 1GB
|
||||
- **Storage:** 1GB (for logs and assets)
|
||||
|
||||
### Custom Domain
|
||||
|
||||
To add a custom domain:
|
||||
|
||||
1. Go to Service Settings → **Domains**
|
||||
2. Click **"Add Domain"**
|
||||
3. Enter your domain: `dealplustech.co.th`
|
||||
4. Update DNS records:
|
||||
```
|
||||
Type: CNAME
|
||||
Name: www
|
||||
Value: your-easypanel-url.easypanel.app
|
||||
```
|
||||
5. Enable SSL (Easypanel provides auto-SSL)
|
||||
|
||||
---
|
||||
|
||||
## 📊 Monitoring
|
||||
|
||||
### Health Check
|
||||
|
||||
The Dockerfile includes a health check endpoint:
|
||||
- **URL:** `http://your-domain:4321/`
|
||||
- **Expected:** HTTP 200 OK
|
||||
|
||||
### Logs
|
||||
|
||||
View logs in Easypanel:
|
||||
1. Select Service
|
||||
2. Click **"Logs"** tab
|
||||
3. Filter by date/time
|
||||
|
||||
### Metrics
|
||||
|
||||
Easypanel provides:
|
||||
- CPU usage
|
||||
- Memory usage
|
||||
- Network traffic
|
||||
- Request count
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Update Deployment
|
||||
|
||||
### Automatic Updates (Git Auto-Deploy)
|
||||
|
||||
If auto-deploy is enabled:
|
||||
1. Push changes to `main` branch
|
||||
2. Easypanel automatically rebuilds
|
||||
3. New version deploys in ~2-3 minutes
|
||||
|
||||
### Manual Updates
|
||||
|
||||
1. Go to Service → **Deployments**
|
||||
2. Click **"Redeploy"**
|
||||
3. Select latest commit
|
||||
4. Click **"Deploy Now"**
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Build Fails
|
||||
|
||||
**Issue:** `npm run build` fails
|
||||
|
||||
**Solution:**
|
||||
1. Check build logs in Easypanel
|
||||
2. Verify `package.json` scripts
|
||||
3. Test build locally: `npm run build`
|
||||
4. Check Node version (must be 20+)
|
||||
|
||||
### 502 Bad Gateway
|
||||
|
||||
**Issue:** Service returns 502 error
|
||||
|
||||
**Solution:**
|
||||
1. Check if container is running
|
||||
2. Verify port is 4321
|
||||
3. Check health check endpoint
|
||||
4. Review container logs
|
||||
|
||||
### Static Assets Not Loading
|
||||
|
||||
**Issue:** Images/CSS return 404
|
||||
|
||||
**Solution:**
|
||||
1. Verify `public/` folder is copied in Dockerfile
|
||||
2. Check asset paths in code
|
||||
3. Rebuild and redeploy
|
||||
|
||||
---
|
||||
|
||||
## 📝 Post-Deployment Checklist
|
||||
|
||||
- [ ] Test homepage loads
|
||||
- [ ] Test product pages (6 products)
|
||||
- [ ] Test blog posts (3 posts)
|
||||
- [ ] Test mobile responsiveness
|
||||
- [ ] Verify FloatingContact buttons work
|
||||
- [ ] Test all navigation links
|
||||
- [ ] Check SEO metadata
|
||||
- [ ] Setup custom domain (if needed)
|
||||
- [ ] Enable SSL certificate
|
||||
- [ ] Configure CDN (optional)
|
||||
- [ ] Setup monitoring alerts
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Production Optimization
|
||||
|
||||
### Enable Compression
|
||||
|
||||
Easypanel automatically enables gzip compression for static assets.
|
||||
|
||||
### CDN Integration
|
||||
|
||||
For better performance:
|
||||
|
||||
1. Sign up for CDN (Cloudflare, BunnyCDN, etc.)
|
||||
2. Point CDN to Easypanel URL
|
||||
3. Update DNS to point to CDN
|
||||
4. Configure cache rules
|
||||
|
||||
### Caching Headers
|
||||
|
||||
Astro sets optimal cache headers by default:
|
||||
- **HTML:** No cache (always fresh)
|
||||
- **Assets:** 1 year (immutable)
|
||||
- **Images:** 1 year (immutable)
|
||||
|
||||
---
|
||||
|
||||
## 📞 Support
|
||||
|
||||
**Easypanel Documentation:** https://docs.easypanel.io
|
||||
**Astro Documentation:** https://docs.astro.build
|
||||
**Project Repository:** [Your Git Repo]
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Deploy Commands
|
||||
|
||||
```bash
|
||||
# Build locally
|
||||
npm run build
|
||||
|
||||
# Test production build locally
|
||||
npm run preview
|
||||
|
||||
# Build Docker image
|
||||
docker build -t dealplustech-astro:latest .
|
||||
|
||||
# Run Docker container
|
||||
docker run -p 4321:4321 dealplustech-astro:latest
|
||||
|
||||
# Push to registry
|
||||
docker push your-registry.com/dealplustech-astro:latest
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Deployment Status:** ✅ Ready to Deploy
|
||||
**Estimated Deploy Time:** 2-3 minutes
|
||||
**First Deploy:** Manual
|
||||
**Subsequent Deploys:** Automatic (if enabled)
|
||||
Reference in New Issue
Block a user