DEBUGLOG - React + Vite 프로젝트 "배포" 시 겪은 문제

해결하는데 걸린 시간 : 약 4시간 
해결했던 방법 : GPT + 구글링

개요

최근 개인 포트폴리오 사이트를 React + Vite로 개발하고, EC2 + Nginx + Docker + Cloudflare 환경에 배포하면서 겪은 몇 가지 문제와 해결 방법을 정리하였음. 문제를 파악하고 해결하는 데 약 4시간 정도 소요하였음..

---

🔸 1. Cloudflare + 포트 문제: :82 접속 이슈

🔍 문제 상황

• EC2에서 React 앱을 :82 포트로 노출했으나, Cloudflare를 통과하면 접속이 안 되는 문제가 발생
• 로컬 네트워크에서는 http://IP:82로 접속 가능했지만, 도메인(www.kcanmin.com:82)으로는 접속 실패

🛠 해결 방법

• Cloudflare는 기본적으로 허용하는 포트 번호를 제한함
• :82는 Cloudflare가 허용하지 않는 포트임 → 반드시 80 또는 8080 포트를 사용해야 정상 통과됨
• 해결책:
  • Nginx에서 80 포트 사용
  • intro.kcanmin.com 같은 서브도메인 + 80 포트 조합으로 설정

---

🔸 2. React + Vite 빌드 후 Nginx 설정 이슈

🔍 문제 상황

• vite build로 생성된 dist/를 Nginx로 서빙했으나:
  • manifest.json 403 오류
  • 정적 파일(.js/.css) 404 오류

🛠 해결 방법

• nginx.conf 또는 sites-available/intro에 다음과 같이 설정:

server {
    listen 80;
    server_name intro.kcanmin.com;

    root /home/ubuntu/intro/dist;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|json|txt)$ {
        access_log off;
        expires 30d;
    }
}

• root 경로는 dist 폴더까지 정확히 지정
• 403 발생 시:
  • chmod -R 755 dist/ 로 권한 설정

---

🔸 3. Nginx 설정 적용 안 됨 - sites-available vs sites-enabled

🔍 문제 상황

• /etc/nginx/sites-available/intro에 설정 파일을 만들었는데 적용이 안 됨

🛠 해결 방법

• sites-enabled에 심볼릭 링크가 없으면 Nginx가 해당 설정을 로드하지 않음
• 해결 순서:

sudo ln -s /etc/nginx/sites-available/intro /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

• nginx -t로 구문 에러 점검
• reload로 설정 반영

---

📌 정리 요약

문제 원인 해결 방법

Cloudflare 접속 불가	허용되지 않는 포트 사용 (:82)	:80 사용 + 서브도메인 매핑
정적 파일 403/404	권한 문제 또는 root 경로 오류	chmod, try_files 설정
설정 적용 안 됨	sites-enabled 링크 누락	ln -s, nginx -t, reload

---

✍ 마무리

이번 경험을 통해 단순한 배포도 디테일한 설정 하나로 접속 불가가 될 수 있음을 체감하였음. 특히 Cloudflare, Nginx, React(Vite)의 연동은 세심한 경로 지정과 포트 규칙 이해가 중요함.

또, Docker의 경우 내부 설정에 따라서 일반적인 방식과 다른 방식으로접근해야 하기 때문에 이에 대한 학습도 필요함.

배포 과정에 있어 발생하는 문제는 Cloudflare의 포트 개방과 DNS 방식 + Nginx의 내부 구조에 대한 이해가 동반되어 있어야 문제를 해결하기 쉬울듯 함. 추후에 공부해서 기록할 예정.