[Deploy] AWS S3 정적 웹 호스팅

hyo·2023년 4월 24일
S3aws
0

배포

목록 보기
1/1
post-thumbnail

S3로 정적 웹 호스팅하기!

개인프로젝트(포트폴리오)를 마무리 하던 시점에 배포를 생각하게 되어 진행하게되었다.
내가 만든 프로젝트는 말그대로 보여주기식인 포트폴리오이기 때문에 정적 웹이다.
그래서 정적 웹 호스팅을 해보려고 한다.
배포를 하기 위해선 IAM에 사용자를 추가하고 S3 버킷을 만들어야한다.

IAM

  1. AWS 웹에 들어가 검색창에 IAM을 들어간다.

  2. IAM 사이드바에 사용자 클릭.

  1. 위 화면에서 우측 상단 사용자추가 클릭.

  1. 사용자 이름 본인이 하고싶은거 아무거나 쓰고 다음.

  1. 권한 옵션에서 직접 정책 연결 클릭.

  1. AmazonS3FullAccess 찾아서 체크, CloudFront도 사용할 거면 CloudFrontFullAccess도 체크 하고 다음.

  1. 확인하고 사용자생성.

  1. 방금 만든 사용자 클릭하여 들어가기.

  1. 보안 자격 증명 클릭 후 아래 내려보면 액세스 키 있음. 액세스 키 만들기 클릭.

  1. AWS 외부에서 실행되는 애플리케이션 체크하고 다음.

  1. 태그 설정은 옵션이기에 넘어가도 된다. 액세스 키 만들기 클릭.

  1. 위와 같이 액세스 키, 비밀 액세스 키가 생성된다.
    액세스 키와 비밀 엑세스 키는 따로 .env 파일에 저장해 둔다.

IAM에서 사용자 생성을 하였으면 이제 S3 버킷 만들러가자.

S3

  1. AWS에 S3 검색하여 들어간다.

  2. 버킷 만들기 클릭.

  1. 버킷이름은 하고싶은 이름으로 하고, 지역은 서울로 한다.

  1. ACL 활성화 체크, 객체 라이터 체크!

  1. 모든 퍼블릭 액세스 차단 체크를 풀어준다.

  1. 위 사항들은 옵션사항들이라 그냥 있는 그대로 두고 버킷 만들기 클릭.

  1. 만들어진 버킷 들어와서 속성 클릭.

  1. 아래로 내리면 정적 웹 사이트 호스팅 있음. 편집 클릭.

  1. 위 처럼 체크해주고 인덱스문서, 오류문서에 index.html 기재!
    그리고 변경사항저장 클릭.

  1. 상단에 권한 누르면 아래에 버킷 정책이 보인다. 버킷 정책에 있는 편집 클릭.

  1. 버킷 ARN을 복사해두고 상단에 정책 생성기 클릭.

  1. Select Type of Policy 에서S3 Bucket Policy 선택
    Effect에서 Allow 선택
    Principal에는 * 기재
    Actions에서 GetObjects 선택
    Amazon Resource Name(ARN)에는 좀 전에 복사해둔 ARN 입력후 뒤에 /* 같이 써준다. 예시 -> arn:aws:s3:::ab-cd/*

  1. Add Statement 클릭하고 아래에 Generate Policy클릭하면 위처럼 뜬다. 위의 내용 복사해둔다.

  1. 다시 버킷 정책 편집으로 돌아와서 정책에 위에서 복사한 내용 붙여넣기. 변경 사항 저장 클릭.

  1. 이제 여기서 빌드된 코드를 업로드 하면 된다.

더 편한 AWS CLI 사용해보기

위에서 바로 이어서 해볼 것이다.

  1. 우선 터미널에 AWS CLI를 설치해야한다.

brew install awscli

  1. 아까 IAM에서 추가한 사용자 이름을 통해 CLI에 유저를 추가해준다.

aws configure --profile abcd

위 명령어를 입력하면 터미널에 4가지를 입력하라고 나온다.

AWS Access Key ID 에는 아까 IAM에서 생성한 액세스 키 입력.
AWS Secret Access Key 에는 IAM에서 생성한 시크릿 키 입력.
그리고 나머지 두개의 입력은

Default region name : ap-northeast-2
Default output format : json

이렇게 입력.

  1. 이제 배포를 해보자. 배포할 프로젝트 디렉토리에서 명령어를 입력한다.

aws s3 sync ./build s3://[S3 버킷 이름] --profile=[사용자 아이디]

나의 버킷이름은 ab-cd 이고 IAM이름은 abcd이므로

aws s3 sync ./build s3://ab-cd --profile=abcd

입력하였다.

빌드하고 배포할때마다 자주 사용할 명령어 이기 때문에 package.json에 스크립트로 추가해두면 편리하다.

  1. 파일이 빌드가 되어있다면 터미널에 npm run deploy 만 입력해도 AWS S3에 있는 나의 버킷에 자동으로 빌드된 파일이 업로드가 된다.
    그럼 버킷에는 나의 정적사이트가 배포된 url이 있는 것이다.

마치며

정적 웹 호스팅을 처음 진행해보았는데 말이 너무 어렵고 복잡해보였지만, 구글링하며 이것저것 학습하며 해보니 나름 수월하게 한 것 같다.

profile
hyo
개발 재밌다

0개의 댓글