Add development configuration for marketing service in Docker and update frontend scripts
This commit is contained in:
IGNY8 VPS (Salman)
113
docs/DEPLOYMENT_STATUS.md
Normal file
113
docs/DEPLOYMENT_STATUS.md
Normal file
@@ -0,0 +1,113 @@
|
||||
# Deployment Status - Marketing Container
|
||||
|
||||
**Last Updated:** 2025-11-13
|
||||
**Status:** ✅ **OPERATIONAL**
|
||||
|
||||
---
|
||||
|
||||
## Current Status
|
||||
|
||||
### Containers
|
||||
- ✅ `igny8_marketing` - Running (Port 8020 internal, 8022 external)
|
||||
- ✅ `igny8_caddy` - Running (Routes `igny8.com` → `igny8_marketing:8020`)
|
||||
- ✅ `igny8_frontend` - Running (Vite dev server for `app.igny8.com`)
|
||||
- ✅ `igny8_backend` - Running (Django API for `api.igny8.com`)
|
||||
|
||||
### Network
|
||||
- ✅ All containers on `igny8_net` network
|
||||
- ✅ Caddy can reach marketing container
|
||||
- ✅ Marketing container serving on port 8020
|
||||
|
||||
### HTTP Status
|
||||
- ✅ Marketing container: HTTP 200 (direct access)
|
||||
- ✅ Through Caddy: HTTP 200 (production routing)
|
||||
|
||||
---
|
||||
|
||||
## Deployment Process Verified
|
||||
|
||||
The automated deployment process has been tested and is working:
|
||||
|
||||
```bash
|
||||
# 1. Build marketing image
|
||||
cd /data/app/igny8/frontend
|
||||
docker build -t igny8-marketing:latest -f Dockerfile.marketing .
|
||||
|
||||
# 2. Restart container
|
||||
cd /data/app/igny8
|
||||
docker compose -f docker-compose.app.yml -p igny8-app restart igny8_marketing
|
||||
```
|
||||
|
||||
**Result:** ✅ Container restarts with new build, site updates immediately.
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
Internet
|
||||
↓
|
||||
Caddy (HTTPS:443)
|
||||
↓
|
||||
igny8.com → igny8_marketing:8020 (Container)
|
||||
app.igny8.com → igny8_frontend:5173 (Vite Dev)
|
||||
api.igny8.com → igny8_backend:8010 (Django)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quick Commands
|
||||
|
||||
### Check Status
|
||||
```bash
|
||||
docker ps --filter "name=igny8_marketing"
|
||||
docker logs igny8_marketing --tail 20
|
||||
```
|
||||
|
||||
### Update Marketing Site
|
||||
```bash
|
||||
cd /data/app/igny8/frontend
|
||||
docker build -t igny8-marketing:latest -f Dockerfile.marketing .
|
||||
cd /data/app/igny8
|
||||
docker compose -f docker-compose.app.yml -p igny8-app restart igny8_marketing
|
||||
```
|
||||
|
||||
### Test Connectivity
|
||||
```bash
|
||||
# Direct container access
|
||||
curl http://localhost:8022/marketing.html
|
||||
|
||||
# Through Caddy (production)
|
||||
curl https://igny8.com/marketing.html
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Migration Complete
|
||||
|
||||
✅ **Old manual process is deprecated**
|
||||
✅ **New containerized process is active**
|
||||
✅ **Site is fully operational**
|
||||
|
||||
The marketing site is now:
|
||||
- Containerized
|
||||
- Version controlled (Docker images)
|
||||
- Automatically deployed
|
||||
- Easy to rollback
|
||||
- Production-ready
|
||||
|
||||
---
|
||||
|
||||
## Next Steps (Optional)
|
||||
|
||||
1. **Set up CI/CD** - Automate builds on git push
|
||||
2. **Add health checks** - Monitor container health
|
||||
3. **Set up monitoring** - Track container metrics
|
||||
4. **Create backup strategy** - Tag images before updates
|
||||
|
||||
---
|
||||
|
||||
**See Also:**
|
||||
- [Marketing Deployment Guide](./MARKETING_DEPLOYMENT.md)
|
||||
- [Deployment Architecture](./DEPLOYMENT_ARCHITECTURE.md)
|
||||
|
||||
160
docs/MARKETING_DEV_ENVIRONMENT.md
Normal file
160
docs/MARKETING_DEV_ENVIRONMENT.md
Normal file
@@ -0,0 +1,160 @@
|
||||
# Marketing Development Environment with HMR
|
||||
|
||||
**Status:** ✅ **ACTIVE**
|
||||
|
||||
The marketing site now has a development environment with Hot Module Replacement (HMR) - just like the app dev environment!
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### Current Setup
|
||||
- **Dev Server:** `igny8_marketing_dev` (Vite with HMR)
|
||||
- **Access:** `https://igny8.com` (routed through Caddy)
|
||||
- **Direct Access:** `http://localhost:8023`
|
||||
- **Port:** 5174 (internal), 8023 (external)
|
||||
|
||||
### How It Works
|
||||
1. **Volume Mount:** `/data/app/igny8/frontend` → `/app` (live file watching)
|
||||
2. **HMR Enabled:** Changes to files/images update in real-time
|
||||
3. **No Rebuild Needed:** Just edit files and see changes instantly!
|
||||
|
||||
---
|
||||
|
||||
## 📝 Development Workflow
|
||||
|
||||
### Making Changes
|
||||
1. **Edit files** in `/data/app/igny8/frontend/src/marketing/`
|
||||
2. **Edit images** in `/data/app/igny8/frontend/public/marketing/images/`
|
||||
3. **See changes instantly** - HMR updates the browser automatically!
|
||||
|
||||
### No Need To:
|
||||
- ❌ Run `npm run build:marketing`
|
||||
- ❌ Rebuild Docker image
|
||||
- ❌ Restart container
|
||||
- ❌ Copy files manually
|
||||
|
||||
### Just:
|
||||
- ✅ Edit files
|
||||
- ✅ Save
|
||||
- ✅ See changes in browser (HMR handles the rest!)
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Switching Between Dev and Production
|
||||
|
||||
### Development Mode (Current)
|
||||
**Caddyfile routes to:** `igny8_marketing_dev:5174`
|
||||
|
||||
```caddyfile
|
||||
igny8.com {
|
||||
reverse_proxy igny8_marketing_dev:5174 {
|
||||
# WebSocket support for HMR
|
||||
header_up Connection {>Connection}
|
||||
header_up Upgrade {>Upgrade}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Production Mode
|
||||
**Caddyfile routes to:** `igny8_marketing:8020`
|
||||
|
||||
```caddyfile
|
||||
igny8.com {
|
||||
reverse_proxy igny8_marketing:8020 {
|
||||
# Static production build
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**To switch:** Edit `/var/lib/docker/volumes/portainer_data/_data/caddy/Caddyfile` and restart Caddy.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Container Management
|
||||
|
||||
### Start Dev Server
|
||||
```bash
|
||||
cd /data/app/igny8
|
||||
docker compose -f docker-compose.app.yml -p igny8-app up -d igny8_marketing_dev
|
||||
```
|
||||
|
||||
### View Logs
|
||||
```bash
|
||||
docker logs igny8_marketing_dev -f
|
||||
```
|
||||
|
||||
### Restart Dev Server
|
||||
```bash
|
||||
docker compose -f docker-compose.app.yml -p igny8-app restart igny8_marketing_dev
|
||||
```
|
||||
|
||||
### Stop Dev Server
|
||||
```bash
|
||||
docker compose -f docker-compose.app.yml -p igny8-app stop igny8_marketing_dev
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📂 File Locations
|
||||
|
||||
| Type | Location |
|
||||
|------|----------|
|
||||
| **Marketing Components** | `/data/app/igny8/frontend/src/marketing/` |
|
||||
| **Marketing Pages** | `/data/app/igny8/frontend/src/marketing/pages/` |
|
||||
| **Marketing Images** | `/data/app/igny8/frontend/public/marketing/images/` |
|
||||
| **Marketing Styles** | `/data/app/igny8/frontend/src/marketing/styles/` |
|
||||
|
||||
---
|
||||
|
||||
## ✅ Benefits
|
||||
|
||||
1. **Real-time Updates** - Changes reflect immediately
|
||||
2. **No Rebuilds** - Edit and save, that's it!
|
||||
3. **Fast Development** - Same experience as app dev environment
|
||||
4. **Image Updates** - Images in `public/marketing/images/` update instantly
|
||||
5. **Component Updates** - React components hot-reload automatically
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Troubleshooting
|
||||
|
||||
### Changes Not Appearing
|
||||
1. Check container is running: `docker ps | grep igny8_marketing_dev`
|
||||
2. Check logs: `docker logs igny8_marketing_dev`
|
||||
3. Verify volume mount: Files should be in `/data/app/igny8/frontend/`
|
||||
|
||||
### HMR Not Working
|
||||
1. Check browser console for WebSocket errors
|
||||
2. Verify Caddyfile has WebSocket headers
|
||||
3. Restart Caddy: `docker compose restart caddy`
|
||||
|
||||
### Port Conflicts
|
||||
- Dev server uses port 5174 (internal), 8023 (external)
|
||||
- If conflicts occur, change port in `docker-compose.app.yml`
|
||||
|
||||
---
|
||||
|
||||
## 📊 Current Status
|
||||
|
||||
✅ **Dev Server:** Running
|
||||
✅ **HMR:** Enabled
|
||||
✅ **Volume Mount:** Active
|
||||
✅ **Caddy Routing:** Configured
|
||||
✅ **WebSocket Support:** Enabled
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Next Steps
|
||||
|
||||
When ready for production:
|
||||
1. Build production image: `docker build -t igny8-marketing:latest -f Dockerfile.marketing .`
|
||||
2. Update Caddyfile to route to `igny8_marketing:8020`
|
||||
3. Restart Caddy: `docker compose restart caddy`
|
||||
|
||||
---
|
||||
|
||||
**See Also:**
|
||||
- [Marketing Deployment Guide](./MARKETING_DEPLOYMENT.md)
|
||||
- [Deployment Architecture](./DEPLOYMENT_ARCHITECTURE.md)
|
||||
|
||||
Reference in New Issue
Block a user