Loafacto Hub 문서

Appearance

Loafacto 문서/참고 문서/루트 문서/Frontend 배포 이슈 대응

Frontend 배포 이슈 대응 ​

Vue + nginx/Traefik 환경에서 프론트엔드 배포 시 자주 발생하는 문제와 확인 포인트를 정리한 문서입니다.

Issue 1: Mixed Content ​

증상 ​

text
Mixed Content: The page at 'https://loafacto.com/...' was loaded over HTTPS,
but requested an insecure resource 'http://loafacto.com:8000/api/v1/chat/stream'.
This request has been blocked; the content must be served over HTTPS.

원인 ​

  • 브라우저에서 HTTPS 페이지가 HTTP API를 호출할 때 발생
  • API 주소, CORS origin, SSE/스트리밍 설정 불일치

조치 ​

  1. nginx/Traefik를 HTTPS 기준으로 동일 오리진으로 프록시
  2. API 호출 URL을 https:// 또는 상대 경로로 정규화
  3. API 서버 접근도 HTTPS 경유 또는 동일 도메인 프록시 처리

nginx 예시

nginx
server {
  listen 80;

  location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
  }

  location /api {
    proxy_pass http://host.docker.internal:8000;
    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;

    # SSE 캐시 비활성화
    proxy_buffering off;
    proxy_cache off;
    proxy_read_timeout 300s;
    proxy_connect_timeout 300s;
    proxy_http_version 1.1;
    proxy_set_header Connection "";
  }
}

VITE_API_URL=https://도메인 형태로 프론트 환경변수도 정합성을 맞춥니다.

Issue 2: uvicorn ModuleNotFoundError: No module named 'app' ​

증상 ​

text
ModuleNotFoundError: No module named 'app'

원인 ​

  • 작업 디렉터리(working_directory)가 backend-server가 아님
  • uvicorn app.main:app 실행 경로가 잘못됨

조치 ​

  1. cd /var/www/loafacto-hub/apps/backend-server에서 실행되는지 확인
  2. 가상환경 활성화 후 python -m app.main 형태로 테스트
  3. 배포 스크립트의 WorkingDirectory 및 ExecStart 경로 점검

Issue 3: nginx 502/503 ​

점검 순서 ​

  • 백엔드 서비스 상태 (systemctl status loafacto-backend)
  • 백엔드 로그 (journalctl -u loafacto-backend -f)
  • API 포트 바인딩 상태 (ss -lntp | grep 8000)
  • 컨테이너 네트워크 연결

운영 점검 체크리스트 ​

  • docker-compose에서 Traefik 라벨/네트워크 설정 확인
  • API 라우트 프록시(Location /api) 동작
  • CORS 허용 도메인(CORS_ORIGINS) 일치
  • 환경변수(VITE_API_URL) 배포/로컬 분기 구분

참조 ​