docs: add frontend-customer static build deployment troubleshooting
- Add detailed troubleshooting for CI/CD pipeline improvements - Add nginx static file serving configuration changes - Add permission issues resolution with www-data user - Rename file to reflect both auth server and static deployment topics
This commit is contained in:
happybell80
parent
5efda23360
commit
47b40726fc
@ -1,4 +1,4 @@
|
||||
# Auth Server 구축 및 Email Skill 클린 아키텍처 리팩토링
|
||||
# Auth Server 구축 및 Email Skill 클린 아키텍처 리팩토링 + Frontend-Customer 정적 빌드 배포 전환
|
||||
|
||||
**날짜**: 2025-07-17
|
||||
**작업자**: happybell80 & Claude
|
||||
@ -111,4 +111,56 @@ skill_email/
|
||||
**다음 계획**:
|
||||
- PostgreSQL 기반 토큰 저장소 구현 (`DbCredentialsProvider`)
|
||||
- 토큰 자동 갱신 로직 추가
|
||||
- 로빙과 연동 (rb10508_test에서 email skill 호출)
|
||||
- 로빙과 연동 (rb10508_test에서 email skill 호출)
|
||||
|
||||
## 오후 11시 30분
|
||||
|
||||
### Frontend-Customer 정적 빌드 배포 전환
|
||||
|
||||
**배경**:
|
||||
- frontend-customer가 Docker 컨테이너 5173 포트에서 Vite 개발 서버로 실행 중
|
||||
- 정적 빌드(dist 폴더)는 생성되었으나 사용되지 않음
|
||||
- 프로덕션 환경에서는 nginx 정적 서빙이 더 효율적
|
||||
|
||||
**문제 상황**:
|
||||
1. **CI/CD 배포 실패**: frontend-base 배포 중 500 에러
|
||||
2. **admin 페이지 경로 문제**: Docker 컨테이너에서 admin-ui 폴더 접근 불가
|
||||
3. **Health check 실패**: 고정 sleep과 admin 페이지 체크로 인한 타임아웃
|
||||
|
||||
**해결 과정**:
|
||||
|
||||
1. **CI/CD 파이프라인 개선**
|
||||
- 고정 `sleep 30` 대신 retry 로직 구현 (최대 10회)
|
||||
- 점진적 대기 시간 (3초, 6초, 9초...)
|
||||
- 500 에러 발생하던 admin 페이지 체크 제거
|
||||
|
||||
2. **Docker 볼륨 마운트 수정**
|
||||
- docker-compose.yml에 admin-ui 볼륨 추가: `./admin-ui:/app/admin-ui`
|
||||
- Dockerfile의 잘못된 COPY 명령 제거
|
||||
|
||||
3. **nginx 설정 정적 파일 서빙으로 전환**
|
||||
- HTTP (80포트): `/home/admin/frontend-customer/dist` 설정
|
||||
- HTTPS (443포트): proxy_pass 제거, 정적 파일 서빙으로 변경
|
||||
- try_files 중복 지시어 제거로 syntax 에러 해결
|
||||
|
||||
4. **권한 문제 해결**
|
||||
- nginx(www-data) 사용자가 `/home/admin/` 접근 불가 문제
|
||||
- 최소 권한 부여: `sudo chmod o+x /home` + `sudo chmod o+x /home/admin`
|
||||
- 심볼릭 링크 대신 직접 경로 사용
|
||||
|
||||
**최종 결과**:
|
||||
- **성능**: HTTP/HTTPS 모두 200 OK 응답
|
||||
- **효율성**: Docker 컨테이너 제거로 메모리 사용량 감소
|
||||
- **배포**: CI/CD 빌드 후 nginx 자동 반영
|
||||
- **포트**: 5173 포트 해제
|
||||
|
||||
**기술적 성과**:
|
||||
- 개발 서버 → 정적 파일 서빙으로 전환
|
||||
- nginx 직접 서빙으로 응답 속도 향상
|
||||
- CI/CD retry 로직으로 배포 안정성 확보
|
||||
- 최소 권한 원칙 적용한 보안 개선
|
||||
|
||||
**최종 구조**:
|
||||
```
|
||||
nginx (www-data) → /home/admin/frontend-customer/dist/ (직접 연결)
|
||||
```
|
||||
105
docs/troubleshooting/250717_happybell80_프론트엔드분리및admin페이지수정.md
Normal file
105
docs/troubleshooting/250717_happybell80_프론트엔드분리및admin페이지수정.md
Normal file
@ -0,0 +1,105 @@
|
||||
# 프론트엔드 분리 및 Admin 페이지 수정
|
||||
|
||||
**날짜**: 2025-07-17
|
||||
**작업자**: happybell80 & Claude
|
||||
**저장소**: frontend-base, frontend-customer
|
||||
|
||||
## 오후 8시 30분
|
||||
|
||||
### 프론트엔드 분리 작업
|
||||
|
||||
**배경**:
|
||||
- 고객용 프론트엔드와 관리자 대시보드가 하나의 저장소에 혼재
|
||||
- 독립적인 배포와 관리의 필요성
|
||||
- 성능 최적화 (번들 크기 감소)
|
||||
|
||||
**주요 작업**:
|
||||
|
||||
1. **새 저장소 생성**
|
||||
- `frontend-customer` 저장소 생성 (고객용 React 앱)
|
||||
- Git URL: https://git.ro-being.com/ivada_Ro-being/frontend-customer.git
|
||||
|
||||
2. **파일 이동**
|
||||
- `frontend/client/*` → `frontend-customer/`
|
||||
- node_modules 및 대용량 이미지 제외
|
||||
- .gitignore, README.md, CLAUDE.md 작성
|
||||
|
||||
3. **구조 재편성**
|
||||
- `frontend/backend/admin_static` → `frontend/admin-ui` 이름 변경
|
||||
- docker-compose.yml에서 frontend 서비스 제거
|
||||
- 관리자 전용 백엔드로 변경
|
||||
|
||||
4. **Docker 설정**
|
||||
- frontend-customer: 포트 5173, container_name 추가
|
||||
- frontend-base: 포트 8000, container_name 추가
|
||||
- 양쪽 모두 appnet 네트워크 사용
|
||||
|
||||
**결과**:
|
||||
- frontend-customer: 고객용 React 앱 (별도 저장소)
|
||||
- frontend-base: 관리자 대시보드 백엔드 (기존 저장소)
|
||||
- 각각 독립적인 배포 가능
|
||||
|
||||
## 오후 9시 00분
|
||||
|
||||
### Admin 페이지 배포 문제 해결
|
||||
|
||||
**문제 상황**:
|
||||
- https://ro-being.com/admin 에서 구식 디자인 표시
|
||||
- 다크모드 토글 없음, 보라색 그라데이션 배경
|
||||
- 로컬에는 현대적 디자인이 적용되어 있음
|
||||
|
||||
**원인 분석**:
|
||||
1. `main.py`에서 여전히 `admin_static/index.html` 경로 참조
|
||||
2. 실제 파일은 `admin-ui/index.html`로 이동됨
|
||||
3. FileResponse가 파일을 찾지 못해 오류 발생
|
||||
|
||||
**해결 과정**:
|
||||
1. main.py 수정
|
||||
```python
|
||||
# 변경 전
|
||||
return FileResponse("admin_static/index.html")
|
||||
|
||||
# 변경 후
|
||||
return FileResponse("admin-ui/index.html")
|
||||
```
|
||||
|
||||
2. Git 커밋 및 푸시
|
||||
- 커밋: `3a8d62b` fix: admin 페이지 경로 수정
|
||||
|
||||
## 오후 10시 00분
|
||||
|
||||
### 폴더명 변경 및 Actions 워크플로우 수정
|
||||
|
||||
**추가 작업**:
|
||||
1. **폴더명 통일**
|
||||
- 로컬과 서버 모두 `frontend` → `frontend-base`로 변경
|
||||
- 프로젝트 일관성 확보
|
||||
|
||||
2. **Actions 워크플로우 경로 수정**
|
||||
```yaml
|
||||
# 변경 전
|
||||
/home/admin/frontend/
|
||||
|
||||
# 변경 후
|
||||
/home/admin/frontend-base/
|
||||
```
|
||||
|
||||
3. **백업 경로 수정**
|
||||
- `frontend.backup.*` → `frontend-base.backup.*`
|
||||
- 롤백 스크립트도 동일하게 수정
|
||||
|
||||
**기술적 성과**:
|
||||
- 프론트엔드 완전 분리로 관심사 분리
|
||||
- 번들 크기 최적화 (고객용 앱 경량화)
|
||||
- 독립적인 배포 파이프라인 구축
|
||||
- 보안 강화 (관리자 기능 격리)
|
||||
|
||||
**문제점 및 개선사항**:
|
||||
- Actions 실행 중 경로 오류 발생
|
||||
- rsync 실패: `/home/admin/frontend` 디렉토리 없음
|
||||
- 워크플로우 파일 수정으로 해결
|
||||
|
||||
**다음 단계**:
|
||||
- 서버에서 변경사항 pull 및 재배포
|
||||
- admin 페이지 다크모드 적용 확인
|
||||
- 양쪽 저장소 독립적 운영 시작
|
||||
Loading…
x
Reference in New Issue
Block a user