flutter web과 aws, github actions 로 반응형 웹사이트 제작하기
😮 flutter 2.0에서 web stable 버전이 나왔다고?
한동안 백엔드 공부를 하느라 flutter에 관심을 가지지 못했었는데, flutter 2.0 버전에서 flutter web이 beta에서 stable 버전으로 승격되었다는 이야기를 듣고 flutter web으로 무언가를 만들어야겠다고 생각했습니다. 마침 이전에 html+css+js로 간단하게 포트폴리오 사이트를 만든 적이 있는데, 이를 보완해서 새롭게 반응형 웹 포트폴리오 사이트를 만들기로 하였습니다.
🎤프로젝트를 시작하기 전 다짐했던 것
제가 이전에 spring boot로 프로젝트를 진행한 적이 있었는데, 그 당시 프로젝트 하면서 배포 자동화에 대한 아쉬움이 느꼈습니다. github push 후 파일들을 배포 파일로 만들고, 도커 허브에 옮기고, 서버에서는 도커 이미지 버전을 수정하고…. 프로그램을 설계하고 실현하는 과정이 아닌 단순 작업들은 자동화하길 원했고, 이번에는 github action을 적용하여 빌드/배포 자동화를 진행하였습니다.
💻 프로젝트 구조
프로젝트 구조는 아래 사진과 같습니다.
버전 관리는 github, 개발은 github codespaces에서 진행하였습니다. github push를 하면 github actions 에서 flutter web 프로젝트를 build하고 완성된 결과물을 aws s3 버킷에 올립니다. aws cloudfront에서 s3에 올려진 배포 파일을 각 지역의 캐시 서버에 저장하게 되고, 사용자가 도메인을 통해 사이트에 접속하게 되면 route53에서 cloudfront로 리다이렉트 해주고, cloudfront의 캐시 서버에 저장된 데이터를 사용자에게 보여주게 됩니다. 덕분에 어플리케이션 개발 및 설계 이외의 부분에서 제가 신경 쓸 일이 많이 줄어들었습니다.
💥 예상치 못했던 문제들과 필자가 선택한 방법
아무래도 flutter web을 사용하는 사람들이 많지 않고(한국에서는 더더욱..!) 레퍼런스가 많지 않다 보니, 마주쳤던 문제들이 꽤 많았습니다. 그중에 몇가지 지를 추려 이야기 하겠습니다.
- 배포를 어디에 하지?
결론적으로 aws s3 + cloudfront + route53을 선택하였는데 이유는 다음과 같습니다.
1. github pages -> 가장 무난한 방법이었지만, 초기 로딩 속도가 오래 걸렸습니다.
2. heroku hobby dyno -> 배포가 간단하고 다른 ci / cd 도구와의 연동성이 좋았으나, 역시 초기 로딩 속도가 오래 걸렸고, 정적 웹사이트 자체가 아닌, php나 node등의 백엔드 서버위에 얹어야 하는 번거로움이 있어 선택하지 않았습니다.
3. ec2 -> 다른 백엔드 서비스와 연동하지 않고 정적 웹사이트를 배포하기 것이기 때문에 모기를 잡는데 탱크를 쓰는 것이 아닌가 라는 생각이 들어 선택하지 않았습니다.
4. aws s3 + cloudfront + route53 -> aws 의 서비스간 연동이 좋았고 무엇보다 cloudfront로 인해 초기 로딩속도가 매우 빨랐습니다. 또한 개인 프로젝트인 것을 감안하여 도메인 비용을 제외한 나머지 비용은 발생하지 않아 효율적이라는 판단이 들어 선택하게 되었습니다.- 라우팅 문제
flutter에서 제공하는 Navigator를 이용한 기본 라우팅을 한다면 url의 argument나 path정보가 반영되지 않는 문제가 발생합니다.예컨대 https://flutterbased.studio/#/blog 라는 주소로 입력해서 들어가면 해당 페이지가 나오지 않고 https://flutterbased.studio/#/ 즉 첫 페이지로 무조건 리다이렉트 됩니다. 필자는 url에 argument나 path 정보를 담았을 때 그대로 실행되기를 바랐고, flutter에서 제공하는 IndexedStack과 flutter package인 fluro를 사용하여 해당 문제를 해결하였습니다.
- 블로그 기능
사실 처음에는 velog와 같은 블로그 플랫폼을 만들려 했고, 이를 위해서는 애플리케이션 내에서 블로그 글을 작성하고 확인하는 기능을 구현해야 했습니다. 하지만 아직 flutter web에서는 html태그를 위젯으로 변환해주는 기능이 빈약했고(모바일버전만 존재) 마크다운으로 대체하려 했지만, 마크다운 뷰어 역시 지원하지 않는 기능이 존재하며 폰트, 색상들 여러 항목들을 수정하여 새롭게 만들기에는 아예 본질에서 벗어나 곁가지에 집중한다는 생각이 들었습니다. 그래서 이는 추후에 개발하는 것으로 빼두고, 현재는 medium에서 글을 작성 후 flutter에서는 medium api를 통해 포스트를 불러오고, 포스트 클릭시 medium으로 리다이렉트 되는 방법을 선택하였습니다.- 반응형 웹사이트
이번 프로젝트는 웹 프로젝트로, 사용자는 다양한 크기의 디바이스를 통해 제 웹사이트에 접속합니다. 따라서 반응형으로 디자인 해야 했고, flutter에서 제공하는 LayoutBuilder 위젯과 MediaQuery를 통해 반응형 위젯들을 제작하였습니다.- 속도가 느리고 버벅거리는데?
초기에 프로젝트를 구상하였을 때는, 외부 애니메이션인 rive, lottie 등의 애니메이션 라이브러리를 테스트 하였으나, 제 경우에는 버벅임이 심하여 flutter 의 기본 애니메이션을 직접 구현하여 사용하였습니다.- CI / CD는 어떤 것으로 하지?
CI / CD를 구현해주는 도구들은 많습니다. Travis CI, jenkins, github actions등이 있습니다. 이중에서 저는 gitub actions를 선택하였는데, 개인 프로젝트의 경우 github actions를 무료로 사용할 수 있고, 따로 CI / CD 서버를 두지 않아도 되며 CI / CD를 한번에 수행할 수 있다는 점이 마음에 들었고, github를 사용하는 지라 접근성이 좋아 github actions를 선택하게 되었습니다.
😀완성하였습니다.
아직 미흡한 점이 많으나 사이트를 배포하였습니다. 사이트 주소는 https://flutterbased.studio 이고 이곳을 클릭하시면 사이트로 리다이렉트 됩니다. 제가 2019년도에 flutter web으로 해커톤에 참여한 적이 있습니다. 그 당시 flutter web은 굉장히 불안정했고 이게 과연 미래가 있을까 라는 생각을 했습니다. 이번 stable 버전을 사용해보니, flutter는 많이 개선되었고 앞으로도 많이 발전하며 사람들이 많이 사용하게 될 것이라는 생각을 조심스레 해봅니다. 천천히 사이트를 둘러보시고 궁금한 점이 있으시면 lak9348@gmail.com 으로 연락 주시기 바랍니다. 긴 글 읽어주셔서 감사합니다.
+) 블로그에서 다루었으면 하는 내용 있으시면 편하게 이메일 주세요 :)
