Deployment

Deployment là quá trình đưa ứng dụng lên môi trường production để người dùng có thể truy cập. Đây là bước cuối cùng trong quy trình phát triển.

🚀 Deployment là gì?

Deployment bao gồm:

Build ứng dụng cho production
Upload lên hosting service
Cấu hình domain và SSL
Setup CI/CD pipeline

🎬 Video hướng dẫn

🖼️ Hình ảnh minh họa

📚 Các nền tảng deployment

1. Vercel

Tốt nhất cho React và Next.js:

1
2
3
4
5
# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

2. Netlify

Dễ sử dụng, hỗ trợ nhiều framework:

1
2
3
4
5
# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod

3. GitHub Pages

Miễn phí cho static sites:

1
2
3
4
5
# Build
npm run build

# Deploy với gh-pages
npm install --save-dev gh-pages

4. AWS S3 + CloudFront

Cho ứng dụng lớn, cần performance cao:

1
2
3
4
5
# Build
npm run build

# Upload to S3
aws s3 sync build/ s3://your-bucket-name

🔨 Build cho Production

1
2
3
4
5
6
7
8
9
# React
npm run build

# Next.js
npm run build
npm start

# Vite
npm run build

🔐 Environment Variables

1
2
3
# .env.production
REACT_APP_API_URL=https://api.production.com
REACT_APP_API_KEY=your-api-key

⚙️ CI/CD với GitHub Actions

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
      - run: npm install
      - run: npm run build
      - run: npm run deploy

✅ Best Practices

Minify và compress assets
Enable gzip compression
Setup CDN cho static assets
Configure caching headers
Use HTTPS
Monitor performance
Setup error tracking (Sentry)

💪 Thực hành

Deploy React app lên Vercel
Setup custom domain
Configure CI/CD pipeline
Monitor và optimize performance

🔗 Tài nguyên

🎉 Kết thúc lộ trình

Chúc mừng! Bạn đã hoàn thành lộ trình Frontend Developer. Tiếp tục thực hành và xây dựng các dự án thực tế để củng cố kiến thức!