# Vercel 환경 변수 설정 가이드

## 현재 상황
- ✅ 코드 수정 완료 (`per_page=100`)
- ✅ 로컬 빌드 성공 (Post 22 포함)
- ✅ Data Cache Purge 완료
- ❌ Vercel 환경 변수 미설정 → Post 22 여전히 없음

## 필수 작업: Vercel 환경 변수 설정

### 1단계: Vercel Dashboard에서 환경 변수 추가

1. **https://vercel.com/dashboard** 접속

2. **PlanitAI_Inc_website** 프로젝트 선택

3. **Settings** 탭 클릭

4. 왼쪽 사이드바에서 **Environment Variables** 클릭

5. **Add New** 또는 **Create** 버튼 클릭

6. **첫 번째 환경 변수 추가:**
   ```
   Name (Key): NEXT_PUBLIC_WP_API_BASE
   Value: https://2025032623012012057904.onamaeweb.jp/blog/wp-json/wp/v2

   Environments (체크):
   ☑ Production
   ☑ Preview
   ☑ Development
   ```

7. **Save** 클릭

8. **두 번째 환경 변수 추가:**
   ```
   Name (Key): REVALIDATE_SECRET
   Value: LWCTd22HKmCa8uNqOvaoTYlXoNONFVlhx

   Environments (체크):
   ☑ Production
   ☑ Preview
   ☑ Development
   ```

9. **Save** 클릭

### 2단계: 재배포 (중요!)

환경 변수를 추가해도 **기존 배포는 변경되지 않습니다**.
새로운 배포를 해야 환경 변수가 적용됩니다.

#### 옵션 A: Vercel Dashboard에서 Redeploy

1. **Deployments** 탭으로 이동
2. 최신 Production 배포 클릭
3. 우측 상단 메뉴 (⋮) 클릭
4. **Redeploy** 선택
5. ⚠️ **중요: "Use existing Build Cache" 체크 해제!**
6. **Redeploy** 버튼 클릭
7. 배포 완료 대기 (2-5분)

#### 옵션 B: Git Push로 재배포

```bash
cd /var/www/tkim.planitai.co.jp/blog/PlanitAI_Inc_website/nextjs
git commit --allow-empty -m "chore: trigger rebuild with environment variables"
git push
```

### 3단계: 배포 완료 대기

Vercel Dashboard → Deployments에서:
- 상태가 **"Building"** → **"Ready"**로 변경될 때까지 대기
- 배포 로그 확인:
  ```
  ✓ Creating an optimized production build
  - Environments: .env
  [API] Fetching all posts  ← 이 메시지가 보여야 함!
  ✓ Compiled successfully
  ```

### 4단계: 확인

```bash
# 1. 캐시 상태 확인
curl -sI "https://www.planitai.co.jp/blogs" | grep -E "x-vercel-cache|age|etag"

# 기대 결과:
# x-vercel-cache: MISS
# age: 0-30
# etag: <새로운 값>

# 2. Post 22 확인
curl -s "https://www.planitai.co.jp/blogs" | grep -o "AIと共に働くということ"

# 기대 결과: AIと共に働くということ (여러 번 출력)
```

## 환경 변수 설정 확인 방법

### 방법 1: Vercel Dashboard
```
Settings → Environment Variables
→ NEXT_PUBLIC_WP_API_BASE 존재 확인
```

### 방법 2: 배포 로그
```
Deployments → 최신 배포 클릭 → Logs
→ "- Environments: .env" 메시지 확인
→ "[API] Fetching all posts" 메시지 확인
```

### 방법 3: 브라우저 개발자 도구
```
F12 → Console
→ 실행: console.log(process.env.NEXT_PUBLIC_WP_API_BASE)
```
**주의**: `NEXT_PUBLIC_` 접두사가 있는 변수만 브라우저에서 확인 가능

## 트러블슈팅

### 문제 1: 환경 변수를 추가했는데도 배포에 반영 안 됨

**원인**: 기존 배포는 환경 변수가 없는 상태로 빌드됨

**해결**: 재배포 필수!
```
Deployments → Redeploy (빌드 캐시 사용 안 함)
```

### 문제 2: 재배포했는데도 Post 22가 안 보임

**확인 사항**:

1. **환경 변수 오타 확인**
   ```
   올바름: NEXT_PUBLIC_WP_API_BASE
   틀림: NEXT_PUBLIC_WORDPRESS_API_BASE
   ```

2. **URL 끝 슬래시 확인**
   ```
   올바름: .../wp/v2
   틀림: .../wp/v2/
   ```

3. **Environments 체크 확인**
   - Production 체크 필수!

4. **배포 로그 확인**
   ```
   [API] Fetching all posts  ← 이 메시지가 있어야 함
   ```
   없다면: 환경 변수가 적용 안 됨

### 문제 3: 배포는 됐는데 캐시 때문에 안 보임

```bash
# Vercel Cache 다시 삭제
Settings → Data Cache → Purge Everything

# 또는 하드 리프레시
Ctrl + Shift + R (Windows)
Cmd + Shift + R (Mac)
```

## 완료 체크리스트

- [ ] Vercel에 `NEXT_PUBLIC_WP_API_BASE` 환경 변수 추가
- [ ] Vercel에 `REVALIDATE_SECRET` 환경 변수 추가
- [ ] Production 환경 체크 확인
- [ ] Redeploy 실행 (빌드 캐시 사용 안 함)
- [ ] 배포 상태 "Ready" 확인
- [ ] 배포 로그에서 "[API] Fetching all posts" 확인
- [ ] 웹사이트에서 Post 22 표시 확인

## 예상 소요 시간

| 단계 | 시간 |
|-----|------|
| 환경 변수 추가 | 2분 |
| Redeploy | 3-5분 |
| 캐시 전파 | 1-2분 |
| **총 예상** | **6-10분** |

---

**작성일**: 2025-11-27
**다음 단계**: Vercel 환경 변수 추가 → Redeploy