Deployment Strategies

Vercel, Netlify, Docker, CI/CD pipelines, and production optimization.

Overview

Deployment strategies ensure reliable, fast, and scalable delivery of React applications.

Key Concepts

• Vercel/Netlify — Zero-config deployment platforms
• Docker — Containerized deployment
• CI/CD — Automated testing and deployment
• Environment Variables — Configuration per environment
• CDN — Content delivery for static assets

Code Examples

# GitHub Actions CI/CD
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 test
      - run: npm run build
      - uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

# Dockerfile
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/out /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

// next.config.js
module.exports = {
  output: 'export',
  images: {
    unoptimized: true
  },
  trailingSlash: true
};

Practice

Set up a CI/CD pipeline for a Next.js app with automated testing and deployment.