AWS S3와 CloudFront CDN 사용해 Flutter 웹앱 배포하기

목차

• AWS S3 버킷 생성하기
• CloudFront Distribution 설정하기
• S3 버킷 policy 수정
• CloudFront 에러페이지 설정
• 플러터 웹앱 배포
• Health Check

사전 요건

AWS CLI

AWS ( S3, CloudFront ) 권한이 있는 IAM 계정

서론

Flutter는 강력한 크로스 플랫폼 모바일 애플리케이션 개발 도구로, 개발자들이 iOS, Android 및 웹 플랫폼에서 동일한 코드베이스를 사용하여 애플리케이션을 빌드할 수 있도록 합니다. 특히 최근에는 Flutter 웹이 공식적으로 지원되면서, Flutter는 웹 애플리케이션 개발에도 강력한 도구로 자리매김하고 있습니다.

그러나 애플리케이션을 개발하는 것은 그 자체로만 충분하지 않습니다. 애플리케이션을 성공적으로 배포하고 사용자에게 제공하기 위해서는 안정적인 호스팅 및 전송 인프라가 필요합니다. 이 때 AWS의 S3와 CloudFront는 이상적인 선택지입니다.

이 블로그 포스트에서는 Flutter로 개발한 웹 애플리케이션을 AWS의 S3와 CloudFront를 통해 배포하는 과정에 대해 알아보겠습니다. S3는 정적 파일을 호스팅하는 데 사용되며, CloudFront는 전 세계의 사용자에게 이 파일들을 빠르고 안정적으로 전송하는 CDN(Content Delivery Network) 서비스입니다.

이 튜토리얼에서는 Flutter 웹 애플리케이션을 빌드하고, 해당 파일들을 S3 버킷으로 업로드한 다음, CloudFront를 설정하여 사용자들에게 애플리케이션을 제공하는 과정을 자세히 살펴보겠습니다. 함께 따라와 주시기 바랍니다.

본론

AWS S3 버킷 생성하기

• AWS에 로그인후 S3를 검색
• Create Bucket를 Click
• Bucket name을 작성한다.
• 기타 설정은 우선 건드리지 않아도 괜찮다 'Create Bucket' Click

생성된 버킷 'the-bucket-for-test'

CloudFront Distribution 설정하기

• CloudFront를 검색
• Create Distribution을 Click
• Origin domain 을 Click
  • 클릭하면 내가 생성한 S3를 선택할 수 있다.

• 다음과 같은 화면이 동적으로 만들어진다.
• 'Origin access control settings (recommended)'를 클릭하자.
• Create new OAC를 클릭하자.

• Description에 적당한 NickName 추가 후 'Create'를 Click

• 파란색과 같은 wanning이 나올텐데 후에 Distribution이 끝난 후 S3 Bucket policy를 설정할 것이다.
  (우선 무시하자)

Web Application FilreWall 설정의 경우 Cost때문에 우선 하지않는 것으로 설정

• Create Distribution 을 클릭후 CloudFront 객체를 만들자
• Copy policy를 클릭하자

다음과 같은 Json 객체가 복사될 것이다.

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{ Bucket name }/*",
            "Condition": {
                "StringEquals": {
                  "AWS:SourceArn": "arn:aws:cloudfront::891377368976:distribution/{cloud Front id}"
                }
            }
        }
    ]
}

 

S3 버킷 policy 수정

• 아마존 S3를 검색
• cloudfront와 연동한 버킷 click
• permission탭 click
• BucketPolicy 의 Edit 버튼 click
• 복사한 Json 객체 붙여넣기
• Save Change 버튼 click

CloudFront 에러페이지 설정

• AWS CloudFront 검색
• 방금 만든 CloudFront Click
• Error pages 탭 click
• 다음과 같이 에러페이지 생성
• 에러페이지 생성하지 않으면 화면자체가 표현되지 않습니다!!

플러터 웹앱 배포

• ( 맥 & 리눅스 ) 플러터 폴더 root 에 deploy-dev.sh 파일 생성
• 아래와 같이 입력후
• CLI 에 './deploy-dev.sh' 커맨드로 해당 파일 실행
  • 첫번째 줄 :  플러터 빌드해 html 렌더러로
  • 두번째 줄 : AWS S3에 업로드해 ./build/web 폴더 전부
  • 세번째 줄 : AWS cloudfront 에 id에 해당되는 모든 url 자원 캐시 지워
• ps) 사전요건이 되어있어야 에러가 나지 않는다.

#!/bin/sh
flutter build web --web-renderer html &&
aws s3 sync ./build/web s3://{ Bucket 이름 } && 
aws cloudfront create-invalidation --distribution-id { Distribution id } --paths '/*'\

헬스체크

정상적으로 띄워진 Flutter 화면 모습

이상해 보이는건 웹앱 자체의 오류다 찡긋 >.<