[Flutter] Flutter Web - Github Page를 통해 플러터 웹 호스팅

---

Flutter web 프로젝트 생성

 

Input

flutter config

Output

Configure Flutter settings.

To remove a setting, configure it to an empty string.

The Flutter tool anonymously reports feature usage statistics and basic crash reports to help
improve Flutter tools over time. See Google's privacy policy:
https://www.google.com/intl/en/policies/privacy/

Global options:
-h, --help                  Print this usage information.
-v, --verbose               Noisy logging, including all shell commands executed.
                            If used with --help, shows hidden options.
-d, --device-id             Target device id or name (prefixes allowed).
    --version               Reports the version of this tool.
    --suppress-analytics    Suppress analytics reporting when this command runs.

Usage: flutter config [arguments]
-h, --help                                       Print this usage information.
    --[no-]analytics                             Enable or disable reporting anonymously tool usage
                                                 statistics and crash reports.
    --clear-ios-signing-cert                     Clear the saved development certificate choice
                                                 used to sign apps for iOS device deployment.
    --android-sdk                                The Android SDK directory.
    --android-studio-dir                         The Android Studio install directory.
    --build-dir=<out/>                           The relative path to override a projects build
                                                 directory
    --[no-]enable-web                            Enable or disable Flutter for web. This setting
                                                 will take effect on the master, dev, and beta
                                                 channels.
    --[no-]enable-linux-desktop                  Enable or disable Flutter for desktop on Linux.
                                                 This setting will take effect on the master and
                                                 dev channels.
    --[no-]enable-macos-desktop                  Enable or disable Flutter for desktop on macOS.
                                                 This setting will take effect on the master and
                                                 dev channels.
    --[no-]enable-windows-desktop                Enable or disable Flutter for desktop on Windows.
                                                 This setting will take effect on the master and
                                                 dev channels.
    --[no-]single-widget-reload-optimization     Enable or disable Hot reload optimization for
                                                 changes to class body of a single widget. This
                                                 setting will take effect on the master, dev, beta,
                                                 and stable channels.
    --[no-]enable-android                        Enable or disable Flutter for Android. This
                                                 setting will take effect on the master, dev, beta,
                                                 and stable channels.
    --[no-]enable-ios                            Enable or disable Flutter for iOS. This setting
                                                 will take effect on the master, dev, beta, and
                                                 stable channels.
    --[no-]enable-fuchsia                        Enable or disable Flutter for Fuchsia. This
                                                 setting will take effect on the master channel.
    --[no-]experimental-invalidation-strategy    Enable or disable Hot reload optimization that
                                                 reduces incremental artifact size. This setting
                                                 will take effect on the master, dev, beta, and
                                                 stable channels.
    --clear-features                             Remove all configured features and restore them to
                                                 the default values.

Run "flutter help" to see global options.

Settings:
  enable-web: true

Analytics reporting is currently enabled.

 

웹 애플리케이션을 빌드한 적이 있다면 flutter config 명령어를 입력한 뒤,

enable-web이 true인지 확인한다.

flutter web 프로젝트를 처음 시작한다면 하단 경로의 설명대로 web을 빌드하도록 한다.

enable-web의 값이 false라면 web을 활성화해주어야 한다.

flutter config --enable-web //web 활성화 명령어

 

※ 하단 사이트를 참고하여 프로젝트에 web을 빌드한다.

Building a web application with Flutter

 

 

---

입맛에 맞게 UI 및 assets 등 이용하여 코딩

모바일 기기에서 접속하여도 해당 기기의 화면에 맞춰질 수 있도록 '반응형 UI'로 만들어주는 건 기본.

 

 

 

 

---

Github Page용 레포지토리 생성

본인 계정의 github에서 레포지토리를 새로 생성해준다.

GitHub: Where the world builds software

 

저장소 생성 시 아래와 같은 조건을 따른다.

* 저장소의 이름은 깃허브에서 사용하는 유저명과 동일하게 입력 후. github.io를 입력한다.

* Github Page를 이용하려면 public 저장소여야 한다.

 

 

 

---

웹 애플리케이션 배포를 위해 컴파일하기

 

사이트를 검사해보면 main.dart.js가 포함돼있는 걸 볼 수 있다.

