티스토리 뷰

Flutter

[Flutter로 개인 블로그 만들기] #1. Flutter Web을 Github Pages에 업로드하기

BlueBada 2024. 9. 18. 17:07

티스토리를 그동안 쓰질 않아서 블로그 개편 겸, 개인적으로 Flutter로 이것저것 시도하는 놀이터같은 블로그를 만들고 싶어서 이번에 Flutter Web 형태로 Github Pages에 개인 블로그를 만들어보려 합니다.

 

현재는 제작중이라 기본 틀만 만들어뒀는데, 개인 블로그 만들면서 적용했던 기술들을 하나씩 여기에 글 올릴 예정이니 관심 있으시다면 한번씩 찾아보시면 좋을 것 같아요.

 

이번 포스팅에서는 다음과 같은 작업에 대해 얘기드릴 예정입니다.

  1. Github Pages 세팅
  2. Flutter Web 빌드할 때 원하는 주소로 세팅하는 방법

다음 포스팅에서는 다음과 같은 작업에 대해 작성하였고, 보시려면 다음 링크로 가시면 됩니다.

  1. Github Actions를 이용하여 빌드와 배포를 자동으로 처리하는 CI/CD 자동화 구현

https://bluebada.tistory.com/18

 

[Flutter로 개인 블로그 만들기] #2. Github Actions를 이용하여 CI/CD 구현하기

이전 포스트에서 Flutter Web을 Github Pages에 올리는 방법에 대해 작성했는데, 해당 방식의 단점이라고 하면 Web으로 빌드된 파일로만 처리해야해서 프로젝트 코드를 모두 올릴 수가 없어 관리가 어

bluebada.tistory.com

 

 

Github Pages 세팅

Github Pages란?

https://pages.github.com/

 

GitHub Pages

Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

pages.github.com

Github에서 제공하는 호스팅 기능이라고 생각하시면 됩니다.

계정마다 하나를 생성할 수 있고, 만들게 되면 다음과 같은 주소로 사이트가 만들어집니다.

https://{Github 유저명}.github.io/

그래서 이걸 활용해서 자기만의 블로그나 사이트를 만들 수 있는데, 대부분 개인 블로그로 많이 이용합니다.

 

Github Pages 만들기

Github 계정이 있다면 Github 홈페이지에 Create New Repository 들어가서 옆의 Owner이름을 참고하여 "{Owner이름}.github.io"로 Repository name을 만들고 그 외 추가 세팅 없이 Create Repository 버튼을 눌러 새로운 Repository를 만들어줍니다.

 

그러면 이제 새로운 레포지토리가 생성되었다면, 다시 새로운 레포지토리를 만들어줄겁니다.

해당 레포지토리는 Github Pages의 Root를 담당하는 페이지이고,

저의 경우에는 blog이외에 다른 기능을 쓸 수도 있기에 블로그 코드만 분리해서 이용해볼 예정입니다.

다만 다음 포스팅에서 더 맞는 세팅을 위해서 이번엔 테스트용으로 레포를 만들어봅시다.

여기서 다시 New repository를 눌러서 테스트용 레포를 따로 만들어두겠습니다.

 

레포 이름은 원하시는 대로 작성해주셔도 됩니다. 해당 레포는 다음 포스팅때는 다시 삭제할 예정입니다.

 

Flutter 프로젝트 생성

이제 레포가 모두 만들어졌다면 블로그용으로 만들 새로운 Flutter 프로젝트를 만들어봅시다.

각자 이용하시는 IDE나 command를 이용하여 새로운 프로젝트를 만들어주시면 됩니다.

저는 Intellij를 이용하여 만들겠습니다. 프로젝트는 다음과 같이 세팅해뒀습니다.

프로젝트 이름이나 organization 등 자유롭게 하셔도 되는데, Platforms를 선택할 때 무조건 Web에 체크해주셔야합니다!

체크까지 다 하셨다면 프로젝트를 새로 만들어줍니다.

 

Flutter Web 빌드하기

다음과 같이 프로젝트가 만들어졌으면 이거 그대로 Web으로 빌드해서 올려보도록 하겠습니다.

 

command에 다음과 같이 입력해줍니다.

flutter build web

 

그러면 프로젝트에 build라는 폴더가 새로 생기고, web안에 여러 파일이 만들어져있는 걸 볼 수 있을겁니다.

 

빌드된 Flutter Web을 Github 올리기

원래대로라면 build/web 폴더를 git을 이용해 push를 하는 게 맞지만, 다음 포스팅에서 flutter 프로젝트 전체를 git으로 push를 할 예정이라 이번 포스팅에서만 file을 직접 업로드하겠습니다.

 레포지토리 페이지에 들어가서 빨간 박스의 "uploading an existing file"을 눌러줍니다.

