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

Flutter와 GitHub Actions로 시작하는 CI / CD

🚩 들어가기 전에

본 포스트를 통해 우리는 우리가 사용하고 있는 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-id 와 aws-secret-access-key가 있어야 외부에서 S3 로 접근을 할 수 있으며, 민감한 정보 이기 때문에 Github Secrets에 추가한 후, workflow파일에서 Github Secrets에 접근하도록 하겠습니다.

aws 사이트 로그인 후 IAM 서비스에 들어갑니다. 사진에 보이는 사용자 버튼을 클릭합니다

사용자 이름을 입력하고, 액세스 유형으로 프로그래밍 방식 액세스를 선택합니다.

검색창에 s3를 입력한 후 AmazonS3FullAccess를 클릭합니다.

계속해 다음 버튼을 누르면 다음과 같은 창이 나옵니다. 액세스키 id 와 비밀 액세스 키를 다른 곳 에다 복사해 둡니다.

GitHub 레포지토리로 와서 Settings를 클릭하고 좌측 네비게이션 바의 Secrets를 클릭합니다.

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