GitHub Actions 를 이용한 Flutter의 테스트/ 빌드 / 배포 자동화

🚩 들어가기 전에

본 포스트를 통해 우리는 우리가 사용하고 있는 GitHub 프로젝트에 push 커맨드를 수행할 경우, 테스트 / 빌드 / 배포를 자동화 해주는 방법에 대해 알아보겠습니다.

github actions를 통해 Flutter project에 CI / CD 를 적용해 봅시다.

😓 그게 왜 필요해?

CI / CD 라고 하는 빌드 / 배포 자동화는 애플리케이션 개발 단계를 자동화하여 프로그래머의 수고를 덜어줍니다. Travis CI, Jenkins, GitHub Actions 과 같은 프로그램을 통해 구현이 가능합니다. 기존에 CI / CD를 알고 계신 분들이라면 이를 Flutter에 접목 시키기 수월하겠지만, 자신의 Flutter 프로젝트에 CI /CD를 처음으로 접목 시키고 싶으신 분들을 위해 본 포스트를 작성하게 되었습니다.

🚨 잠깐!

이번 시간에는 GitHub Actions의 CI / CD를 모두 보여주기 위해 Flutter web으로 진행 합니다. Flutter web 프로젝트의 테스트, 빌드 그리고 배포를 자동화 할 것이며 안드로이드, iOS 의 경우에는 쉽게 변경하여 적용 가능합니다.

Flutter web의 경우 빌드시 dart2js 컴파일러를 통해 dart 로 작성된 파일들이javascript 파일로 변환됩니다. 프로젝트경로/build/web 에있는 파일들을 서버에 올리게 되면, 일반 유저들은 도메인 입력 시 정적 웹사이트를 볼 수 있게 됩니다. 편의를 위해 직접 서버를 구축하지 않고 aws S3 파일을 저장하여 사이트를 배포하는 방식으로 진행하겠습니다.

🙂 aws S3 설정하기

aws및 aws S3에 대한 설명과 더불어 사이트를 배포하는 방법은 이번 포스트와는 성격이 맞지 않아 따로 정리하였습니다. 이곳을 클릭하여 내용을 확인하시기 바랍니다.

🤗 GitHub Actions 간략 설명

GitHub Actions 는 소프트웨어 workflow 를 쉽게 자동화 시켜주는 도구입니다. 여기서 말한 workflow는 테스트, 빌드, 배포를 의미합니다. 즉 여러분이 github프로젝트에 YAML 형식의 파일로 GitHub Actions 가 수행해야 할 workflow를 설정하면, 특정 이벤트 발생 시(ex. push 수행) GitHub Actions는 자동으로 위 작업을 수행하게 됩니다.

앞서 말했듯 workflow 파일은 YAML으로 작성해야 하며, GitHub Repository의 .github/workflows 폴더 아래에 저장하게 됩니다.

하나의 workflow는 여러 job으로 구성되며 하나의 job은 독립된 가상 환경의 인스턴스에서 실행되는 실행 단위 입니다. job은 여러 step으로 이루어지며 step에서는 action을 실행하거나 인스턴스에 커맨드를 입력할 수 있습니다. action은 기업이나 개인이 미리 만든 커맨드의 집합입니다. action 을 잘 활용하면 불필요한 반복을 줄일 수 있게 됩니다.

위 workflow는 특정 Event가 발생해야 실행됩니다. 다양한 Event가 있지만, 초심자는 대게 특정 브랜치로 Push하거나 Pull Request를 Event로 지정합니다.

완전히 이해하지 않으셔도 됩니다. 실습 부분에 한글로 주석을 달아두었으니 보시면서 이해하시기 바랍니다.

😷 GitHub Secrets 설정하기

타인에게 노출되어서는 안되는 정보(아이디, 비밀번호, access-key 등)는 소스 코드에서 분리하여 따로 관리해야 합니다. 이번 실습에서는 aws S3로 사이트를 배포할 것이기 때문에, aws S3에 대한 접근 권한을 가지고 있어야 합니다. aws-access-key-idaws-secret-access-key가 있어야 외부에서 S3 로 접근을 할 수 있으며, 민감한 정보 이기 때문에 Github Secrets에 추가한 후, workflow파일에서 Github Secrets에 접근하도록 하겠습니다.

aws 사이트 로그인 후 IAM 서비스에 들어갑니다. 사진에 보이는 사용자 버튼을 클릭합니다
사진에 보이는 사용자 추가라는 파란색 버튼을 클릭합니다.
사용자 이름을 입력하고, 액세스 유형으로 프로그래밍 방식 액세스를 선택합니다.
검색창에 s3를 입력한 후 AmazonS3FullAccess를 클릭합니다.
계속해 다음 버튼을 누르면 다음과 같은 창이 나옵니다. 액세스키 id 와 비밀 액세스 키를 다른 곳 에다 복사해 둡니다.
GitHub 레포지토리로 와서 Settings를 클릭하고 좌측 네비게이션 바의 Secrets를 클릭합니다.
우측의 New repository secret을 클릭합니다.
AWS_ACCESS_KEY 라는 이름에 아까 복사해 둔 액세스 키를 입력하고 확인 버튼을 누릅니다. 마찬가지로 AWS_SECRET_KEY 라는 이름에 비밀 액세스 키를 입력하고 확인버튼을 누릅니다.
다음과 같이 나오면 성공입니다.

😅 GitHub Actions 실습

