brunch

137.S3이용한 상품소개 홈페이지 만들기

by Master Seo

<1> 목적

빠르게 상품 소개 홈페이지를 만들어보자.



<2> 작업 순서

1. AWS에서 public access로 S3 만들기

2. S3 에서 Web hosting Enable 하기

3. DNS에 등록하기

4. 부트스트립에서 상품 소개 템플릿 샘플 다운로드

5.. 소스를 S3에 올리기

6. 사이트 접속해 확인하기

7. AWS 만든것 삭제하기



1. AWS에서 public access로 S3 만들기



1) S3 > seo.it-pro1.com 이라는 버킷을 만든다.

10 seo.png


2) 자기 소개서 페이지이므로 외부에서도 접속 하도록 허용한다.

Block all public access 의 체크를 해지한다.

11 해지.png




2. S3 에서 Web hosting Enable 하기


13 static hosting.png
14 index.png

1) notpad로 index.html을 만들어 Upload한다.

15 s3 http.png


2) 사이트가 뜨는지 확인해본다.

index.html 클릭하면 S3 URL이 나온다.


권한이 없다고 나온다.

403 Forbidden

Code: AccessDenied

Message: Access Denied



3) AWS S3 버킷에 권한을 준다.

https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/dev/example-bucket-policies.html


{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::seo.it-pro1.com/*"
]
}
]
}




3. DNS에 등록하기


Route53 에서 Alias 로 S3 버킷을 지정한다.


20 route53.png
21 seo route53.png



참고 : 일반 Bind 나 다른 곳에서 ROUTE53을 운영하는 경우는 다음과 같이 CNAME을 설정한다.

CNAME으로 S3 DNS이름으로 위임해 준다!!!



도메인으로 사이트 접속 확인한다.

22 seo html.png



4. 부트스트립에서 상품 소개 템플릿 샘플 다운로드


boot스트랩 자기소개서 템플릿을 이용해보자.

https://startbootstrap.com/


https://startbootstrap.com/previews/resume/


다운로드 - 압축 풀기


내용 수정하기

수정이 힘들면 그냥 올린다.



5. 소스를 S3에 올리기



6. 사이트 접속해 확인하기

http://seo.it-pro1.com/



7. AWS 만든것 삭제하기



참고1

S3 특정 IP 주소 제한

https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/dev/example-bucket-policies.html


{
"Version": "2012-10-17",
"Id": "S3PolicyId1",
"Statement": [
{
"Sid": "IPAllow",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::seo.it-pro1.com/*",
"Condition": {
"IpAddress": {
"aws:SourceIp": "223.1.1.0/24"
}
}
}
]
}



EC2에도 boot스트립으로 동적 홈페이지를 쉽게 만들수 있다.

https://brunch.co.kr/@topasvga/297



# 참고 사이트 : 버킷 정책에 따른 jason

https://docs.aws.amazon.com/ko_kr/IAM/latest/UserGuide/reference_policies_examples_s3_rw-bucket-console.html


# 참고 매뉴얼

https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html


감사합니다.

keyword
매거진의 이전글136.AWS Secret Manager비밀값 관리