# 배포 및 캐시 확인 가이드

## 현재 상황
- ✅ Git 커밋 완료 (576ae20)
- ✅ GitHub push 완료
- ✅ 로컬 코드에 `per_page=100` 포함 확인
- ✅ Revalidate API 호출 성공
- ✅ WordPress API에서 Post 22 정상 반환
- ❌ 웹사이트에 여전히 2개만 표시

## 문제 진단

### 가능한 원인

1. **Vercel 배포 미완료**
   - GitHub push 후 Vercel 빌드 시간 필요 (보통 1-5분)
   - 빌드 실패 가능성

2. **Next.js Static Generation 캐시**
   - `/blogs` 페이지가 빌드 타임에 정적 생성됨
   - Revalidate만으로는 빌드 타임 캐시 갱신 안 될 수 있음

3. **Vercel Edge Cache**
   - Vercel의 Edge Network 캐시
   - 여러 리전에 배포된 캐시가 갱신되지 않았을 수 있음

## 확인 및 해결 방법

### 1단계: Vercel 배포 상태 확인 (최우선)

#### GitHub에서 확인
1. https://github.com/planitaicojp/PlanitAI_Inc_website 접속
2. "Actions" 탭 클릭
3. 최근 workflow 실행 상태 확인
4. 또는 커밋 옆에 체크마크(✓) 또는 X 확인

#### Vercel Dashboard에서 확인
1. https://vercel.com/dashboard 접속
2. PlanitAI_Inc_website 프로젝트 선택
3. "Deployments" 탭에서 최신 배포 상태 확인
4. 상태:
   - ✅ "Ready" - 배포 완료
   - ⏳ "Building" - 빌드 중
   - ❌ "Error" - 빌드 실패

### 2단계: 빌드 완료 후 강제 재배포 (옵션)

#### 방법 1: Vercel Dashboard에서 Redeploy
1. Vercel Dashboard → Deployments
2. 최신 배포 클릭
3. 우측 상단 "..." 메뉴 → "Redeploy"
4. "Use existing Build Cache" **체크 해제**
5. "Redeploy" 클릭

#### 방법 2: Git에서 빈 커밋으로 재배포
```bash
cd /var/www/tkim.planitai.co.jp/blog/PlanitAI_Inc_website/nextjs
git commit --allow-empty -m "chore: trigger rebuild for cache refresh"
git push
```

### 3단계: 배포 완료 후 캐시 완전 초기화

#### 옵션 A: Revalidate API 재호출 (간단)
```bash
curl "https://www.planitai.co.jp/api/revalidate?secret=LWCTd22HKmCa8uNqOvaoTYlXoNONFVlhx"
```

#### 옵션 B: 특정 경로 Revalidate (강력)
revalidate API를 POST로 호출하여 특정 slug 지정:
```bash
curl -X POST \
  "https://www.planitai.co.jp/api/revalidate" \
  -H "x-revalidate-secret: <SECRET>" \
  -H "Content-Type: application/json" \
  -d '{"slug": "ai-to-tomoni-hataraku-toiukoto"}'
```

#### 옵션 C: Vercel Cache 완전 삭제
Vercel Dashboard에서:
1. 프로젝트 Settings
2. "Data Cache" 섹션
3. "Purge Everything" 클릭

### 4단계: 브라우저 캐시 무시하고 확인

#### Chrome/Edge
```
Ctrl + Shift + R (Windows/Linux)
Cmd + Shift + R (Mac)
```

#### 시크릿 모드에서 확인
```
Ctrl + Shift + N (Windows/Linux)
Cmd + Shift + N (Mac)
```

#### 개발자 도구에서 확인
1. F12 → Network 탭
2. "Disable cache" 체크
3. 페이지 새로고침

### 5단계: 실제 API 응답 확인

서버에서 직접 페이지 HTML 확인:
```bash
curl -s "https://www.planitai.co.jp/blogs" | grep -o "AIと共に働くということ"
```

예상 결과:
- 있으면: 배포 완료, 브라우저 캐시 문제
- 없으면: 배포 미완료 또는 빌드 문제

## Next.js 캐싱 구조 이해

### 현재 설정 분석 (`lib/api.ts:272-276`)

```typescript
export const getAllPosts = unstable_cache(
  fetchAllPosts,
  ['all-posts'],
  { tags: ['posts'] }
);
```

**문제점:**
- `unstable_cache`는 서버 사이드 캐시
- 빌드 타임에 캐시된 데이터가 남아있을 수 있음
- `revalidateTag('posts')`로 무효화되어야 하지만, **새로운 빌드가 필요할 수 있음**

