flutter web 배포

아래의 과정으로 배포를 진행하겠다.
1. Github actions 로 CI/CD 적용
2. aws s3 에 호스팅
3. cloudfront 로 도메인 주소 적용

github action

Github Repository 생성 후 .github/workflows 폴더 내에 yaml 파일을 생성한다. yaml 파일을 통해 Github action 의 workflow 가 생성된다.
workflow 파일을 따라 CI/CD 작업이 진행되는데 workflow 파일을 살펴보겠다.

name: Deploy to production /// action 의 이름 

on: /// action 이 trigger 되는 방식 git 의 main branch 
  push:
    branches:
      - main
    tags:
      - "v*.*.*"

  workflow_dispatch:

jobs:
  build-web:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Flutter SDK
        uses: subosito/flutter-action@v2
        with:
          flutter-version: "3.7.1"
          channel: "stable"

      - name: Enable desktop
        run: flutter config --enable-web

      - name: Flutter get packages
        run: flutter pub get
      
      - name: Build Runner & version
        run: flutter packages pub run build_runner build --delete-conflicting-outputs

      - name: Flutter build app
        run: flutter build web --release --base-href / --dart-define="BASE_URL=https://reward-api.danbicorp.com/api"

      - name: Use random for fix cache
        run: |
          ran=$RANDOM
          echo $ran
          sed -i "s|flutter\.js|flutter.js?v=$ran|" ./build/web/index.html
          sed -i "s|main\.dart\.js|main.dart.js?v=$ran|" ./build/web/flutter.js

      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: web-build
          path: build/web

  deploy-web:
    name: Deploy Website to AWS Hosting
    needs: build-web
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3

      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: web-build
          path: build/web 

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: Upload to S3 🚀
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --follow-symlinks --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET_PROD }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ${{ secrets.AWS_REGION }}
          SOURCE_DIR: 'build/web'

      - name: Create CloudFront Cache Invalidation ☁️
        uses: chetan/invalidate-cloudfront-action@master
        env:
          DISTRIBUTION: ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID_PROD }}
          PATHS: '/*'
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ${{ secrets.AWS_REGION }}

s3 호스팅

1. AWS S3에 접근하기 위한 IAM 계정 만들기
2. S3 bucket 생성
3. S3 bucket 정적 웹 사이트 호스팅 활성화
4. 버킷 웹 사이트 엔드포인트 복사

cloudfront 로 도메인 주소 적용

cloudFront 를 이용하여 s3 에서 생성한 버킷의 엔드포인트를 생성한 도메인 주소로 연결한다.