# 部署指南

## 問題診斷

您遇到的錯誤主要有：
1. **400 Bad Request** - 靜態資源無法加載
2. **404 Not Found** - `_rsc` 路由（React Server Components）無法訪問
3. **ChunkLoadError** - JavaScript chunk 加載失敗

## 解決步驟

### 1. 確保已構建生產版本

在伺服器上執行：

```bash
cd /var/www/gp-live
npm install
npm run build
```

### 2. 使用正確的 PM2 啟動命令

**錯誤的方式**（您目前使用的）：
```bash
PORT=3000 pm2 start npm --name gp-live -- start
```
這會執行 `next start`，而不是您的自定義 `server.js`。

**正確的方式**：
```bash
# 停止現有的進程
pm2 stop gp-live
pm2 delete gp-live

# 使用自定義 server.js 啟動
PORT=3000 NODE_ENV=production pm2 start server.js --name gp-live
```

或者使用 ecosystem 文件（推薦）：

創建 `ecosystem.config.js`：
```javascript
module.exports = {
  apps: [{
    name: 'gp-live',
    script: './server.js',
    instances: 1,
    exec_mode: 'fork',
    env: {
      NODE_ENV: 'production',
      PORT: 3000
    },
    error_file: './logs/pm2-error.log',
    out_file: './logs/pm2-out.log',
    log_date_format: 'YYYY-MM-DD HH:mm:ss Z',
    merge_logs: true,
    autorestart: true,
    max_memory_restart: '1G'
  }]
}
```

然後啟動：
```bash
pm2 start ecosystem.config.js
pm2 save
```

### 3. 更新 Nginx 配置

編輯 `/etc/nginx/sites-available/default`：

```nginx
server {
    listen 80;
    listen [::]:80;
    server_name live.gp777s.com; # 或您的 IP 地址

    client_max_body_size 100M;

    # 代理所有請求到 Next.js 應用
    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_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
        
        # 超時設置
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }

    # 處理所有 Next.js 內部路由（包括 _rsc, _next/static 等）
    location ~ ^/_next/ {
        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_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}
```

測試並重啟 Nginx：
```bash
sudo nginx -t
sudo systemctl restart nginx
```

### 4. 驗證部署

1. 檢查 PM2 狀態：
```bash
pm2 status
pm2 logs gp-live
```

2. 檢查 Next.js 是否正常運行：
```bash
curl http://localhost:3000
```

3. 檢查 Nginx 日誌：
```bash
sudo tail -f /var/log/nginx/error.log
sudo tail -f /var/log/nginx/access.log
```

## 常見問題

### 問題：仍然看到 400/404 錯誤

**解決方案**：
1. 確保已執行 `npm run build`
2. 檢查 `.next` 目錄是否存在且包含構建文件
3. 確認 PM2 使用的是 `server.js` 而不是 `next start`
4. 清除瀏覽器緩存並硬刷新（Ctrl+Shift+R）

### 問題：ChunkLoadError

**解決方案**：
1. 重新構建應用：`npm run build`
2. 重啟 PM2：`pm2 restart gp-live`
3. 確保 `.next` 目錄權限正確：`chmod -R 755 .next`

### 問題：_rsc 路由 404

**解決方案**：
1. 確保 Nginx 配置包含 `location ~ ^/_next/` 規則
2. 確認 `server.js` 正確處理所有路由
3. 檢查 Next.js 版本是否支持 App Router（需要 13+）

## 完整部署流程

```bash
# 1. 進入項目目錄
cd /var/www/gp-live

# 2. 拉取最新代碼（如果使用 Git）
git pull

# 3. 安裝依賴
npm install

# 4. 構建生產版本
npm run build

# 5. 停止舊進程
pm2 stop gp-live
pm2 delete gp-live

# 6. 啟動新進程
PORT=3000 NODE_ENV=production pm2 start server.js --name gp-live

# 7. 保存 PM2 配置
pm2 save

# 8. 檢查狀態
pm2 status
pm2 logs gp-live --lines 50
```