☆KDT 2024-05-18★Amazon AWS S3 버킷생성/CICD/배포

S3를 이용한 Web FrontEnd Application 배포

1.S3

=> AWS에서 제공하는 파일 스토리지

=> 파일을 업로드하면 URL을 제공해서 URL로 접근할 수 있도록 해줍니다.

URL을 제공해주기 때문에 정적 웹 호스팅이 가능: GIT HUB도 마찬가지

 

1)정적 웹 호스팅이 가능한 버킷 생성

=> S3 서비스테서 버킷만들기를 선택

ACL 활성화됨을 선택

모든 퍼블릭 액세스 차단 해제

 

=> 외부에서 업로드가 가능하도록 버킷을 수정 

     버킷을 선택하고 권한 탭을 선택

     버킷 정책부분을 편집

 

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicListGet",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:List*",
                "s3:Get*",
                "s3:Put*",
                "s3:Delete*"
            ],
            "Resource": [
                "arn:aws:s3:::wonjungbucket",
                "arn:aws:s3:::wonjungbucket/*"
            ]
        }
    ]
}

코드를 추가하고 Bucket 이름 부분에 자신의 버킷이름으로 수정 

여기까지 수행하면 외부 애플리케이션이 버킷에 파일을 업로드하고 다운르도 받을 수 있습니다.

 

=> 버킷이 정적 웹 사이트 호스팅이 가능한 버킷으로 수정

     버킷을 수정하고 속성탭으로 이동

 

정적 웹 사이트 호스팅 클릭 -> 편집 

-> 정적 웹 사이트 호스팅 체크 후 시작문서와 에러문서 작성

 

 

버킷을 사용할 수 있는 유저의 키 생성

=> IAM 서비스로 이동

=> 사용자 선택

=> 사용자 생성

 

=> 권한 설정 부분에서 직접 정책 연결을 선택하고 s3fullacess 권한을 검색해서 체크

 

=> 사용자 생성을 눌러서 사용자 생성

 

=> 사용자를 체크하고 엑세스 키 만들기를 누르고  command line interface를 체크하고 accesskey 다운로드

 

react 프로젝트를 빌드해서 로컬에서 직접 업로드해서 배포

=> react 프로젝트를 생성해서 테스트

 

=> AWS Command Line 작업 프로그램 다운로드

=> 주소 : https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html

최신 버전의 AWS CLI설치 또는 업데이트 - AWS Command Line Interface

 

터미널에서 설정

aws configure --profile 이름

엑세스키 입력

시크릿 키 입력

리젼 : ap-northeast-2

포맷 : json

 

=> react 프로젝트 빌드 : npm run build

 

업로드 명령 : aws s3 sync ./build s3://wonjungbucket --profile=itstudy 

 

git hub에 푸시하면 자동으로 빌드를 해서 배포가 되도록 작성

=> git hub와 연동

 

Git Action :

=> git hub의 repository에 이벤트가 발생했을 때(push, full request) 다른 작업을 자동으로 수행하도록 하는 것

=> 프로젝트의 .github/workflows 디렉토리 안에 yml 파일을 만들어서 작동시킴

=> yml 파일에 aws 키가 노출되면 aws 계정이 중지되므로 키는 git hub에 숨겨서 사용해야 합니다.

=> 현재 디렉토리에 .github 생성

github 디렉토리 안에 workflows 디렉토리 생성

 

 

 

버킷 만들기

 

버킷 이름

 

ACL 활성화

 

모든 퍼블릭 액세스 차단 해제

 

 

 

버킷 정책 편집 -> 외부에서 파일 업로드 가능

 

편집 클릭

 

정적 웹 사이트 호스팅 활성화

 

 

IAM사용자 선택 -> 사용자 생성

 

 

 

 

 

설치 주소 : https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html

powershell에서 AWS Command Line 설치

 

 

AWS Command Line 버전확인

 

 

깃 허브에 푸쉬하면 자동으로 빌드와 버킷에 업로드를 하기위한 yml파일 작성

yml파일 작성

 

 

시크릿키 깃 허브 레퍼지토리에 등록

 

등록된 시크릿 키

 

깃 액션 성공

 

 

---

여유가 되신다면 제 GitHub에 오셔서 좋은 코드들을 구경해주세요!

 

https://github.com/gimpo5975?tab=repositories

gimpo5975 - Overview