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.

Streamlit에 Google login 컴포넌트를 만들어 넣고 있는데, URL로 불러오면 잘 보이는 것이 build해서 File로 serving하면 위와같은 메시지를 뿌린다.

뭘까? 한참을 읽어보고 network tab에서 읽어들이는 위치를 찾아보고 나서 이해가 된다.

http://localhost:9020/component/login_component.login_component/index.html?streamlitUrl=http%3A%2F%2Flocalhost%3A9020%2F

이 녀석이 Vite에서 생성된 index.html을 Streamlit에서 호출하는 녀석인데, Build된 녀석은 나름 저 혼자 돌아가는줄 알고 있을터이니, 빌드한 결과가 “/“로 잡혀있을 것이 분명했다.

월요일.

만들고있는 Toy Project(빨리 이름을 지어줘야 겠다.)를 배포하려고 보니..

운영서버에 node가 설치될 이유가 있는가?

• 나는 정적인 웹서버로 Nginx를 사용 할 예정이니, Node가 필요한 상황은 아니다

# 그러니 NPM을 설치할 이유는 없어 보인다.

• 빌드결과물을 어떻게 Cloud에 올릴 것인가?

# 개발환경이나 혼자 막 쓰는 녀석이라면 Github을 통해서 간편하게 구성 할 수 있겠지만.

scp를 사용하기로 하고 설정을 한다.

# WSL에서
# Key는 미리 등록되어 있어야 한다. 사용자명은 ubuntu라고하면
# build된 결과물이 dist에 있고, cloud에서는 ~/temp/front에서 작업 할 것이다.
tar -cvzf dist.tar.gz dist/
scp -i ~/.ssh/키파일명 dist.tar.gz ubuntu@클라우드IP:temp/front/dist.tar.gz

# Cloud에서
# Nginx Root Folder에 대한 권한 작업은 되어 있어야 한다
# 다 지우고 넣는다. 잘 생각하자.
rm -rf dist
tar -xvf dist.tar.gz
rm -rf /var/www/html/*
cp -r ./dist/* /var/www/html

Key File을 매번 입력하기 싫으면, .ssh에 config File을 만들어두면 간편하게 사용 할 수 있기는 하다. (나는 그렇게 쓰고 있다.)

목요일.

Toy Project를 하나 만들고 있는데, 이 녀석을 FastAPI와 Vite로 구성하고 (관리의 편의라는 이름으로) 하나의 git project로 관리하고 있다.

root
   - api
     .gitignore
     - __pycache__
     api.py
   - ui
     .gitignore
     - node_modules
     index.html

개발 할 때는 api 폴더에 들어가서 uvicorn으로 api.py를 구동시켜 http://localhost:8000으로 API서버를 올리고, ui폴더로 들어가서 npm run dev로 http://localhost:3000의 (Static) Web Server를 구동시킨다. 물론 npm run serve도 사용해야 한다.

여기에서 생각해야 하는 사항은

• CORS
• API Server URL

CORS는 FastAPI에서 가이드하는 부분으로 처리하면 되고, API Server URL부터는 좀 생각을 해야 한다.
나는 프론트와 백앤드를 하나의 오리진으로 서비스 하는 것으로 구성 하려고 하기 때문에, 개발 할 때 API서버의 주소와 운영 할 때 API서버의 주소가 상이한 상황이 발생한다.