Deployment Guide

Complete guide for deploying the AI Store application.

Pre-Deployment Checklist

• [ ] Environment variables configured
• [ ] Build passes without errors
• [ ] Tests pass
• [ ] Performance budgets met
• [ ] Security headers configured
• [ ] SEO metadata verified
• [ ] PWA manifest configured
• [ ] Analytics configured
• [ ] Error tracking configured

Environment Variables

Create a .env.production file with:

# Site Configuration
NEXT_PUBLIC_SITE_URL=https://your-domain.com

# Analytics (optional)
NEXT_PUBLIC_ANALYTICS_ID=your-analytics-id

# Feature Flags (optional)
NEXT_PUBLIC_ENABLE_DEV_TOOLS=false

Build Process

Local Build Test

# Install dependencies
npm install

# Run build
npm run build

# Test production build locally
npm start

Build Output

The build process generates:

• .next/ - Next.js build output
• public/ - Static files
• Optimized bundles
• Static pages

Deployment Options

Vercel (Recommended)

Why Vercel?

• Zero-config deployment
• Automatic HTTPS
• Global CDN
• Preview deployments
• Analytics integration

Steps:

1. Install Vercel CLI

   npm i -g vercel
   

2. Deploy

   vercel
   

3. Production Deployment

   vercel --prod
   

Configuration:

Create vercel.json:

{
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "nextjs",
  "regions": ["iad1"]
}

Netlify

Steps:

1. Install Netlify CLI

   npm i -g netlify-cli
   

2. Build Settings

   • Build command: npm run build
   • Publish directory: .next

3. Deploy

   netlify deploy --prod
   

Configuration:

Create netlify.toml:

[build]
  command = "npm run build"
  publish = ".next"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Docker

Dockerfile:

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci

# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# Production image
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]

Build and Run:

# Build
docker build -t ai-store .

# Run
docker run -p 3000:3000 ai-store

Traditional Hosting

Requirements:

• Node.js 18+
• npm or yarn
• PM2 (recommended for process management)

Steps:

1. Build on Server

   npm install
   npm run build
   

2. Start with PM2

   pm2 start npm --name "ai-store" -- start
   

3. Configure Nginx

   server {
       listen 80;
       server_name your-domain.com;
   
       location / {
           proxy_pass http://localhost:3000;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
       }
   }
   

Post-Deployment

Verification

1. Check Build

   • Visit the site
   • Check console for errors
   • Verify all routes work

2. Performance

   • Run Lighthouse audit
   • Check Web Vitals
   • Verify caching works

3. SEO

   • Check meta tags
   • Verify sitemap
   • Test robots.txt

4. PWA

   • Test offline functionality
   • Verify manifest
   • Check install prompt

Monitoring

1. Set Up Analytics

   • Configure analytics service
   • Verify tracking works
   • Set up dashboards

2. Error Tracking

   • Configure error service
   • Set up alerts
   • Monitor error rates

3. Performance Monitoring

   • Set up performance monitoring
   • Configure alerts
   • Track Core Web Vitals

CI/CD

GitHub Actions

Create .github/workflows/deploy.yml:

name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run build
      - run: npm test
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}

GitLab CI

Create .gitlab-ci.yml:

stages:
  - build
  - deploy

build:
  stage: build
  image: node:18
  script:
    - npm ci
    - npm run build
    - npm test
  artifacts:
    paths:
      - .next/

deploy:
  stage: deploy
  script:
    - npm install -g vercel
    - vercel --prod --token $VERCEL_TOKEN
  only:
    - main

Environment-Specific Configurations

Development

NODE_ENV=development
NEXT_PUBLIC_SITE_URL=http://localhost:3000

Staging

NODE_ENV=production
NEXT_PUBLIC_SITE_URL=https://staging.your-domain.com

Production

NODE_ENV=production
NEXT_PUBLIC_SITE_URL=https://your-domain.com

Performance Optimization

Before Deployment

1. Optimize Images

   • Convert to WebP/AVIF
   • Compress images
   • Use appropriate sizes

2. Bundle Analysis

   npm run analyze
   

3. Lighthouse Audit

   • Run local audit
   • Fix issues
   • Target 90+ scores

After Deployment

1. CDN Configuration

   • Enable CDN caching
   • Configure cache headers
   • Set up edge caching

2. Compression

   • Enable gzip/brotli
   • Configure compression levels

Security Checklist

• [ ] HTTPS enabled
• [ ] Security headers configured
• [ ] CSP configured
• [ ] Rate limiting enabled
• [ ] Input validation
• [ ] XSS protection
• [ ] CSRF protection
• [ ] Secure cookies
• [ ] Environment variables secured

Rollback Procedure

Vercel

# List deployments
vercel ls

# Rollback to previous
vercel rollback [deployment-url]

Manual Rollback

1. Revert code changes
2. Rebuild
3. Redeploy
4. Verify functionality

Troubleshooting

Build Failures

1. Check Node.js version (18+)
2. Clear .next directory
3. Delete node_modules and reinstall
4. Check for TypeScript errors

Runtime Errors

1. Check environment variables
2. Verify API endpoints
3. Check browser console
4. Review server logs

Performance Issues

1. Check bundle size
2. Verify caching
3. Check image optimization
4. Review Core Web Vitals

Maintenance

Regular Tasks

• Update dependencies monthly
• Review security advisories
• Monitor performance metrics
• Review error logs
• Update documentation

Backup Strategy

• Code: Git repository
• Database: Regular backups (if applicable)
• Environment: Documented configuration

Support

For deployment issues:

1. Check documentation
2. Review logs
3. Contact support
4. Open issue on GitHub