AWS S3에 Angular 앱을 배포하는 단계

배경

Angular 앱을 만들었기 때문에 웹에서 시작할 수 있기를 원했습니다.
Angular 앱 자체는 이미 만든 전제로 진행합니다.

거친 절차

Angular 앱 리소스 만들기

S3 버킷 만들기

자원 업로드

S3을 정적 웹 호스팅하도록 설정

Angular 앱 리소스 만들기

Angular 앱 만들기

터미널에서 Angular 프로젝트의 디렉토리로 이동하고 ng build --prod 명령으로 빌드하기

프로젝트 아래에/dist 폴더가 생성되고 앱 리소스 세트가 저장됩니다.

S3 버킷 만들기

Amazon S3 콘솔에 액세스

버킷 만들기

대시보드에서 버킷 만들기를 선택합니다

리전 내에서 고유한 버킷 이름을 지정하고 적절한 리전을 선택하고 다음으로 이동

버전 관리를 설정할 수 있지만 모두 비활성화 된 상태로 계속 진행합니다

S3 버킷에 대한 사용 권한을 설정할 수 있지만 기본값으로 계속 진행합니다.

버킷 만들기를 선택하면 버킷이 생성됩니다

리소스 업로드

만든 S3의 버킷 이름을 선택하여 버킷으로 이동합니다.

빌드하여 생성 된 "/dist"폴더 아래의 리소스를 버킷에 드래그 앤 드롭하여 업로드합니다.

S3를 정적 웹 호스팅하도록 설정

S3의 액세스 권한 탭을 선택합니다

블록 공개 액세스를 선택하고 편집에서 모든 공개 액세스를 차단 해제

버킷 정책 선택

버킷 정책 편집기에서 다음과 같이 설정

    {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Sid": "PublicReadGetObject",
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": " arn:aws:s3:::angular-test-backet/*"
           }
       ]
   }

각 설정 항목에 대해서는 다음과 같습니다.

version : 사용할 정책 언어의 버전을 지정합니다. 2012-10-17 버전이 최신 인 것 같습니다

statement :이 정책의 주요 요소, 다음 요소의 컨테이너가됩니다.

sid : 여러 문을 구별하기위한 문 ID

Effect : Allow 또는 Deny를 사용하여 부여 또는 거부 할 권한 설정을 지정합니다.

Principal : 액세스를 허용하는 계정, 역할을 지정합니다

Action : 정책에서 허용하거나 거부하는 작업 목록.

Resource : 동작이 적용되는 리소스 목록

이번에는 리소스를 ARN (Amazon 리소스 이름)으로 지정했습니다.
S3 버킷 일람 화면에서, ARN을 취득하고 싶은 버킷에 체크를 넣으면 팝업이 표시되어 버킷의 ARN을 취득할 수 있다
이번에는 취득한 ARN을 Resource에 붙여넣고 끝에 '/*'를 추가하여 모든 리소스에 대한 액세스 권한을 추가했다.　
5. 버킷의 속성 탭을 선택하고 정적 웹 사이트 호스팅을 선택합니다.
6. 색인 문서에 [index.html]을 입력하여 저장합니다.
7. 다시 [Static website hosting]을 선택하고 화면 상단에 표시된 엔드포인트 URL에 액세스하면 S3에 저장된 웹 앱이 표시됩니다.