Mahdaad Dev Handbook

Appearance

Deployment ​

Introduction ​

This guide includes the deployment process and project setup in different environments.

Deployment Environments ​

Development ​

  • Local development environment
  • Hot reload
  • Debugging tools
  • Mock data

Staging ​

  • Test environment
  • Similar to production
  • Test new features
  • Performance testing

Production ​

  • Final environment
  • Optimized
  • Monitoring
  • Backup strategy

Build Process ​

Development Build ​

bash
# Install dependencies
pnpm install

# Run development server
pnpm dev

Production Build ​

bash
# Build production
pnpm build

# Preview production build
pnpm preview

Build Optimization ​

javascript
// vite.config.js
export default defineConfig({
  build: {
    target: 'es2015',
    minify: 'terser',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'],
          utils: ['@vueuse/core']
        }
      }
    }
  }
})

Deploy with Docker ​

Dockerfile ​

dockerfile
# Dockerfile
FROM node:20-alpine as builder

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Docker Compose ​

yaml
# docker-compose.yml
version: '3.8'
services:
  app:
    build: .
    ports:
      - "80:80"
    environment:
      - NODE_ENV=production

Run ​

bash
# Build and run
docker-compose up --build

# Run in background
docker-compose up -d

Environment Variables ​

Environment Configuration ​

bash
# .env.development
VITE_API_URL=http://localhost:3000
VITE_APP_TITLE=My App (Dev)

# .env.production
VITE_API_URL=https://api.myapp.com
VITE_APP_TITLE=My App

Usage in Code ​

javascript
// Using environment variables
const apiUrl = import.meta.env.VITE_API_URL
const appTitle = import.meta.env.VITE_APP_TITLE

SSL and HTTPS ​

SSL Configuration ​

javascript
// vite.config.js
export default defineConfig({
  server: {
    https: true
  }
})

Let's Encrypt ​

bash
# Install Certbot
sudo apt install certbot

# Get certificate
sudo certbot certonly --webroot -w /var/www/html -d myapp.com

Monitoring and Logging ​

Error Tracking ​

javascript
// main.js
import * as Sentry from '@sentry/vue'

Sentry.init({
  app,
  dsn: 'YOUR_SENTRY_DSN',
  environment: import.meta.env.MODE
})

Performance Monitoring ​

javascript
// Using Web Vitals
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals'

getCLS(console.log)
getFID(console.log)
getFCP(console.log)
getLCP(console.log)
getTTFB(console.log)

Backup and Recovery ​

Backup Strategy ​

bash
# Backup database
pg_dump myapp > backup.sql

# Backup files
tar -czf backup.tar.gz /var/www/myapp

# Automated backup script
#!/bin/bash
DATE=$(date +%Y%m%d_%H%M%S)
tar -czf backup_$DATE.tar.gz /var/www/myapp

Recovery Plan ​

  1. Assessment - damage assessment
  2. Backup Restoration - restore backup
  3. Verification - verify functionality
  4. Monitoring - monitor system

Security ​

Security Headers ​

javascript
// nginx.conf
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "no-referrer-when-downgrade" always;
add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;

Rate Limiting ​

javascript
// nginx.conf
limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s;
location /api/ {
    limit_req zone=api burst=20 nodelay;
}

Troubleshooting ​

Common Issues ​

  1. Build Failures - check dependencies and syntax
  2. Deployment Issues - check environment variables
  3. Performance Problems - check bundle size and optimization
  4. SSL Issues - check certificate and configuration

Debug Commands ​

bash
# Check logs
docker logs container_name

# Check processes
ps aux | grep node

# Check ports
netstat -tulpn | grep :80

# Check disk space
df -h