[Flutter Web] 업데이트 후 UI가 변하지 않는 오류

최근에 토이프로젝트로 진행 중인 Flutter Web 사이트의 버전을 바꾸게 될 일이 생겨 업데이트를 하려 하는데 문제가 생겼다.

최신버전을 반영한 이후 Flutter web의 빌드파일을 서버에 적용을 한 후 접속을 해보는데 캐시 된 이전 페이지가 그대로 보이는 것이다. 문제를 확인해 보니 플러터 웹은 main.dart.js를 가져오게 되는데 이 파일은 자바스크립트 파일이다 보니 갱신을 하려면 쿼리를 파라미터를 추가하여 버전을 올려줘야 신규 main.dart.js를 웹브라우저에서 인식을 하고 가져오는 것이다.

 

그럼 해결방법을 적어보도록 하겠다.

 

1.Flutter Web을 빌드한다 

(flutter build web --web-renderer canvaskit --release)

 

2. 이후 빌드된 폴더에 이동한다 (build/web 내부)

 

3.index.html 에서 flutter.js를 flutter.js?version=2 형식으로 수정을 하고 저장한다. 그런 다음 flutter.js 파일을 연 다음 main.dart.js를 main.dart.js?version=2 로 수정을 한 후 저장을 한다.

version의 경우 매번 빌드할 때마다 갱신을 해야 되는데 기억하기 힘드므로 현재날짜와 시간을 적는 방식으로 하는 걸 추천한다. ex) main.dart.js?version=202304271422