Title : 클릭한번으로 모바일에서 나만의 반응형 페이지 만들기
1. AWS S3(Simple Storage Service)란?
- 어디서나 원하는 양의 데이터를 저장하고 검색할 수 있도록 구축된 객체 스토리지 서비스
- 클라우드에 파일을 저장하고 공유할 수 있으며, 게시판 파일 첨부나 멀티미디어 파일 등을 보관하는 파일서버 역할
=> 사용사례 : 파일 저장하는 스토리지 역할만이 아닌, 빅데이터 분석, 백업 및 복구 등 데이터 기반 업무에 활용
ㅇ 클라우드 스토리지
1. 객체 스토리지
ㄴ AWS S3 객체스토리지 솔루션, 규모와 유연성이 필요한 최신 애플리케이션을 처음부터 구축 시 적합
2. 파일 스토리지
ㄴ 파일 시스템으로 구성되는 스토리지 형태로 NAS(Network Attached Storage)라고 함
ㄴ AWS에서도 EFS(Elastic File System) 지원 (공유 파일에 엑세스 해야 하는 어플리케이션에 적합)
3. 블록 스토리지
ㄴ 데이터베이스 또는 ERP 시스템 등 엔터프라이즈 애플리케이션은 지연시간이 짧은 스토리지 필요
ㄴ DAS(Direct Attached Storage) 또는 SAN(Storage Area Network)
ㄴ AWS에서는 EBS(Elastic Block Store)
ㄴ 고성능 워크로드에 엄청 짧은 지연시간을 사용하는 작업에 적합
2. S3 구성 및 이해
- S3 구성
ㄴ S3를 사용하기 위해서는 먼저 버킷(Bucket) 생성 후 버킷에 오브젝트(Object)를 저장한 뒤 접근 권한을 만들어 공개함
a. 버킷(Bucket) : 데이터 저장소
b. 오브젝트(Object) : 저장 파일명
- S3 기본
ㄴ 하나의 파일 크기는 0바이트부터 5테라까지이며, 파일 수 제한 없이 무제한 저장
ㄴ S3 버킷은 폴더 혹은 파티션과 유사하며, 각 버킷별 접근 권한이나 보안 설정 등을 다르게 지정 가능
ㄴ 버킷명은 웹사이트 주소나 DNS 주소를 갖기 때문에 중복되는 이름을 만들 수 없고, 모든 리전에서 유일함
- S3 객체의 구성요소
ㄴ 키 : 파일의 이름(ex. today.txt, myphoto.png)
ㄴ 값 : 파일의 데이터
ㄴ 메타 데이터 : 저장한 파일에 대한 추가 정보
ㄴ 버전 아이디 : 파일의 버전관리를 위한 고유 아이디
ㄴ ACL : 파일의 권한을 담은 데이터
- A3의 특징
ㄴ 높은 내구성
ㄴ 손쉬운 확장성
ㄴ 보안성과 편리성
ㄴ 관리 유연성
[실습1] S3 사진 파일 업로드 및 확인
[실습1] S3 사진 파일 업로드 및 확인
- 서비스 창에서 스토리지에 있는 S3를 클릭하여 이동한다.
1. 버킷 생성하기
- 버킷 만들기를 눌러 버킷 생성 페이지로 이동한다.

- 버킷 이름을 입력 후 버킷을 만든다.

- 아래 화면은 버킷 생성 후 볼 수 있는 화면이다.

2. 파일 버킷에 업로드 하기
- 아무 파일이나 준비 후 버킷의 입력을 클릭 해 들어간 다음, 준비한 파일을 업로드 한다.
- 권한과 속성은 별도로 건드리지 않고 넘어간다.

- 아래 화면은 파일 업로드 후 볼 수 있는 화면이다.

