개시하다

이 기사는 JAWS-UG 간서여자회'첫 여자 응원 기획! 사례에서 배운 목촌&목촌회'입니다.
문자 디렉토리1 문자 디렉토리의 추가 버전입니다.

본문의 목표

Amazon S3를 통해 정적 WEB 웹 사이트 제작

Amazon S3로 정적 웹 사이트 만들기

S3에서 정적 웹 사이트 공개 전 프로세스

WEB 웹사이트용 S3 배럴 제작

통에 파일 업로드

설정 파일의 공개

S3의 웹 사이트 endpoint에 액세스하여 사이트 표시 여부를 확인

용어 정보

S3:
Simple Storage Service의 약칭
줄임말이지만 모두들 S3라고 부른다
물통:
S3에서 만든 폴더식
이름은 반드시 독특해야 한다
계정당 최대 100개
객체:
파일 정보
URL을 통해 주소 지정
통 안에 무한정 방치할 수 있다
객체의 최대 크기는 5TB입니다.
세그먼트 정책:
세그먼트에 대한 액세스 설정
JSON 형식으로 기술하다
사이트 종점:
S3의 객체에 액세스하기 위한 URL
끝점 자동 할당
※ 이 단계는 독립된 도메인과 할당하는 방법을 생략합니다(무료 테두리 없이.com 도메인도 10달러 증가...)

Amazon S3의 정적 웹 사이트 구축 단계

1. 웹사이트 제작용 S3통

1.1.메뉴에서 S3 클릭

　
1.2.Create Bucket 을 클릭합니다.
원래 만든 물통이 뭔지 보면 신경 쓰지 마세요.

　
1.3.Bucket Name에 원하는 물통 이름을 넣으십시오.
세상에 하나밖에 없는 게 필요하니까 다른 거 끼지 마세요
예를 들면'모모쿠걸스'.

　
1.4.세그먼트 이름을 입력한 후 Create 버튼을 클릭합니다.

　
1.5.물통이 완성되었다

2. 통에 파일 올리기

2.1.업로드용 파일 3개를 준비하세요.

index.> (웹 사이트 첫 페이지)

error.> (파일이 없는 URL을 지정할 때 오류 페이지)

index.)에 붙여넣은 이미지 파일(적합한 이미지를 준비하십시오)

index.라는 내용으로 다음과 같은 느낌을 받았다.
수첩 등으로 하세요.
자신을 이해하기 쉽게 하기 위해 "Hello World ⇔ 33;의 문자열 섹션입니다.
그림 파일의 이름을 확인하십시오.
index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>

 <head>
  <title>JAWS-UG関西女子会もくもく勉強会</title>
 </head>

 <body>
  <!--文字列をオリジナルなものに変えてみましょう-->
  <span style="font-size : 100pt">Hello World!!</span></br>

  <!--画像ファイル名を自分で用意した画像ファイル名と合わせましょう-->
  <img src="./kansaigirls.jpg" width="500" height="500">
 </body>

</html>

존재하지 않는 파일 이름을 지정할 때 표시되는 error입니다.라는 내용으로 다음과 같은 느낌을 받았다.
우리도 내용을 알기 쉽게 고쳐 보자.
그림 파일의 이름을 확인하십시오.
error.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>

 <head>
  <title>JAWS-UG関西女子会もくもく勉強会</title>
 </head>

 <body>
  <!--文字列をオリジナルなものに変えてみましょう-->
  <span style="font-size : 50pt">Sorry!! Page not found!!</span></br>

  <!--画像ファイル名を自分で用意した画像ファイル名と合わせましょう-->
  <img src="./kansaigirls.jpg" width="500" height="500">
 </body>

</html>

　
2.2.완성된 물통 이름의 링크를 클릭하세요.

　
2.3.[업로드] 버튼을 클릭합니다.

　
2.4.업로드할 파일 선택

　
2.5.Drag and drop files 및 folders to upload here 상자에서 드래그 앤 드롭
Start Upad 버튼을 클릭합니다.

　
2.6. 3개의 파일이 모두 Transfers 레이블에서 "Done"으로 변경되었음을 확인합니다.

3. 설치 파일 공개

3.1.사이트 공개 설정

3.1.1.Properties 버튼을 클릭합니다.

　
3.1.2."Static Website Hosting"을 클릭하여 설정 항목을 확장하고 "Enable website hosting"을 확인합니다.
Index Doctent 및 Error Doctument 막대에서 방금 업로드한 index입니다.> 및 error를 입력합니다.
입력이 끝나면 Save 버튼을 클릭합니다.

3.2.세그먼트 정책 설정

3.2.1.같은 "Properties"에서 "Permissions"를 클릭하여 설정 항목을 확장하고 "Add bucket policy"를 클릭합니다.

　
3.2.2.통 정책 편집기를 엽니다.
정책은 JSON 형식으로 작성되며, AWS 공식 도구가 AWS Policy Generator를 사용한다면
자동 생성이 가능하기 때문에 편리합니다.
편집기의 왼쪽 아래에 있는 "AWS Policy Generator"링크를 클릭합니다.

　
3.2.3.발생기 화면에 다음 내용을 입력하고 Add Statiement 버튼을 클릭합니다.
Step 1: Select Policy Type
S3 Bucket Policy 선택
Step 2: Add Statement(s)
Effect → "Allow"
Principal → "*"
Amazon S3 선택
Action→"GetObject"만 선택
Amazon Resource Name(ARN)→"arn:aws:s3: 통 이름 입력/*"