main.dart.js 파일을 얻기 위해 그리고 웹을 배포하기 위해 컴파일해야 한다.

터미널 환경에서 하단 명령어를 입력하여 컴파일한다.

 

Input

flutter build web --release

 

해당 명령어를 입력하고 main.dart 파일 컴파일을 완료하고 나면, 

위와 같이 build\web 폴더 안에 배포를 위한 파일들이 생성되는 걸 볼 수 있다.

 

 

 

---

Github에 배포하기

 

 

위에서 생성한 깃허브 저장소에 build\web 안에 생성된 파일들을 push 해줄 차례다.나는 윈도우 환경에 git이 설치되어있고, github 저장소에 clone 하고 push 할 때 git bash(터미널 환경)을 이용해왔다.이번에도  마찬가지로 git bash를 이용하여 push 해주도록 할 거다.때문에 저장소 주소를 복사해놓는다.

 

 

 

Flutter web 프로젝트의 폴더 아래 build\web에서 git bash를 실행해준다.

 

 

Input

git init

Output

Initialized empty Git repository in E:/flutterProject/github/sonta_test/build/web/.git/

해당 폴더에는 .git 폴더가 생성된다.

 

 

* origin이라는 이름으로 원격 저장소 경로 지정 명령어

 git remote add origin 깃허브 저장소 경로

 

예시)

 

 

---

Git Bash를 이용하여 원격 저장소에 push 하기

git status
// 파일들 상태 확인
git add .
// 모든 변경사항 commit에 반영
git commit -m '변경내용작성'
// Add Function 등 메세지와 함께 commit
git push origin master
// origin 원격저장소의 master branch에 업로드.

위 명령어 순서대로 입력하면 원격 저장소로 파일들이 이상 없이 업로드된다.

* 이해를 위해 해당 명령어에 대한 설명을 주석 처리해놓았음.

 

git status

저렇게 붉은색으로 나타날 경우 해당 파일들과 원격 저장소 파일들 간에 변경사항이 있다거나

혹은 새로운 파일들이라는 것을 나타낸다.

 

git add .

git add . 명령어를 통해 모든 변경사항을 인덱스에 올리고 나서 다시 

git status 명령어로 파일 상태를 체크해보면 이렇게 녹색으로 나타나는 걸 볼 수 있는데

이는 인덱스에 해당 파일들이 올라갔다는 걸 의미한다.

 

git commit -m 'init Flutter Web Project'

init Flutter Web Project라는 메시지와 함께 commit 하기

 

git push origin master

 

push 까지 해서 github 저장소에 모든 파일들이 올라갔다!!

sonta_test

주소창에 처음 저장소를 생성할 때 입력했던 주소 값을 입력해 들어가면 플러터 웹 프로젝트를 볼 수 있게 된다!

 

 

기존 UI 및 한국어 설정된 값

 

Github Page

폰트, icon 패키지 안 먹힘..ㅎㅎ이건 더 정보를 찾아보도록..

 

 

---

모바일 환경 테스트

깃허브 페이지에 호스팅 한 목적이 테스트였기 때문에 모바일 환경에서 몇 가지 테스트를 해보았다.

 

 

디바이스 환경 설정에 맞는 테마 적용 여부

구글 브라우저로 시도해보았으나 경로로 이동조차 안되었다. 

이게 보안상의 문제인지 Flutter Web이 구글 브라우저 지원이 안 되는 건지(설마 그럴 리가..)에 대해서는 확인이 필요함.

그래서 삼성 브라우저에서 접속해보았는데 보이는 것과 같이 문제없이 접속 및 UI가 뿌려졌다.

디바이스에 설정된 테마에 따라서 테마가 바뀌는 것도 확인할 수 있다. 

 

 

 

다국어 지원 확인

 

디바이스 언어를 영어로 설정했을 때의 모습.

다국어 지원 기능에도 문제가 없다. 또한 크롬 브라우저에서도 잘 작동된다.

 

 

 

※ 참고문서

Setup a Flutter Web Project on GitHub Pages - itnext.io  itnext.io/setup-a-flutter-web-project-on-github-pages-58b3118b0a28

Build and release a web app - flutter.dev flutter.dev/docs/deployment/web#building-the-app-for-release