Flutter로 간단한 웹사이트를 만들어보겠습니다. Flutter 프로젝트 처음 생성시 기본으로 작성된 counter 애플리케이션을 웹사이트에 배포하는 일련의 과정을 실습 하겠습니다. GitHub Repository를 생성하시고 .github/workflows 폴더 아래에 main.yml이라는 파일 생성 후 아래와 같이 작성하겠습니다. 코드에 대한 설명은 주석을 참고하시기 바랍니다.

# 하나의 workflow를 정의하는 파일입니다.# 해당 workflow의 이름
name: Flutter_GitHub_Actions
# Event를 정의하는 곳입니다.
on:
# 이번 실습에서는 main 브랜치에 push커맨드를
# 수행하였을 경우 workflow가 실행되도록 하겠습니다.
push:
branches: [ main ]
# job들을 정의하는 영역입니다.
jobs:
# 하나의 job을 "build"라고 합니다.
# 이번 실습에서는 하나의 job 만을 사용할
# 것이기 때문에 하나의 build만 정의될 것입니다.
build:
name: Running Test and CI / CD
# 해당 작업이 실행 될 인스턴스 환경입니다.
# 이번 실습에서는 ubuntu 를 사용할 것입니다.
runs-on: ubuntu-latest
# job의 구성요소인 step들을 정의한 공간입니다.
steps:
# 하나의 step은 name 과 uses(혹은 run)으로 구성
# name은 step의 이름이 정의되어 있고
# uses 는 미리 만들어진 action을 이용하는 것이고
# run 은 직접 인스턴스에 커맨드를 실행하는 것입니다.
# 첫번째 스텝은 action입니다
# Github repository의 소스를 가져오는 action입니다.
- name: Checkout source code
uses: actions/checkout@v2

# 두번째 step은 인스턴스에 Flutter SDK를 설치하는 action 입니다.
# with 커맨드를 사용하여 SDK의 상세 버전을 설정할 수 있습니다.
- name: Install Flutter SDK
uses: subosito/flutter-action@v1.5.1
with:
channel: 'stable'
flutter-version: '2.2.1'

# 세번째 step은 해당 레포지토리가 사용하는 패키지를
# import하는 단계입니다. 직접 인스턴스에 커맨드를 입력합니다.
- name: Import Flutter Package
run: |
flutter pub get
# 네번째 step은 작성된 코드를 test하는 단계입니다.
- name: Test Flutter
run: |
flutter test

# 다섯번째 step은 작성된 코드를 build 하는 단계입니다.
# 빌드 후 빌드 된 파일을 프로젝트 루트로 옮기겠습니다.
# 옮기는 이유 : .gitignore에 build 폴더가 정의되어 있어
# 추후 사용 불가. 따로 커밋을 하지 않는 이상
# 여기서 변경된 사항은 프로젝트에 영향을 주지 않습니다.
# 이미 web이라는 폴더가 존재하여 web_deploy으로 이름을 변경합니다.
- name: Build Flutter web
run: |
flutter build web --release
mv ./build/web .


# 빌드된 결과 파일들을 aws S3에 배포하겠습니다.
# 우선 aws S3 환경 설정을 합니다.
# 두개의 gitgub secret을 이용합니다.
# 깃허브 시크릿은 다음과 같이 ${{ secrets.이름 }} 으로 사용합니다.
- name: Init aws S3
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_KEY }}
aws-region: us-east-1

# 빌드된 결과 파일들을 aws S3에 배포하겠습니다.
# web-deploy에 있는 모든 파일및 폴더들을
# counter_s3라는 이름의 S3버켓에 올리는 명령어 입니다.
- name: Upload to S3
run: |
aws s3 cp --region us-east-1 web-deploy s3://counter_s3/ --recursive

🤗 결과

main 브랜치에서 git push 커맨드를 입력하였을 때, Github Repository의 Actions 탭을 가보면 진행 중인 workflow를 확인할 수 있습니다.

Actions 탭 클릭시 다음과 같이 진행중인 workflow 가 나옵니다. 이때 title은 커밋 메시지입니다. 진행중인 workflow를 클릭해보겠습니다.
클릭하면 다음과 같이 진행중인 job 들이 나오게 됩니다. 저희는 ‘Running Test and CI / CD’라는 하나의 job을 생성했습니다. 해당 job 을 클릭해 보겠습니다.
다음과 같이 순차적으로 step을 진행합니다. 사진에서 처럼 Github Actions가 자동으로 여러분의 테스트 / 빌드 / 배포 자동화를 수행하는 것을 확인할 수 있습니다.
하나씩 살펴보겠습니다. 다음과 같이 여러분이 작성된 test코드를 수행하는 것을 볼 수 있습니다.
다음은 빌드 입니다. 커맨드라인을 수행하면서 Flutter web 프로젝트가 빌드 되는 것을 확인할 수 있습니다.
마지막으로 배포 입니다. 이전에 수행했던 aws 환경 세팅 이후, 위의 커맨드를 통해 deploywebsite라는 s3 버켓에 배포 파일들을 배포하는 것을 확인할 수 있습니다.

모든 과정이 완료되면 aws S3 서비스 중 해당 버켓의 속성 탭을 들어갑니다.

다음과 같은 항목에서 버킷 웹 사이트 엔드포인트 사이트를 클릭하면 배포된 사이트가 나오게 됩니다. 이 링크를 클릭해 보셔도 됩니다.

모든 기능이 정상적으로 작동하는 멋진 사이트를 확인하실 수 있습니다.

우리는 지금까지 GitHub Actions를 이용하여 테스트, 빌드, 배포 일련의 과정을 자동화 하였습니다. 모든 소스 코드는 이곳에서 확인하실 수 있습니다. 문의는 lak9348@gmail.com으로 주시기 바랍니다. 감사합니다.

--

--

contact : lak9348@gmail.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store