AWS / 기초

배포

특정 IP나 도메인 같은 고유의 주소를 부여받아 다른 컴퓨터에서도 그 주소로 접속할 수 있음

다른 사용자들이 인터넷을 통해 사용할 수 있게 만드는 것

AWS

Amazon Web Services, 아마존의 클라우드 컴퓨팅 서비스

S3

AWS의 데이터 저장 및 관리 서비스

파일 저장 및 다운로드 : 구글 드라이브, icloud와 같은 서비스와 비슷함
웹 호스팅 기능 : s3를 통해서 웹페이지를 배포할 수 있음
서버로부터 html, css, js 이미지 파일 등을 다운로드해야 하기 때문에 s3을 이용

버킷

s3의 모든 객체는 버킷에 저장됨
s3에서도 여러 개의 저장소를 만들 수 있음 ⇒ 그중 하나의 저장소를 버킷이라고 함
* 객체 : s3의 버킷에 업로드된 파일을 의미

실습

S3에서 버킷 셋팅 및 버킷에 업로드하는 간단한 실습이다.

사전 준비

회원가입 : https://www.lainyzine.com/ko/article/how-to-create-an-amazon-web-services-account/

위 블로그 참고

이제 공식 페이지로 들어가기

https://ap-northeast-2.console.aws.amazon.com/s3/get-started?region=ap-northeast-2

버킷 셋팅

1. 버킷 만들기 클릭

2. 버킷 만들기

버킷 이름 : 나중에 수정할 수 있으므로 일단 임의로 유효성 검사에만 맞게끔 작성해 주면 된다.
객체 소유권 : 그냥 저대로 내버려두고 패스
버킷의 퍼블릭 액세스 차단 설정
: 익명의 사용자가 접근을 할 수 있는지 없는지
=> s3에 저장된 파일을 조회할 수 있는지 없는지
=> 즉 페이지에 접근하기 위해 필요한 파일들을 다운로드할 수 있는지를 의미함 => 페이지를 배포하려면 차단을 해제해야 함!

그 외 아래 설정들은 기본 설정대로 그대로 두고 버킷 만들기 클릭

3. 버킷 정책 추가

AWS에서는 정책에서 json 문서를 작성해 권한을 부여함

기본적으로 보안을 위해 권한이 없는 상태로 생성되기 때문에 여기서 수동으로 권한을 허용해줘야 함

* 위에서의 버킷과 이름이 다른 이유는... instagram-web에서 그냥 오늘 날짜로 이름을 바꿨다..

1) 버킷 클릭 -> 권한 탭 클릭 -> 버킷 정책 -> 편집 클릭 -> 새 문 추가 클릭

2) 필터링에서 S3 검색 후 체크 -> GetObject 검색 후 체크

3) 리소스 추가

작업 추가 바로 아래에 있는 리소스 추가 클릭 후 리소스 유형을 object로 선택하면 리소스 ARN 값이 첫번째 이미지처럼 나오게 된다.

{BucketName}을 내 버킷 이름으로 변경해주고, {ObjectName}은 일단은 모든 객체를 다 허용한다는 의미로 *로 대체

다 했으면 리소스 추가 클릭

그리고 마지막으로 정책에 있는 코드에서 "Principal"에서 모든 사용자에게 권한을 부여한다는 의미로 "*"으로 수정

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "Statement1",
			"Principal": "*",
			"Effect": "Allow",
			"Action": [
				"s3:GetObject"
			],
			"Resource": [
				"arn:aws:s3:::250526-web/*"
			]
		}
	]
}

이제 변경 사항 저장 클릭!

4. 웹 호스팅 설정하기

간단하게 현재 시간을 표시하는 html 파일 하나를 생성했다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>S3에 업로드하기</title>
  </head>
  <body>
    <h2>안녕하세요</h2>
    <p>현재 시간 : <span id="time"></span></p>
    <script>
      // 현재 시간 출력
      const nowTime = document.getElementById('time');
      const timer = function () {
        const now = new Date();
        // paddStart(문자열 길이, (비었을 경우)채울 문자열);
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const date = now.getDate();
        const hour = String(now.getHours()).padStart(2, '0');
        const minute = String(now.getMinutes()).padStart(2, '0');
        const second = String(now.getSeconds()).padStart(2, '0');

        nowTime.textContent = `${year}년 ${month}월 ${date}일 ${hour} : ${minute} : ${second}`;
      };
      timer();
      setInterval(timer, 1000);
    </script>
  </body>
</html>

이제 이 파일을 업로드하고자 한다.

1) 버킷 업로드

이번엔 객체 탭으로 가서 업로드를 클릭한다

(노란색 업로드나 파란색 테두리 업로드나 별 상관없다..)

그 다음 파일을 드래그 후 아래에 있는 업로드 버튼 클릭

잘 됐으면 닫기 버튼 눌러주고 다시 객체 탭으로 가면 잘 올라와있는 것을 볼 수 있다

2) 웹 호스팅 (배포하기)

이제 속성탭 들어가서 스크롤 쭉 ~~내려보면 정적 웹사이트 호스팅이 있다.

여기서 편집 클릭하면 우측 이미지같이 뜨는데

정적 웹사이트 호스팅 활성화에 체크, 인덱스 문서에 index.html으로 써주면 이제 건드릴 건 없다.

이제 저장 누르고, 다시 속성 탭 - 정적 웹 사이트 호스팅을 들어가보면 아래와 같이 엔드포인트가 생성되어있는 것을 확인할 수 있다.

들어가면 index.html이 잘 배포되어있는 것을 볼 수 있다!

'AWS' 카테고리의 다른 글

AWS / 서비스들 정리하기 (0)	2025.05.29
AWS / CI/CD (1)	2025.05.29
AWS / 도메인, HTTPS 설정 (0)	2025.05.28
AWS / S3, Cloudfront를 활용해 배포하기 (0)	2025.05.28

hykim

AWS / 기초

배포

AWS

S3

버킷