- 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
285 lines
5.8 KiB
Markdown
285 lines
5.8 KiB
Markdown
# 🚀 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)
|