如何把React.js 項目部署到服務器

# 如何把React.js 項目部署到服務器

## 前言

React.js 作為當前最流行的前端框架之一，開發完成后如何部署到生產環境是開發者必須掌握的技能。本文將詳細介紹從項目構建到服務器部署的全流程，涵蓋本地打包、服務器配置、Nginx部署、HTTPS配置等核心環節。

---

## 一、項目構建準備

### 1. 優化生產環境配置
在部署前需確保項目已針對生產環境優化：
```bash
# 檢查package.json中的生產依賴
npm install --only=prod

# 清理無用依賴
npm prune

2. 環境變量配置

創建.env.production文件配置生產環境變量：

REACT_APP_API_BASE_URL=https://api.yourdomain.com
REACT_APP_ENV=production

3. 生成生產環境構建包

npm run build

構建完成后會在項目根目錄生成build/文件夾，包含所有靜態資源。

二、服務器環境配置

1. 服務器基礎要求

• Linux服務器（推薦Ubuntu/CentOS）
• Node.js 16+ 運行環境
• Nginx/Apache 網頁服務器
• 域名及SSL證書（可選但推薦）

2. 安裝必要軟件

# Ubuntu示例
sudo apt update
sudo apt install -y nginx nodejs npm

3. 上傳構建文件

通過SFTP/SCP或Git將build/目錄上傳至服務器：

scp -r build/ user@your_server_ip:/var/www/react-app/

三、Nginx服務器配置

1. 創建Nginx配置文件

/etc/nginx/sites-available/yourdomain.com：

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    root /var/www/react-app/build;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 靜態資源緩存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }
}

2. 啟用配置并重啟Nginx

sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled
sudo nginx -t  # 測試配置
sudo systemctl restart nginx

四、HTTPS安全配置（Let’s Encrypt）

1. 安裝Certbot工具

sudo apt install -y certbot python3-certbot-nginx

2. 獲取SSL證書

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

3. 自動續期配置

證書默認90天有效期，添加自動續期：

sudo certbot renew --dry-run

五、高級部署方案

1. PM2進程管理（適用于服務端渲染）

npm install -g pm2
pm2 serve /var/www/react-app/build 3000 --spa
pm2 startup
pm2 save

2. Docker容器化部署

創建Dockerfile：

FROM node:16-alpine as builder
WORKDIR /app
COPY . .
RUN npm install && npm run build

FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80

構建并運行：

docker build -t react-app .
docker run -d -p 80:80 react-app

六、常見問題排查

1. 白屏問題

   • 檢查Nginx的try_files配置
   • 確認資源路徑是否正確（尤其使用basename時）

2. API請求404

   • 配置Nginx反向代理：

   location /api/ {
      proxy_pass https://api.yourdomain.com;
   }
   

3. 緩存更新失效

   • 在build/asset-manifest.json中檢查文件哈希值
   • 考慮添加版本查詢參數

結語

通過以上步驟，您的React應用已成功部署到生產環境。建議定期： - 監控服務器資源使用情況 - 設置CI/CD自動化部署流程 - 啟用Gzip壓縮和CDN加速提升性能

部署只是開始，持續優化才能保證最佳用戶體驗！ “`

注：實際部署時請根據項目具體情況調整配置參數，不同服務器環境可能存在細微差異。