在将 Tailwind CSS 项目部署到生产环境时，需要做好各项配置和优化工作。本节将详细介绍如何配置和优化部署环境。

环境配置

Docker 配置

  1. # Dockerfile
  2. # 构建阶段
  3. FROM node:16-alpine as builder
  5. WORKDIR /app
  7. COPY package*.json ./
  8. RUN npm ci
  10. COPY . .
  11. RUN npm run build
  13. # 生产阶段
  14. FROM nginx:alpine
  16. # 复制构建产物
  17. COPY --from=builder /app/dist /usr/share/nginx/html
  18. # 复制 Nginx 配置
  19. COPY nginx.conf /etc/nginx/conf.d/default.conf
  21. EXPOSE 80
  23. CMD ["nginx", "-g", "daemon off;"]

Nginx 配置

  1. # nginx.conf
  2. server {
  3.     listen 80;
  4.     server_name localhost;
  5.     root /usr/share/nginx/html;
  6.     index index.html;
  8.     # Gzip 压缩
  9.     gzip on;
  10.     gzip_vary on;
  11.     gzip_proxied any;
  12.     gzip_comp_level 6;
  13.     gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;
  15.     # 缓存配置
  16.     location ~* \.(?:css|js)$ {
  17.         expires 1y;
  18.         access_log off;
  19.         add_header Cache-Control "public";
  20.     }
  22.     location / {
  23.         try_files $uri $uri/ /index.html;
  24.     }
  25. }

构建配置

生产环境配置

  1. // tailwind.config.js
  2. module.exports = {
  3.   mode: 'jit',
  4.   purge: {
  5.     enabled: process.env.NODE_ENV === 'production',
  6.     content: [
  7.       './src/**/*.{js,jsx,ts,tsx}',
  8.       './public/index.html'
  9.     ],
  10.     options: {
  11.       safelist: [
  12.         /^bg-/,
  13.         /^text-/,
  14.         'prose',
  15.         'prose-lg'
  16.       ]
  17.     }
  18.   },
  19.   theme: {
  20.     extend: {
  21.       // 生产环境特定配置
  22.     }
  23.   }
  24. }

构建脚本

  1. // scripts/build.js
  2. const webpack = require('webpack');
  3. const TerserPlugin = require('terser-webpack-plugin');
  4. const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
  6. module.exports = {
  7.   mode: 'production',
  8.   optimization: {
  9.     minimizer: [
  10.       new TerserPlugin({
  11.         terserOptions: {
  12.           compress: {
  13.             drop_console: true,
  14.           },
  15.         },
  16.       }),
  17.       new CssMinimizerPlugin({
  18.         minimizerOptions: {
  19.           preset: [
  20.             'default',
  21.             {
  22.               discardComments: { removeAll: true },
  23.             },
  24.           ],
  25.         },
  26.       }),
  27.     ],
  28.   },
  29.   plugins: [
  30.     new webpack.DefinePlugin({
  31.       'process.env.NODE_ENV': JSON.stringify('production'),
  32.     }),
  33.   ],
  34. };

CI/CD 配置

GitHub Actions

  1. # .github/workflows/deploy.yml
  2. name: Deploy
  4. on:
  5.   push:
  6.     branches: [ main ]
  8. jobs:
  9.   deploy:
  10.     runs-on: ubuntu-latest
  12.     steps:
  13.       - uses: actions/checkout@v2
  15.       - name: Setup Node.js
  16.         uses: actions/setup-node@v2
  17.         with:
  18.           node-version: '16'
  19.           cache: 'npm'
  21.       - name: Install dependencies
  22.         run: npm ci
  24.       - name: Build
  25.         run: npm run build
  26.         env:
  27.           NODE_ENV: production
  29.       - name: Deploy to server
  30.         uses: appleboy/scp-action@master
  31.         with:
  32.           host: ${{ secrets.HOST }}
  33.           username: ${{ secrets.USERNAME }}
  34.           key: ${{ secrets.SSH_KEY }}
  35.           source: "dist/"
  36.           target: "/var/www/html"

部署脚本

  1. #!/bin/bash
  2. # deploy.sh
  4. # 环境变量
  5. ENV=$1
  6. CONFIG_FILE="config.$ENV.json"
  8. # 验证参数
  9. if [ -z "$ENV" ]; then
  10.     echo "Please specify environment (dev/staging/prod)"
  11.     exit 1
  12. fi
  14. # 构建项目
  15. echo "Building for $ENV environment..."
  16. npm run build:$ENV
  18. # 部署到服务器
  19. echo "Deploying to $ENV server..."
  20. rsync -avz --delete dist/ user@server:/path/to/$ENV/
  22. # 清理缓存
  23. echo "Clearing cache..."
  24. curl -X POST https://api.cloudflare.com/client/v4/zones/$ZONE_ID/purge_cache \
  25.   -H "Authorization: Bearer $CF_TOKEN" \
  26.   -H "Content-Type: application/json" \
  27.   --data '{"purge_everything":true}'
  29. echo "Deployment completed!"

