AWS S3에 Angular 프로젝트 배포 및 게시(초보자용)

S3×Angular라고 하는 것으로, S3에 Angular의 프로젝트를 두고, 호스팅하는 방법입니다.

보안 주위에 대해서는 설명하지 않습니다. 어쨌든 공개하고 싶은 사람을위한 것입니다.

S3 버킷 만들기

용어

버킷 ... 폴더 중 하나의 개념 용량 무제한 하드 디스크 같은 것. 버킷 이름은 전세계에서 고유합니다.

버킷 생성 절차 1 (버킷 이름 결정)

세계에서 하나의 버킷 이름을 결정하십시오.

버킷 생성 2단계(선택 사항 설정)

이번에는 그대로 "다음"을 누르십시오.

버킷 생성 3단계(액세스 권한 설정)

여기에서는 업로드되는 파일에 대한 액세스를 누구 차단할지 지정합니다. 이번에는 일단 모든 체크를 해제합니다.

버킷 작성 순서 4(확인)

확인 화면이 표시되므로 "버킷 만들기"를 누르면 버킷이 만들어집니다.

【Tips】AWS CLI를 사용하면

AWS CLI를 사용하면

aws s3 ls

로 만든 버킷을 확인할 수 있습니다.

만든 버킷에 Angular 자재 배치

ng build

Angular 프로젝트 아래에서 명령을 실행하면 /dist 디렉토리에 컴파일 된 파일이 생성됩니다.

이것을 위에서 만든 S3 버킷에 업로드합니다. 방법은 2가지.

【방법 1】GUI로!

방금 만든 버킷에 아래와 같이 드래그 앤 드롭 등으로 dist/프로젝트 이름 폴더 내
전체 선택하여 업로드합니다.

'업로드'를 누르세요.

【방법 2】CUI로!

aws s3 sync dist/Angularのプロジェクト名 s3://作成したバケット名
> 例：aws s3 sync dist/Angular-With-S3 s3://angular-s3-trial

호스팅 (공개하기 위해) 설정하기

설정 1 (호스팅 설정)

버킷을 선택하면 사이드 바가 출현하므로 "속성"을 클릭

"Static website hosting"에서 호스팅을 위한 설정을 합니다.

설정 2 (버킷 정책 설정)

그런 다음 버킷 정책을 설정합니다.
액세스 권한 탭 > 버킷 정책에 다음 내용을 붙여넣고 저장합니다.

{
   "Version":"2012-10-17",
   "Statement":[{
    "Sid":"PublicReadForGetBucketObjects",
         "Effect":"Allow",
      "Principal": "*",
       "Action":["s3:GetObject"],
       "Resource":["arn:aws:s3:::【ここをバケット名に置換】/*"
       ]
     }
   ]
}