Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags
more
Archives
Today
Total
관리 메뉴

개발블로그

Static file 서빙하기 본문

Static file 서빙하기

학교옆메추리 2020. 7. 12. 20:37

문제 정의

Node, Express 를 활용하여 서버를 구성하고, 페이지 접속 시 서버에서 .pug파일을 렌더링하는 구조의 프로젝트를 진행하고 있었습니다.

 

<script> tag에 담겨 client측에 serving 될 .js 파일에서 import 구문을 실행할 수 없다는 에러가 발생합니다.

 

문제 해결하기

이를 위하여 type="module"을 추가하였습니다.

<script type="module" src="./mySource.js" />

 

다른 프로젝트에서는 잘 동작하던 module type이 제 프로젝트에서 동작하지 않습니다...

 

Error: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". 
Strict MIME type checking is enforced for module scripts per HTML spec.

해당 에러가 떠서 res.set({ "Content-Type": "application/javascript; charset=utf-8" })을 적용도 해보고 했으나, 에러를 해결할 수 없었습니다.

 

Static files

여러 방면으로 해결 방안을 모색하던 중에 mySoucre.js에서 import하는 파일이 client측에 없다는 사실을 발견하였고 이를 해결해보고자 하였습니다.

 

먼저 express.static() 메소드를 통하여 public 파일을 client측에 serving하도록 하였습니다.

app.use(express.static(path.join(__dirname, "/public")));

 

import할 파일을 public파일 아래로 복사하고, import경로를 /needToImport.js 로 수정하자 제대로 동작하기 시작했습니다!

 

더 나아가기

모든 js파일을 public폴더 아래에 둘 수도 없는 노릇이고, 매번 복사할 수도 없습니다.

webpack을 사용하면 자동으로 해주겠지만, 손수 해결해보겠습니다.

 

Shell script 작성

필요한 폴더 아래의 js파일들을 public파일로 복사해주는 쉘스크립트 파일을 작성해 보았습니다.

 

.sh 파일을 생성하고, 실행을 위해 excute 권한을 부여합니다.

touch start.sh

chmod 755 start.sh

복사를 담당하는 쉘 스크립트를 작성하였습니다!

#!/bin/zsh

cp pages/**/*.js public/js/
cp apis/*.js public/js/

 

 

./start.sh 명령어를 통해 파일을 복사해주고, 다시 프로젝트를 실행시킴으로써 문제를 해결할 수 있습니다.

매번 실행해야 하는 문제는 nodemon을 통해 해결하였습니다.

"scripts": {
    "start": "nodemon --exec './start.sh & node app.js' --ignore 'public/**/*'",
  },

 

 

이제 파일을 수정하면 nodemon에 의해 자동으로 start.sh가 동작하고 서버가 재실행됨으로써 성공적으로 client측에 static file들을 serving할 수 있게 되었습니다!

'' 카테고리의 다른 글

기본은 중요했다.  (0) 2020.07.26
babel / wepback 사용하기  (0) 2020.07.13
Express middlewares  (0) 2020.07.12
HTTP/1.1 vs HTTP/2  (0) 2020.05.29
DEVIEW Review(2018.10.13)  (0) 2020.05.28