해당 페이지가 나왔다면 아까 build/web 폴더 안에 있는 모든 파일들을 drag해서 넣어줍니다.

업로드가 모두 되었다면 commit 이름 넣어주고 "Commit changes"를 눌러서 업로드해줍니다.

그러면 다음과 같이 프로젝트가 생성됩니다.

 

이렇게 하면 자동으로 Github Pages가 세팅되는 건 아니기에 Github Pages 세팅을 해줍니다.

 

위에 Settings 탭을 눌러주고, Pages 섹션을 눌러줍니다.

여기서 Source는 다음과 같이 "Deploy from a branch"를 선택해주고, branch는 main에 /(root)로 설정해준 후에 Save버튼을 눌러줍니다.

 

그러면 자동으로 Github에서 deploy를 해주는데 Actions탭을 누르면 다음 사진과 같이 진행 과정이 보입니다.

 

Deploy가 완료되면 저 밑에 링크가 만들어지는데 들어가게 되면 다음과 같이 나옵니다.

 

그런데 해당 링크로 실행하게 되면 흰 화면만 보일거에요.

그 이유는 링크와 code가 연결이 되지 않아서 그런거에요.

index.html에 들어가보면 다음과 같은 코드가 보일겁니다.

 

흰 화면만 보이는 이유

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="/">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="플러터로 만드는 나만의 블로그">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="flutter_blog">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>flutter_blog</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <script src="flutter_bootstrap.js" async></script>
</body>
</html>

 

윗 쪽의 주석을 보면 관련 내용이 있는데, 요약하면 해당 링크에 맞게 연결하려면 저 base 태그의 href를 해당 링크에 맞게 변경해줘야한다는 뜻입니다.

 

저 값을 직접 변경할 수도 있지만, command로 빌드할 때 뒤에 추가로 해당 값을 입력해서 적용할 수 있습니다.

flutter build web --base-href "/{레포지토리명}/"

 

저의 경우에는 레포지토리명이 flutter-web-test이기에 다음과 같이 입력하시면 됩니다.

flutter build web --base-href "/flutter-web-test/"

 

그러고나서 빌드된 파일을 다시 github에 업로드해줍니다.

그러고 Deploy되고 링크를 다시 열면 다음과 같이 페이지가 열립니다.

 

이렇게 flutter web을 Github Pages에 올릴 수 있게 되었습니다!

 

Next?

Flutter Web을 올렸지만, 단점이라고 하면 Web으로 빌드된 파일로만 처리해야해서 프로젝트 코드를 모두 올릴수가 없어서 관리가 어려운 문제가 있습니다.

그래서 다음 포스팅에서는 branch를 분리해서 web-page 브랜치에는 빌드된 웹페이지 파일들이, main 브랜치에서는 flutter 프로젝트 파일들이 구성되게 할 예정입니다.

 

그리고 이러한 빌드를 일일이 command 입력 없이 Github Actions를 통해 웹 빌드를 자동으로 해주고, Github Pages에 자동 Deploy까지 될 수 있게 하면 매우 편안해질 겁니다.

 

이러한 방식을 지속적인 배포(CD)라고 하는데 이걸 세팅해주면 일일이 command로 빌드하면서 기다리고, pages에 deploy등 작업과 시간이 단축되기에 많은 도움이 될것입니다.

다음 게시글에 다음과 같은 내용에 대해 다뤘습니다.

https://bluebada.tistory.com/18

 

[Flutter로 개인 블로그 만들기] #2. Github Actions를 이용하여 CI/CD 구현하기

이전 포스트에서 Flutter Web을 Github Pages에 올리는 방법에 대해 작성했는데, 해당 방식의 단점이라고 하면 Web으로 빌드된 파일로만 처리해야해서 프로젝트 코드를 모두 올릴 수가 없어 관리가 어

bluebada.tistory.com

 

 

 

[출처]

https://pages.github.com/

 

GitHub Pages

Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

pages.github.com

https://velog.io/@kdeun1/Github-Actions%EB%A1%9C-gh-pages-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

 

Github Actions로 gh-pages 자동 배포하기

gh-pages, github actions, 자동 배포 이야기

velog.io

https://joeyhwang.tistory.com/19

 

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

Flutter 에서 만든 App은 Windows, Linux, Mac OS, Android, iOS, Web 등 다양한 방식으로 Build, Release 가능합니다. 타 플랫폼에서 사용하는 App의 경우, 해당 플랫폼용 설치 파일 포맷이나 실행 파일로 배포하면

joeyhwang.tistory.com

 

'Flutter' 카테고리의 다른 글

[Flutter로 개인 블로그 만들기] #3-1. go_router를 이용하여 라우팅 관리하기  (2) 2024.10.13
[Flutter로 개인 블로그 만들기] #2. Github Actions를 이용하여 CI/CD 구현하기  (1) 2024.09.19
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함