GitHub : Flutter Web app을 GitHub Pages를 이용해 Deploy하기 1/2

Flutter 에서 만든 App은 Windows, Linux, Mac OS, Android, iOS, Web 등 다양한 방식으로 Build, Release 가능합니다.

 

타 플랫폼에서 사용하는 App의 경우, 해당 플랫폼용 설치 파일 포맷이나 실행 파일로 배포하면 됩니다만, Web의 경우는 어떨까요? 본인의 홈페이지를 운영하시는 분들은 Web hosting Server에 올리는 방법도 있을겁니다.

 

이번 포스팅에서는 GitHub에서 제공하는 GitHub Pages를 이용해서 Flutter code를 GitHub에 push할때 마다 자동으로 업데이트되도록 작업해보겠습니다. 너무 내용이 많아질 것 같아서, 2번에 나누어 진행합니다.

 

① GitHub Pages를 셋팅하고, 첫번째 Web app을 웹페이지로 등록해 보기

 

② Flutter code를 push할때 자동으로 Web app이 등록되도록 만들기

 

시작합니다.

 

GitHub Pages 세팅

먼저 GitHub Pages에 대해 간단히 알아보겠습니다.

GitHub Pages 로 웹앱이나 웹페이지를 호스팅하게되면, 주소는 아래와 같습니다.

 

https://${Owner}.github.io/${Repository}

  * ex) https://joeytestcode.github.io/testcode

 

먼저, ${Owner}.github.io 사이트를 만들어야합니다.

GitHub.com에 Sign in 하고, 새로운 repository 생성하기 위해 Create repository 버튼을 클릭합니다.

Repository name 칸에 반드시 아래와 같은 형식으로 입력해줍니다.

 

${Owner명}.github.io

 * 예를 들어 Owner명이 joeytestcode 라면 Repo name은 joeytestcode.github.io

나머지는 변경하지말고, 스크롤해서, 마지막의 Create repository 버튼을 클릭하면 됩니다.

 

 

이제 실제 만들고자 하는 Web app의 페이지를 올릴 Repository를 생성 해보겠습니다.

우측 상단의 +를 클릭하고 New repository를 선택합니다.

새로운 repository이름을 입력하고, 아래쪽으로 스크롤해서 Create repository를 클릭합니다.

 

VS code에서 Ctrl + `를 입력하고, 아래 명령어를 입력해줍니다.

 

>  flutter build web

 

이제 좌측 사이드 패널에서 EXPLORER를 열고 build\web folder안의 내용을 보면,

Web page 파일들이 생성되어있는데, 그 중 index.html을 클릭해서 열어봅니다.

커멘트 부분의 내용을 해석해보면, web app을 호스팅할 때 서버의 root가 아닌 경우에는 href를 수정하라는 의미입니다.

처음 시작할때 적었듯이, GitHub Pages 로 웹앱이나 웹페이지를 호스팅하게되면, 주소는 아래와 같습니다.

 

https://${Owner}.github.io/${Repository}

  * ex) https://joeytestcode.github.io/testcode

 

예를들면 root는 https://joeytestcode.github.io/ 이므로, href 부분을 아래처럼 수정해야합니다.

 

<base href="/testcode/">

 

이걸 매번 수작업으로 수정해줘야한다면, 귀찮은 일이기도 하지만 놓치기 쉽습니다.

그래서 build 시에 아예 옵션을 줘서 해당 부분을 자동으로 변경할 수 있습니다.

다시 한 번 아래 터미널을 열어서 아래와 같이 명령어를 입력해봅시다.

여기서 /exam01web/ 부분은 본인의 repository명의 앞뒤에 "/"이 들어가야합니다.

 

>  flutter build web --base-href "/exam01web/"

 

build 가 끝나고 나면 index.html이 자동으로 변경됩니다.

 

GitHub에 올릴 Web app까지 build가 완료되었으니 이제 GitHub repo에 올려주면 됩니다.

 

가장 중요한 부분입니다. 반드시 folder를 이동해서 실행해야합니다. 왜냐하면 우리는 build된 결과물인 build\web 안의 내용만을 새로 만든 repository에 올리려고하니까요.

 

terminal에서 아래와 같이 folder를 이동해줍니다.

 

>  cd .\build\web

   (* 또는 cd build 후 cd web 하셔도 됩니다.)

 

이어서 아래 명령어들을 실행합니다.

git init
git remote add origin https://github.com/joeytestcode/exam01web.git
git add .
git commit -m "web deply"
git push origin master

위 명령어들을 복사한 후에 VS code 터미널창에 붙여넣기는 터미널 창에서 우측 마우스 버튼을 누르시면됩니다.

마우스 우측 버튼을 클릭해서 붙여넣기가 되는 순간,

앞의 명령어들은 자동 실행되고, 마지막 명령어만 실행이 안되어 있을 겁니다.

Enter를 추가로 입력해서 마지막 명령어까지 실행해주세요.

(복사시에 Enter에 포함되어있는 앞줄들은 Enter를 인식해서 자동으로 실행되지만, 마지막 줄에는 Enter가 포함되어 있지않아서 발생하는 자연스러운 현상입니다.)

 

또는 한줄한줄 입력하셔도 됩니다. 

 

완료된 후 아까 생성한 GitHub의 exam01web Repo에 가서 웹페이지를 새로 고침(F5) 해봅시다.

잘 올라와있네요.

이제 Settings로 이동해서 GitHub pages 기능을 활성화하고, web page를 deploy 하면됩니다.

Settings → Pages 페이지로 이동 후에,

Source는 Deply from a branch를 선택하고,

Branch는 master, / (root) 를 선택한 후에 Save를 입력합니다. 

Save 후 시간이 지나면 Web page를 아래 주소에서 확인할 수 있습니다만....

https://joeytestcode.github.io/exam01web/

언제까지 기다려야할지 답답하죠.

 

진행되고 있는 모습을 확인하려면 Actions tab으로 이동하면 됩니다.

진행되는 상황을 실시간으로 확인 가능합니다.

 

위와 같이 모든 작업이 완료되었다면 다시 Settings → Pages 로 가보시면 업데이트되어있는 모습을 볼 수 있습니다.

자 이제, 해당 페이지는 누구나 접근 가능한 Web app으로 게시가 완료되었습니다.

 

이제는 해당 웹앱을 아래와 같이 블로그에 embed도 가능합니다.

아래 파란색 버튼을 한 번 눌러보시죠~~~

 

 

참고로 블로그에 붙여넣기 할 때는 html 블럭 넣기나 소스 편집기능을 이용해서, 아래 코드를 입력하면 됩니다.

<iframe src="https://joeytestcode.github.io/exam01web/" title="exam01" width=800 height=480></iframe>

 

다음 포스팅에서는 별도의 저장소를 만들지않고, 작업 중인 flutter 의 GitHub repo에서 자동으로 web page를 게시할 수 있도록 작업해보겠습니다.

 

좋은 하루 되세요~