性能优化

静态资源优化

  1. // webpack.prod.js
  2. const CompressionPlugin = require('compression-webpack-plugin');
  3. const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
  5. module.exports = {
  6.   plugins: [
  7.     new CompressionPlugin({
  8.       test: /\.(js|css|html|svg)$/,
  9.       algorithm: 'gzip',
  10.     }),
  11.     new ImageMinimizerPlugin({
  12.       minimizer: {
  13.         implementation: ImageMinimizerPlugin.imageminMinify,
  14.         options: {
  15.           plugins: [
  16.             ['mozjpeg', { quality: 80 }],
  17.             ['pngquant', { quality: [0.6, 0.8] }],
  18.             ['svgo', {
  19.               plugins: [
  20.                 { removeViewBox: false },
  21.                 { removeEmptyAttrs: false }
  22.               ]
  23.             }]
  24.           ]
  25.         }
  26.       }
  27.     })
  28.   ]
  29. };

缓存策略

  1. // next.config.js
  2. module.exports = {
  3.   generateBuildId: async () => {
  4.     // 使用 Git commit hash 作为构建 ID
  5.     return require('child_process')
  6.       .execSync('git rev-parse HEAD')
  7.       .toString().trim()
  8.   },
  10.   // 静态资源缓存配置
  11.   async headers() {
  12.     return [
  13.       {
  14.         source: '/_next/static/:path*',
  15.         headers: [
  16.           {
  17.             key: 'Cache-Control',
  18.             value: 'public, max-age=31536000, immutable'
  19.           }
  20.         ]
  21.       }
  22.     ]
  23.   }
  24. }

监控配置

性能监控

  1. // utils/monitoring.ts
  2. export const setupPerformanceMonitoring = () => {
  3.   // Web Vitals 监控
  4.   import('web-vitals').then(({ getCLS, getFID, getLCP }) => {
  5.     getCLS(console.log);
  6.     getFID(console.log);
  7.     getLCP(console.log);
  8.   });
  10.   // 错误监控
  11.   window.addEventListener('error', (event) => {
  12.     console.error('Global error:', event.error);
  13.     // 发送到监控服务
  14.   });
  16.   // 性能标记
  17.   performance.mark('app-start');
  19.   return () => {
  20.     performance.measure('app-load', 'app-start');
  21.     const measurements = performance.getEntriesByType('measure');
  22.     console.log('Performance measurements:', measurements);
  23.   };
  24. };

日志配置

  1. // utils/logger.ts
  2. type LogLevel = 'info' | 'warn' | 'error';
  4. class Logger {
  5.   private env: string;
  7.   constructor() {
  8.     this.env = process.env.NODE_ENV || 'development';
  9.   }
  11.   log(level: LogLevel, message: string, data?: any) {
  12.     const timestamp = new Date().toISOString();
  13.     const logData = {
  14.       timestamp,
  15.       level,
  16.       message,
  17.       data,
  18.       env: this.env
  19.     };
  21.     if (this.env === 'production') {
  22.       // 发送到日志服务
  23.       fetch('/api/logs', {
  24.         method: 'POST',
  25.         body: JSON.stringify(logData)
  26.       });
  27.     } else {
  28.       console.log(`[${timestamp}] ${level.toUpperCase()}: ${message}`, data);
  29.     }
  30.   }
  31. }
  33. export const logger = new Logger();

安全配置

内容安全策略

  1. // next.config.js
  2. const securityHeaders = [
  3.   {
  4.     key: 'Content-Security-Policy',
  5.     value: `
  6.       default-src 'self';
  7.       style-src 'self' 'unsafe-inline';
  8.       script-src 'self' 'unsafe-eval';
  9.       img-src 'self' data: https:;
  10.       font-src 'self';
  11.     `.replace(/\s{2,}/g, ' ').trim()
  12.   },
  13.   {
  14.     key: 'X-XSS-Protection',
  15.     value: '1; mode=block'
  16.   },
  17.   {
  18.     key: 'X-Frame-Options',
  19.     value: 'SAMEORIGIN'
  20.   },
  21.   {
  22.     key: 'X-Content-Type-Options',
  23.     value: 'nosniff'
  24.   }
  25. ];
  27. module.exports = {
  28.   async headers() {
  29.     return [
  30.       {
  31.         source: '/:path*',
  32.         headers: securityHeaders,
  33.       },
  34.     ]
  35.   }
  36. }

最佳实践

  1. 部署准备

    • 环境配置完整
    • 构建流程优化
    • 部署脚本准备

  2. 性能优化

    • 资源压缩
    • 缓存策略
    • 监控配置

  3. 安全考虑

    • 安全头部配置
    • 错误处理
    • 日志记录

  4. 维护策略

    • 自动化部署
    • 监控告警
    • 回滚机制