Deploy Flutter Web App With Netlify(Flutter Web App을 Netlify로 배포)

배경

그 동안 react, nextjs, hugo ... 등을 활용해 프론트엔드 개발을 진행하고 간단히 주변에 공유할 때 Netlify 를 자주 활용해 왔습니다. 하지만 요새 공부 중인 Flutter 는 웹도 앱도 모두 한번에 개발할 수 있는 신무기지만 Netlify 를 활용해 배포해 본 적이 없어 간단한 작업이지만 블로그에 남겨봅니다.

소개

Netlify는 웹 애플리케이션 및 정적 웹사이트를 위한 호스팅 및 서버리스 백엔드 서비스를 제공하는데 저의 경우 간단하게 프론트엔드를 배포할 때만 사용하고 있습니다.

Flutter는 모바일 앱과 웹 앱, 데스크톱 앱을 단일 코드 베이스로 개발할 수 있도록 Google이 개발한 프레임워크인데 Google 답게 Docs가 아주 잘 되어 있고 공부할 수 있도록 많은 지원을 해주고 있고 Flutter 자체가 가진 기능들이 많기 때문에 react-native 개발 때 느꼈던 dependency 지옥으로부터 조금이나마 해방된 느낌입니다.

팀원들에게 Flutter를 이용해 웹, 앱 모두 간단하게 개발된다는 것을 보여주기 위해 Netlify에 로그인 해 배포하려 했는데 이것을 몰라 찾아 봤고 금방 해답을 찾을 수 있었습니다.

수동 배포

우선 기본 전제는 Flutter 설치를 완전히 했다는 전제로 시작합니다.(공식문서 참고)

1. 우선 Flutter 프로젝트를 생성합니다. flutter create [project_name]

2. 프로젝트 폴더로 들어가서 flutter build web을 실행하면 build/web 폴더가 생성되고 배포용 js 빌드 파일들이 생성됩니다.(이것이 프론트엔드 배포용 소스)

3. 아래와 같이 Netlify에 접속에 Deploy manually 를 클릭하면

   

4. 2번에서 생성한 배포용 폴더를 아래와 같이 Drag & Drop 하면 배포 성공!

   

아주 간단해서 정리할 것도 많지 않았지만 그래도 정리해 두면 다음번에 생각을 덜해도 되니까 적어둬야지 😎

자동 배포

위에서 봤던 수동 배포로 해도 과정이 간단하고 실수로 자동으로 배포되는 것을 원치 않기 때문에 수동 배포를 좀 더 원하지만 자동 배포에 대해서도 알게 되어 이 또한 정리해 봅니다.

1. 수동 배포의 1번을 완료하고 아래와 같이 Netlify에 접속 후 import an existing project 를 클릭합니다.

2. 본인의 git repository를 선택하고 해당 레파지토리를 netlify에 공유할 수 있도록 설정합니다.

3. 이제 Deploy & Build 셋팅을 설정하는데, 명령과 셋팅은 아래와 같습니다.

• Build command

아래와 같이 만약 flutter 폴더가 있으면 git pull을 통해 최신화 하고 없다면 git clone 을 통해 flutter를 가져오고 flutter 폴더에 있는 실행파일을 활용해 프로젝트에 웹을 적용하고 웹을 빌드해 배포합니다.

if cd flutter; then git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release

• Publish directory

배포 폴더를 build/web으로 하여 Build command에서 생성한 배포 폴더로 설정합니다.

build/web

이렇게 설정하면 git에 푸시할 때마다 build command가 실행되고 설정된 publish directory설정에 따라 배포하게 되면서 자동 배포가 완성됩니다.

아직 공식 홈페이지에서 Deploy 셋팅 방법에 대해 Flutter는 다루고 있지 않지만 위와 같은 방식으로 처리가 가능합니다.

도움이 되는 포스팅이기를 빕니다. 🧑🏻‍💻