FastAPI+Vuejs 적용시 static file 처리

기존 Flask에서 FastAPI로 전환 후 static resource를 찾지 못한다는 404 Error가 발생했다.

 

그래서 fastapi에서 SPA 형태 Static resource 처리가 가능한 구조를 정리함.

 

#-*- coding:utf-8 -*-
import uvicorn
import os
import logging
from fastapi import FastAPI, File, UploadFile, Request
from fastapi.staticfiles import StaticFiles
from fastapi.responses import FileResponse



logger = logging.getLogger('app_fast_api')
app = FastAPI()
app.mount("/", StaticFiles(directory="./dist/", html = True), name="static")


@app.get("/")
async def web(request: Request):
    return FileResponse('./dist/index.html', media_type='text/html')


if __name__ == '__main__':
    uvicorn.run(app, host="0.0.0.0", port=8080, debug='true', log_level="debug")

 

Vuejs가 빌드시 생성되는 폴더인 dist를 static folder로 사용한 예시 이다.

 

이 구조 찾기가 너무 어려웠다..ㅠㅠ

 

다음은 reload 시 처리인데.. 이건 어느 산으로... 가야 하나?? ㅎㅎ