.htaccess

1. .htaccess란?

• Apache 웹서버의 “디렉토리별 설정 파일”입니다.
• “이 폴더 안에서만 적용할 특별한 서버 설정”을 할 수 있음.
• 파일 이름이 .htaccess(점+htaccess)이며,
  텍스트 파일로 직접 만들어서 서버에 올립니다.
• 주로 아래의 용도로 사용:
  • URL rewrite(주소 변환)
  • 특정 파일/폴더 접근 제한
  • 리다이렉트/포워딩
  • 캐시, MIME 타입, 압축 등 세부 설정

 

2. SPA(Vue, React, Angular 등)에서 왜 꼭 필요할까?

SPA는 서버가 아닌 브라우저(JavaScript)에서 라우팅을 담당합니다.

• 즉, 실제로는 모든 경로 요청을 항상 index.html로 주고
• 라우터가 클라이언트에서 경로에 따라 페이지를 "바꿔 보이게" 하는 구조

 

문제점

• /main, /user/profile 등으로 직접 접근하거나 새로고침을 하면
  Apache는 정적 파일로 /main을 찾으려다 404 Not Found 발생

해결법

• .htaccess로 모든 경로 요청을 index.html로 우회시키면
  → Vue 라우터가 정상적으로 동작

---

3. 실제 복붙용 .htaccess 예시

<IfModule mod_rewrite.c>
  RewriteEngine On

  # 파일이나 폴더가 실제로 존재하면 그냥 제공
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]

  # 그 외 모든 요청은 index.html로 우회(리다이렉트)
  RewriteRule ^ index.html [L]
</IfModule>

사용법 요약

1. 위 코드를 복사해서
2. 빌드 결과물 폴더(dist, public 등)에 .htaccess 파일로 저장
3. 서버에 업로드

 

4. 실제 동작 방식

• / → index.html
• /main → (정적 파일 없으면) → index.html
• /user/profile → (정적 파일 없으면) → index.html
• main.js, style.css 등 정적 파일 요청은 그대로 파일 제공

 

4. 주의 사항

• Apache 서버에서만 적용
  (Nginx 등은 다른 방식)
• AllowOverride가 켜져 있어야 함
  (.htaccess를 무시하도록 서버 설정이 되어 있으면 동작하지 않음)
• 파일 이름이 반드시 **.htaccess**여야 하고,
  확장자 없이 저장해야 함

 

6. 요약

• .htaccess는 Apache 웹서버에서 폴더별 세부 설정을 하는 파일
• SPA 새로고침 404 문제를 해결하기 위해 모든 경로를 index.html로 rewrite하는 규칙을 넣는다
• 위 복붙용 코드를 빌드 결과물 폴더에 추가하면 됨