- 학습 목표 1. MIME type 에러
1. 발단
어제 ec2에 프론트 코드를 올리고, 현재 프론트가 HTML로 작성되어 있으니까 서버 실행 코드에 html 폴더를 정적으로 붙여줘야 한다고 생각했다.
2. 전개
// views/index.js
app.use(
'/html',
express.static(path.join('/home/ubuntu/2-hazel-park-community-fe/html'))
)
app.get('/', (req, res) => {
res.sendFile('/home/ubuntu/2-hazel-park-community-fe/html/Posts.html') // 메인 html 경로
})3. 위기
그런데 실행했더니 에러가 발생했다... 사진은 안 찍어둬서 없지만 아래 문구의 에러가 떴었다.
because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
위 에러가 보이면서 html 페이지는 보이는데 html에 import 했던 custom elements와 css가 하나도 적용이 안 되어 있는 것을 확인할 수 있었다.
그래서 원인이 뭘까 생각을 해보니 저번 과제 피드백에 jeff가 배포 환경에서는 상대 경로보다 절대 경로로 하는 것이 좋을 거라고 해주셨던 게 기억이 났다..
에러도 구글링 해보니 js, css 파일 등 리소스 파일에 접근하지 못하는 에러였다.
4. 절정
내가 수정해야 하는 부분은 크게 2파트였다.
- 프론트 import 상대 경로 -> 절대 경로로 변경
// 기존 상대경로 <link rel="stylesheet" href="../styles/edit-profile.css" />
<link rel="stylesheet" href="/styles/edit-profile.css" />- 서버에 추가로 각 리소스 상위 폴더 명시해주기 (정적 파일 서빙)
// 다른 폴더들도 요런식으로 추가
app.use(
'/components',
express.static(path.join('/home/ubuntu/2-hazel-park-community-fe/components'))
)
app.use(
'/styles',
express.static(path.join('/home/ubuntu/2-hazel-park-community-fe/styles'))
)5. 결말
배포가 잘 되는 것을 확인하였다! 앞으로는 절대 경로로 써야겠다.. 그리고 express는 웬만하면 CJS로 써야겠다..
- 어제 발생했던 MIME type 에러에 대해 다시 한 번 복습겸 정리를 해보았다. 앞으로 에러도 이런식으로 정리해두면 좋을 거 같다! 그냥 찾아보고 에러 해결 끝! 하고 끝내는 것보다 이렇게 정리하면서 이해하고 넘어가는 게 더 도움이 되는 거 같다.