[ Flutter ] Web 배포 using GitHub

💬  깃허브를 사용하여 Flutter 코드를 Web으로 배포하는 방법에 대해서 알아보도록 하자.

💬  우선, 깃허브 홈페이지에서 새로운 Repository를 생성한다.

  ◻  name을 '깃허브 닉네임.github.io'로 생성한다.

 

💬  아래의 작업들을 안드로이드 스튜디오와 안드로이드 스튜디오 내부의 터미널에서 차례대로 진행된다.

flutter channel master

  ◻  Flutter의 채널을 master 채널로 설정한다.

flutter upgrade

  ◻  현재 Flutter 채널에서 사용할 수 있는 최신 버전의 Flutter SDK를 가져온다.

  ◻  이후 앱이 의존하는 패키지를 최신 호환 버전으로 업데이트한다.

flutter config --enable-web
flutter devices

  ◻  플러터 웹을 개발하기 위해 활성화를 한다.

flutter build web

  ◻  웹으로 빌드한다.

git clone https://github.com/tmdfyd2020.github.io

  ◻  깃허브 프로젝트에서 생성한 Repository를 IDE로 복사하여 가져온다.

 

💬  build/web 폴더를 가져온 깃허브 닉네임 폴더에 복사한다.

 

💬  해당 폴더를 깃허브에 push 하기 위해 아래의 명령어를 terminal에 입력한다.

cd tmdfyd2020.github.io/
git add .
git commit -m "comment"
git branch -M main
git push -u origin main

 

💬  이제 웹 브라우저 URL 창에 'https://tmdfyd2020.github.io/web'를 입력하면 플러터 앱을 웹으로 띄울 수 있다.

 

❗❗  하지만, 이대로 진행하면 플러터 앱이 아니라 하얀색 화면에 아무리 기다려도 만든 앱이 등장하지 않는다.

💬  아래 이미지와 같이 index.html의 네모친 라인을 <base href="/web/">로 고쳐주면 정상적으로 실행된다.

 

💬  또한, 깃허브 Repository에서 web이 아닌 다른 폴더 이름으로 변경할 경우, 해당 폴더명으로 설정해주면 된다.