### 해결책: 빌드 타임 캐시 무효화

#### 임시 해결책: cache 옵션 변경
```typescript
// 현재
const res = await fetch(`${apiBase}/posts?_embed&per_page=100`);

// 변경 제안 (캐시 무효화 강제)
const res = await fetch(
  `${apiBase}/posts?_embed&per_page=100`,
  { cache: 'no-store' }  // 또는 { next: { revalidate: 60 } }
);
```

**주의:** 이 변경은 매번 WordPress API를 호출하므로 성능 영향 있음

## 디버깅 체크리스트

### Vercel 배포 확인
- [ ] GitHub Actions 또는 Vercel Dashboard에서 배포 상태 "Ready" 확인
- [ ] 배포 로그에 에러 없음 확인
- [ ] 최신 커밋 SHA (576ae20)가 배포됨 확인

### API 응답 확인
- [ ] WordPress API에서 Post 22 반환 확인 ✅ (이미 확인됨)
- [ ] Revalidate API 성공 응답 확인 ✅ (이미 확인됨)

### 캐시 확인
- [ ] 시크릿 모드에서 웹사이트 확인
- [ ] 다른 브라우저에서 확인
- [ ] 모바일에서 확인
- [ ] curl로 HTML 직접 확인

### 코드 확인
- [ ] 배포된 사이트의 소스 코드 확인 (개발자 도구)
- [ ] API 호출 로그 확인 (있다면)

## 즉시 실행할 명령어

### 1. 배포 상태가 "Ready"라면
```bash
# 시크릿 모드로 웹사이트 확인
# https://www.planitai.co.jp/blogs

# 또는 curl로 확인
curl -s "https://www.planitai.co.jp/blogs" | grep -o "AIと共に働くということ" && echo "✅ Post 22 found!" || echo "❌ Post 22 not found"
```

### 2. 배포 상태가 "Building"이라면
```bash
# 5분 대기 후 다시 확인
sleep 300
curl -s "https://www.planitai.co.jp/blogs" | grep -o "AIと共に働くということ"
```

### 3. 배포 상태가 "Error"라면
```bash
# Vercel 로그 확인 필요
# Dashboard에서 에러 메시지 확인

# 또는 로컬에서 빌드 테스트
cd /var/www/tkim.planitai.co.jp/blog/PlanitAI_Inc_website/nextjs
npm run build
```

## 추가 확인사항

### Next.js 환경 변수
Vercel에 환경 변수가 설정되어 있는지 확인:
- `NEXT_PUBLIC_WP_API_BASE`
- `REVALIDATE_SECRET`

확인 방법:
1. Vercel Dashboard → 프로젝트 → Settings → Environment Variables
2. 모든 필요한 변수가 설정되어 있는지 확인

### WordPress API 접근성
Vercel 서버에서 WordPress API에 접근 가능한지 확인:
- 방화벽 설정
- CORS 설정
- 네트워크 연결

## 예상 소요 시간

| 단계 | 소요 시간 |
|-----|---------|
| Vercel 빌드 | 2-5분 |
| Edge Cache 전파 | 1-2분 |
| Revalidate 처리 | 즉시-30초 |
| **총 예상 시간** | **3-8분** |

## 최종 확인 명령어

```bash
#!/bin/bash
echo "=== Deployment Check ==="
echo "1. Local code check:"
git log -1 --oneline

echo -e "\n2. WordPress API check:"
curl -s "https://2025032623012012057904.onamaeweb.jp/blog/wp-json/wp/v2/posts?per_page=100&_fields=id,title" | jq '[.[] | select(.title.rendered | contains("AIと共に働くということ"))]'

echo -e "\n3. Website check:"
curl -s "https://www.planitai.co.jp/blogs" | grep -o "AIと共に働くということ" && echo "✅ Post 22 IS displayed!" || echo "❌ Post 22 NOT displayed"

echo -e "\n4. Revalidate check:"
curl -s "https://www.planitai.co.jp/api/revalidate?secret=LWCTd22HKmCa8uNqOvaoTYlXoNONFVlhx"
```

## 문제가 계속되면

### 최후의 수단: 코드 변경으로 캐시 우회

`lib/api.ts` 수정:
```typescript
const res = await fetch(
  `${apiBase}/posts?_embed&per_page=100`,
  {
    cache: 'no-store',  // 캐시 완전 비활성화
    next: { revalidate: 0 }
  }
);
```

커밋 & 푸시:
```bash
git add lib/api.ts
git commit -m "fix: disable cache for WordPress API to force fresh data"
git push
```

---

**작성일**: 2025-11-27
**상태**: 배포 확인 대기 중