5장 클릭 한 번으로 모바일에서 나만의 반응형 페이지 만들기

chapter5

사진 파일 업로드 및 확인

실습 아키텍처

AWS 웹콘솔 -파일업로드→ AWS S3 ←URL 접속- 인터넷 브라우저

실습 요약

1. 버킷 생성
2. AWS S3에서 이미지 업로드
3. 업로드 이미지 웹에서 확인

이번 실습에서는 스토리지에 이미지 파일을 업로드 하는 것으로, 콘솔에서 S3에 접속 후 버킷을 생성합니다.

버킷 생성후, 이미지 파일을 업로드 하는 것은 일반 클라우드에서 업로드 하듯 쉽게 업로드 할 수 있습니다.

웹에서 확인하기에, 퍼블릭 권한 관리에서 '이 객체에 퍼블릭 읽기 액세스 권한 부여함'을 선택합니다.

이와 같이 추가된 모습이고

선택 시 다음과 같이 나오게 됩니다.

객체 URL을 눌러보면

업로드한 이미지가 나오는 것을 확인할 수 있습니다.

부트스트랩을 이용한 반응형 페이지 생성

실습 아키텍처

AWS 웹콘솔 -HTML/CSS/JS 업로드 → AWS S3 ← URL 접속- 인터넷 브라우저

실습 요약

1. 부트스트랩 홈페이지 접속
2. 부트스트랩 템플릿 다운로드
3. S3 버킷 생성
4. 부트스트랩 템플릿 파일 업로드
5. 정적 웹 사이트 설정
6. 엔드포인트 URL을 통한 부트스트랩 index.html 확인

우선 부트스트랩 홈페이지에서 자신이 원하는 부트스트랩 템플릿을 받아 다운로드한다.

그리고 새로운 버킷을 생성하고 다운로드 받은 파일을 업로드한다.

속성으로 가서 정적 사이트 호스팅을 편집합니다

이를 활성화 하고 인덱스파일을 지정합니다.

설정이 끝나면 URL링크로 엔드포인트가 생성됩니다.

하지만 이 상태로 접속하면 접속이 제한될 것입니다.

버킷 정책도 설정해줘야 하는데요

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

밑에 wanfreelancer 부분은 자신의 버킷 이름에 맞게 바꿔주시면 됩니다.

여기까지 완료 되었다면 자신의 웹사이트가 나타나는 것을 확인하실 수 있습니다.

---

당신이 지금 알아야 할 AWS - 이영호, 한동수 지음 을 참고하였습니다.