3. 버킷, 객체 권한 설정하기
- 버킷 권한 설정하기
- 버킷의 권한 탭으로 이동하여, 퍼블릭 액세스 차단(버킷 설정) 부분의 편집 버튼을 눌러 이동한다.
ㄴ 속성 탭 : 정적 페이지 운영 시 사용
ㄴ 권한 탭 : 접근제어 시 사용

- 다음과 같이 선택 해제 후 변경 사항을 저장한다.

- 객체 권한 설정하기
- 버킷의 객체 탭으로 이동하여 원하는 객체의 이름을 클릭 후 설정을 들어간다.

- 권한 탭으로 가서 ACL(액세스 제어 목록) 부분에서 편집버튼을 누른다.

- 다음과 같이 설정 후 수정 내용을 저장한다.

순서 정리 => 버킷 생성 후 퍼블릭 권한 부여 - 오브젝트 업로드 후 권한 설정 - 업로드 파일 확인
[실습2] Amazon S3를 사용하여 정적 웹사이트 호스팅
[실습2] Amazon S3를 사용하여 정적 웹사이트 호스팅
- 서비스 창에서 스토리지에 있는 S3를 클릭하여 이동한다.
1. 버킷 생성하기
- 버킷 만들기를 눌러 버킷이름을 mybuck-0909-02로 생성해주었다.

- 해당 버킷 설정에 들어가 쭉 내린 후 정적 웹 사이트 호스팅 설정을 편집한다.

- 아래처럼 수정 후 변경 사항을 저장한다.

2. 정책 생성하기
- 다음으로 버킷 권한 설정으로 이동해 퍼블릭 액세스 차단을 해제한 뒤, 버킷 정책 화면으로 이동한다.
- AWS 정책 생성기
Principal : *
Action : GetObject
ARN : 버킷 생성 시 해당 버킷 페이지에서 볼 수 있다. (ex. arn:aws:s3::::mybuck-0909-02)
ㄴ ARN 뒤에 하위 디렉터리를 포함하기 위해 /* 를 추가로 입력한다.

- 입력 후 Add Statement 클릭

- 클릭 후 뜨는 json 코드를 정책 화면에 붙여넣기 하면 된다. (입력 후 변경 내용 저장해야함)

- 생성된 정책 코드

- 생성한 정책 코드를 버킷 정책 편집 공간에 붙여넣기 후 저장한다.

3. 파일 업로드하기
- 업로드 할 파일인 index.html과 error.html 파일의 코드는 다음과 같이 만들었다.


- 생성한 파일을 버킷에 올린다.
- 업로드 후 권한 탭에서 [퍼블릭 읽기 액세스 권한 부여]로 설정한다.


- 버킷 화면에서 속성 탭으로 이동 후 아래로 내리면, [정적 웹 사이트 호스팅]에 있는 링크로 현재 페이지를 확인할 수 있다.
순서 정리 => S3버킷 생성 - 정책 설정 - index.html과 error.html 파일 업로드 - 정적 웹 사이트 설정 - 엔드포인트 URL을 통한 웹사이트 페이지 확인
[실습3] 부트스트랩을 이용한 반응형 페이지 만들기
[실습3] 부트스트랩을 이용한 반응형 페이지 만들기
- 아래 주소로 들어간 뒤 템플릿 & 테마 버튼을 눌러 테마를 다운받는다.
(https://www.notion.so/yoonw/210909-3edc3ac6ab894486aed871fa8a49aa78#a33eea769f554a4a980205888e0159da)

- 원하는 테마를 다운받으면 압축파일로 다운받게 되는데, 이 압축을 풀어 둔다.
1. bucket 생성
2. 정적 웹호스팅 설정
3. public 권한 설정
- 위 과정을 진행한 후, 다운받은 파일을 모두 업로드한다.


- 권한 설정을 하기 위해 객체 탭에서 해당 오브젝트를 선택 후 [작업] - [퍼블릭으로 설정]을 눌러서도 가능하다.

- 정적 웹 호스팅 주소로 들어가 확인을 해보면 운영이 되고 있다.
