Django와 Flutter web 결합시 발생하는 문제

teal·2022년 12월 28일
0

친구와 같이 사이드 프로젝트를 하던 도중
Django를 이용해 Flutter을 띄워 사용자에게 보여줄 일이 생겼다.

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
FLUTTER_WEB_APP = os.path.join(BASE_DIR, 'flutter_web')
def flutter_redirect(request, resource):
	return serve(request, resource, FLUTTER_WEB_APP)
    
path('', lambda r: flutter_redirect(r, 'index.html')),
path('<path:resource>', flutter_redirect),

위와 같이 사용한다고 해서 적용해 본 결과 첫번째 문제가 발생했다

루트는 사용하는 페이지가 별도로 존재하기 때문에

path('app/', lambda r: flutter_redirect(r, 'index.html')),
path('app/<path:resource>', flutter_redirect),

과 같은 느낌으로 바꿔야했고 이렇게 바꿀시 127.0.0.1:8000/app 으로 접근하면
index.html은 찾아지는데 flutter.js와 같은 스크립트, 에셋 등은
index.html에서 127.0.0.1:8000/flutter.js과 같은 방식으로 접근해서
Django path의 'app/<path:resource>'에 걸리지 못해 flutter_redirect를 타지 못한것이다

이 문제를 해결하기 위해서는 index.html에서 base를 href="/app/"와 같이 바꾸거나
flutter web 빌드시 flutter build web --base-href "/app/" 이와같이 진행하면 해결된다

AWS의 Lambda에 올릴시에 사용자 지정 도메인을 사용하지 않을 경우에는 "dev", "test" 등의 스테이지가 존재하는데 그 경우 해당 람다의 url이 https://@@.execute-api.ap-northeast-2.amazonaws.com/dev 와 같이 구성되어 flutter.js와 같은 스크립트에 접근시 amazonaws.com/dev/app/flutter.js가 아닌 amazonaws.com/app/flutter.js와 같이 접근하여 같은 문제가 발생한다 이 경우에는 href="/dev/app/" 와 같이 바꾸고 개발을 진행한다.(사용자 지정 도메인 사용시에는 처음과 같이 변경)

위의 문제들을 해결하고 나면 Flutter web내에서는 정상 사용이 가능하다. 그런데 문제가 발생하는데 새로고침을 하거나 링크를 타고 접근시 다음과 같은 404에러가 발생하게 된다.

이 문제는 flutter_redirect 함수에 resource로 /app/level이 들어오고 Django에서는
FLUTTER_WEB_APP 디렉토리에서 해당 파일을 찾아주려고 하는데 없어서 발생하는 문제이다.
에셋, 스크립트와 같은 파일 요청을 제외하고 페이지를 의미하는 요청이 들어올시 serve(request, resource, FLUTTER_WEB_APP)의 resource를 'index.html'로 지정하면 해결된다. 이 프로젝트에서는 간단하게 resource가 '.'을 포함하고 있는 경우로 진행했다

profile
고양이를 키우는 백엔드 개발자

0개의 댓글