256 lines
6.8 KiB
Markdown
256 lines
6.8 KiB
Markdown
# Deployment Guide
|
|
|
|
## Pre-Deployment Checklist
|
|
|
|
### 1. Code Quality
|
|
- [ ] All TypeScript errors resolved
|
|
- [ ] ESLint warnings addressed
|
|
- [ ] Build completes successfully
|
|
- [ ] No console errors in production build
|
|
|
|
### 2. Environment Configuration
|
|
- [ ] `.env.production` configured with production API URL
|
|
- [ ] All required environment variables set
|
|
- [ ] API endpoints tested and accessible
|
|
- [ ] CORS configured on backend for production domain
|
|
|
|
### 3. Security
|
|
- [ ] HTTPS enabled (SSL/TLS certificate)
|
|
- [ ] Security headers configured (CSP, HSTS, X-Frame-Options)
|
|
- [ ] Authentication tokens secured (consider httpOnly cookies)
|
|
- [ ] API keys and secrets not exposed in client code
|
|
- [ ] Rate limiting configured on backend
|
|
- [ ] Input validation on all forms
|
|
|
|
### 4. Performance
|
|
- [ ] Code splitting implemented (check vite.config.ts)
|
|
- [ ] Images optimized
|
|
- [ ] Lazy loading for routes (if needed)
|
|
- [ ] Bundle size analyzed and optimized
|
|
- [ ] CDN configured for static assets (optional)
|
|
|
|
### 5. Monitoring & Error Tracking
|
|
- [ ] Error boundary implemented ✓
|
|
- [ ] Error tracking service configured (Sentry, LogRocket, etc.)
|
|
- [ ] Analytics configured (Google Analytics, Plausible, etc.)
|
|
- [ ] Logging strategy defined
|
|
- [ ] Uptime monitoring configured
|
|
|
|
### 6. Testing
|
|
- [ ] Manual testing completed on staging
|
|
- [ ] Cross-browser testing (Chrome, Firefox, Safari, Edge)
|
|
- [ ] Mobile responsiveness verified
|
|
- [ ] Authentication flow tested
|
|
- [ ] API error handling tested
|
|
|
|
### 7. Documentation
|
|
- [ ] README.md updated ✓
|
|
- [ ] Environment variables documented ✓
|
|
- [ ] Deployment instructions clear ✓
|
|
- [ ] API documentation available
|
|
|
|
## Deployment Options
|
|
|
|
### Option 1: Docker + Cloud Provider (Recommended)
|
|
|
|
1. Build Docker image:
|
|
```bash
|
|
docker build -t yaltopia-admin:latest .
|
|
```
|
|
|
|
2. Test locally:
|
|
```bash
|
|
docker run -p 8080:80 yaltopia-admin:latest
|
|
```
|
|
|
|
3. Push to container registry:
|
|
```bash
|
|
# For Docker Hub
|
|
docker tag yaltopia-admin:latest username/yaltopia-admin:latest
|
|
docker push username/yaltopia-admin:latest
|
|
|
|
# For AWS ECR
|
|
aws ecr get-login-password --region region | docker login --username AWS --password-stdin account-id.dkr.ecr.region.amazonaws.com
|
|
docker tag yaltopia-admin:latest account-id.dkr.ecr.region.amazonaws.com/yaltopia-admin:latest
|
|
docker push account-id.dkr.ecr.region.amazonaws.com/yaltopia-admin:latest
|
|
```
|
|
|
|
4. Deploy to cloud:
|
|
- AWS ECS/Fargate
|
|
- Google Cloud Run
|
|
- Azure Container Instances
|
|
- DigitalOcean App Platform
|
|
|
|
### Option 2: Traditional VPS (Ubuntu/Debian)
|
|
|
|
1. SSH into your server
|
|
|
|
2. Install Node.js and nginx:
|
|
```bash
|
|
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
|
|
sudo apt-get install -y nodejs nginx
|
|
```
|
|
|
|
3. Clone repository:
|
|
```bash
|
|
git clone <your-repo-url>
|
|
cd yaltopia-ticket-admin
|
|
```
|
|
|
|
4. Install dependencies and build:
|
|
```bash
|
|
npm ci
|
|
npm run build:prod
|
|
```
|
|
|
|
5. Configure nginx:
|
|
```bash
|
|
sudo cp nginx.conf /etc/nginx/sites-available/yaltopia-admin
|
|
sudo ln -s /etc/nginx/sites-available/yaltopia-admin /etc/nginx/sites-enabled/
|
|
sudo nginx -t
|
|
sudo systemctl reload nginx
|
|
```
|
|
|
|
6. Copy build files:
|
|
```bash
|
|
sudo cp -r dist/* /var/www/html/
|
|
```
|
|
|
|
## Post-Deployment
|
|
|
|
### 1. Verification
|
|
- [ ] Application loads correctly
|
|
- [ ] All routes work (test deep links)
|
|
- [ ] API calls successful
|
|
- [ ] Authentication works
|
|
- [ ] No console errors
|
|
- [ ] Performance acceptable (Lighthouse score)
|
|
|
|
### 2. Monitoring Setup
|
|
- [ ] Error tracking active
|
|
- [ ] Analytics tracking
|
|
- [ ] Uptime monitoring configured
|
|
- [ ] Alert notifications set up
|
|
|
|
### 3. Backup & Rollback Plan
|
|
- [ ] Previous version tagged in git
|
|
- [ ] Rollback procedure documented
|
|
- [ ] Database backup (if applicable)
|
|
|
|
## Continuous Deployment
|
|
|
|
### GitHub Actions (Automated)
|
|
|
|
The `.github/workflows/ci.yml` file is configured for CI, and `.github/workflows/deploy.yml` builds production artifacts.
|
|
|
|
For automated deployment, you can extend the workflow to:
|
|
|
|
1. **Push Docker image to registry:**
|
|
```yaml
|
|
- name: Login to Docker Registry
|
|
uses: docker/login-action@v3
|
|
with:
|
|
registry: ${{ secrets.DOCKER_REGISTRY }}
|
|
username: ${{ secrets.DOCKER_USERNAME }}
|
|
password: ${{ secrets.DOCKER_PASSWORD }}
|
|
|
|
- name: Build and push Docker image
|
|
uses: docker/build-push-action@v5
|
|
with:
|
|
context: .
|
|
push: true
|
|
tags: |
|
|
${{ secrets.DOCKER_REGISTRY }}/yaltopia-admin:latest
|
|
${{ secrets.DOCKER_REGISTRY }}/yaltopia-admin:${{ github.sha }}
|
|
```
|
|
|
|
2. **Deploy to your server via SSH:**
|
|
```yaml
|
|
- name: Deploy to production server
|
|
uses: appleboy/ssh-action@v1.0.0
|
|
with:
|
|
host: ${{ secrets.DEPLOY_HOST }}
|
|
username: ${{ secrets.DEPLOY_USER }}
|
|
key: ${{ secrets.DEPLOY_SSH_KEY }}
|
|
script: |
|
|
cd /opt/yaltopia-admin
|
|
docker pull ${{ secrets.DOCKER_REGISTRY }}/yaltopia-admin:latest
|
|
docker-compose down
|
|
docker-compose up -d
|
|
```
|
|
|
|
## Troubleshooting
|
|
|
|
### Build Fails
|
|
- Check Node.js version (18+)
|
|
- Clear node_modules and reinstall: `rm -rf node_modules package-lock.json && npm install`
|
|
- Check for TypeScript errors: `npm run type-check`
|
|
|
|
### Blank Page After Deploy
|
|
- Check browser console for errors
|
|
- Verify API URL is correct
|
|
- Check nginx/server configuration for SPA routing
|
|
- Verify all environment variables are set
|
|
|
|
### API Calls Failing
|
|
- Check CORS configuration on backend
|
|
- Verify API URL in environment variables
|
|
- Check network tab in browser DevTools
|
|
- Verify authentication token handling
|
|
|
|
### Performance Issues
|
|
- Analyze bundle size: `npm run build -- --mode production`
|
|
- Check for large dependencies
|
|
- Implement code splitting
|
|
- Enable compression (gzip/brotli)
|
|
- Use CDN for static assets
|
|
|
|
## Security Hardening
|
|
|
|
### 1. Content Security Policy (CSP)
|
|
|
|
Add to nginx.conf or hosting platform headers:
|
|
|
|
```
|
|
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https://api.yourdomain.com;
|
|
```
|
|
|
|
### 2. Additional Security Headers
|
|
|
|
```
|
|
Strict-Transport-Security: max-age=31536000; includeSubDomains
|
|
X-Content-Type-Options: nosniff
|
|
X-Frame-Options: SAMEORIGIN
|
|
X-XSS-Protection: 1; mode=block
|
|
Referrer-Policy: strict-origin-when-cross-origin
|
|
Permissions-Policy: geolocation=(), microphone=(), camera=()
|
|
```
|
|
|
|
### 3. Rate Limiting
|
|
|
|
Implement on backend and consider using Cloudflare or similar CDN with DDoS protection.
|
|
|
|
## Maintenance
|
|
|
|
### Regular Tasks
|
|
- [ ] Update dependencies monthly: `npm update`
|
|
- [ ] Security audit: `npm audit`
|
|
- [ ] Review error logs weekly
|
|
- [ ] Monitor performance metrics
|
|
- [ ] Backup configuration and data
|
|
|
|
### Updates
|
|
1. Test updates in development
|
|
2. Deploy to staging
|
|
3. Run full test suite
|
|
4. Deploy to production during low-traffic period
|
|
5. Monitor for issues
|
|
|
|
## Support
|
|
|
|
For issues or questions:
|
|
- Check logs in error tracking service
|
|
- Review browser console errors
|
|
- Check server logs
|
|
- Contact backend team for API issues
|