npm run build / preview 까지는 잘 보이는데 배포를 하면 아무것도 안 보인다. build 한 폴더를 보면 js 파일이 없다. 찾았다. 범인 😎
=> 이건 범인 X ! config.json 파일들 안에 경로 문제였던 것 같고 toml 파일안의 조건이 문제였다.
🚨 : 문제라고 생각했던 것
❔🧐 : 문제에 대한 new 이슈
🛠️ : 해결법
🚨 1차 이슈 : build 스크립트에 tsc가 없다.
[❔🧐] vite가 vite build 를 해주기 때문에 따로 추가하지 않아도 됐다!
"build": "tsc && vite build"타입스크립트의 tsx 파일은 브라우저가 인식하지 못하기 때문에 트랜스파일링을 해줘야 한다. -> tsc 명령을 통해서 tsconfig.json을 찾은 다음 타입검사를 하고 js로 바꿔줘야 한다. (+모듈 번들링까지!)
컴파일 된 js파일은 올라가지 않게! (원본인 tsx파일만 올려주면 됨) gitignore 에 추가해준다.
*.js
*.js.map
dist/
build/🚨 2차 이슈해결 : build 시 오류가 난다.
[❔🧐] vite를 쓰면 tsc 명령이 없어도 되기 때문에 tsc에서 이어진 css 모듈 타입을 못 찾는 문제는 상관이 없어진다. Vite는 기본적으로 CSS 모듈을 지원하며, 별도의 타입 선언 없이도 CSS 파일을 문제없이 사용할 수 있게 해준다!
Cannot find module './Todo.module.css' or its corresponding type declarations.오류 해석 : 컴파일러가 css 모듈의 타입을 못 찾는 것.
-> 타입 선언 파일 추가하기 (*.d.ts 파일 생성)
global.d.ts 를 만들었다.
declare module "*.css" {
const content: { [className: string]: string };
export = content;
}vite를 쓰면 ts에 편의성을 제공해준다는 글을 발견했다. tsc를 굳이 해주지 않아도 된다는 것.
TypeScript와 Vite를 함께 사용하는 경우, Vite가 빌드 과정에서 TypeScript 파일들을 알아서 처리하고, 최종적으로 번들링된 결과물을 생성해줍니다. Vite는 타입스크립트 파일을 각각의 .js 파일로 변환하는 대신, 모든 파일을 하나의 번들로 합쳐 최적화된 형태로 dist 폴더에 출력합니다.
그럼 여기서 왜 build를 했는데 dist 에 js가 생기지 않지!
assets 폴더 안에 js, css가 존재하는데 일단 배포를 해봤다.
=> [❔🧐] assets 폴더 안에 js 파일에 다 들어있었다!
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
이렇게 서칭하고 커밋하고 푸시하고 배포하면서 내가 해본 과정들
tsc 스크립트 추가css 모듈 타입 선언- json 파일 경로 수정 -> 상대 경로 / alias
- html 파일 경로 수정 -> js 파일 못 불러오는 것 같아 src/index /src/index @/index 다 해봄 => src/index
- netlify.toml 파일 추가
아마 여기까지 했었는데도 아무것도 안 보였던 것 같다.
그러다 문득 toml을 열어봤는데
[build]
publish = "dist"
command = "npm run build"
[[redirects]]
from = "/*"
to = "/index.html" <<
status = 200
force = true저기 to가 신경쓰인다.
거기다가 개발자도구를 열어 안 열리는 파일들을 열어봤더니
아? css를 열든 js를 열든 index.html이 열린다. 오 유레카
오류에도 text/html이라 이게 문제인가 싶어서 일단 파일을 지워봤다. 그랬더니 js도 잘 불러오고 화면이 원하던 대로 뜨는 것. 🎉
force=true
이건 일반적인 배포 설정 파일이다. 그러므로 이 안에서 문제될만한 것은 force = true 였는데 이게 리디렉션을 강제하는 조건이었다. 이걸 지우고 toml 파일을 유지하니 정상적으로 렌더링되는 것을 확인했다.
force = true는 기존의 경로와 파일 충돌을 해결하거나, 리다이렉트 우선순위를 강제 적용해야 하는 특별한 상황에서 필요하게 됩니다. 그런 상황이 없다면, 일반적으로 이 설정은 생략해도 무방합니다.
force = true면 요청하는 파일이 존재하든 아니든 index.html로 연결하라는 뜻이었던 것이다.
결론 : 1차적으로 경로가 문제였던 것 같고 경로바꾸면서 추가했던 toml안에 force=true가 문제였다. 너무너무 중요하고 까다로운 경로!! 🧭
