Education*
Devops
Architecture
F/B End
B.Chain
Basic
Others
CLOSE
Search For:
Search
BY TAGS
linux
HTTP
golang
flutter
java
fintech
개발환경
kubernetes
network
Docker
devops
database
tutorial
cli
분산시스템
www
블록체인
AWS
system admin
bigdata
보안
금융
msa
mysql
redis
Linux command
dns
javascript
CICD
VPC
FILESYSTEM
S3
NGINX
TCP/IP
ZOOKEEPER
NOSQL
IAC
CLOUD
TERRAFORM
logging
IT용어
Kafka
docker-compose
Dart
S3를 이용해서 정적 웹 사이트 서비스 하기
Recommanded
Free
YOUTUBE Lecture:
<% selectedImage[1] %>
yundream
2023-10-13
2023-10-10
1714
 ## S3 Static website S3는 객체 스토리지 서비스(Object storage service)로 일반적으로 파일, 이미지, 비디오, 백업파일 등을 저장하고 검색하는데 사용한다. 그 외에도 **정적 웹 사이트(static website)** 를 호스팅 하는 기능을 가지고 있다. 이를 이용해서, 별도의 서버를 구성할 필요 없이 웹 사이트를 서비스 할 수 있다. 사용자는 S3 버킷(bucket)을 만들고 여기에 HTML, CSS, Javascript, 이미지, 비디오 등의 정적 웹 콘텐츠를 이용해서 사이트를 만들 수 있다. ## 예제 코드 https://github.com/yundream/bootstrap-example-blog 에서 **부트스트랩(bootstrap)** 예제 코드를 다운로드(clone)하자 ```shell $ git clone https://github.com/yundream/bootstrap-example-blog.git ``` 브라우저로 보면 이런 모습이다.  ## S3 Bucket 설정 Static website를 위한 S3 bucket을 만든다.  AWS web console > S3 로 이동해서 **create bucket** 을 클릭한다.  * Bucket name: bucket 이름이다. bucket 이름은 리전에서 유일해야 한다. 이미지에서는 s3-static-website인데, 실제로는 s3-static-website-joinc로 입력했다. 마음에 드는 이름을 입력하자. * AWS Region: bucket을 배치할 리전을 선택한다.  * S3 bucket은 기본적으로 인터넷에서 접근 할 수 없도록 설정되어 있다. "Block all public access"가 체크되어 있는데, 체크를 제거하자. 이제 해당 S3 bucket을 인터넷에서 접근 할 수 있게 된다.  Bucket이 만들어진 걸 확인 할 수 있다. ## S3 bucket에 파일 업로드 만들어진 bucket에 앞서 예제파일을 업로드 하자.  ## S3 bucket 설정 S3 bucket을 website 호스팅 할 수 있도록 설정을 해야 한다.  "S3 bucket > Properties"를 클릭하면 **Static website hosting** 설정을 볼 수 있다.  "Edit"를 클릭해서 아래와 같이 설정한다.  * static website hosting: Enable를 선택한다. * Hosting type: Host a static website를 선택한다. * Index document: 사용자가 도메인 이름만으로 접근했을 경우, 기본으로 보여줄 HTML 문서를 설정한다. index.html을 입력한다. ## Bucket Policy 현재 상태를 점검해 보자. 1. S3 bucket 생성 2. S3 bucket을 public access 가능하도록 허용. 3. S3 bucket에 파일 업로드 마지막 설정이 하나 더 남았다. 현재 bucket은 public access가 가능하도록 되어 있지만, 파일에 대한 permission이 "읽기 가능"하도록 설정되어 있지 않다. S3 bucket object를 읽기 가능하도록 해야지 html, css, 이미지 문서들을 사용자가 읽을 수 있게 된다. "S3 bucket > Permission > Bucket polic"를 보면 아무런 규칙이 없는 것을 확인 할 수 있다.  **Edit** 를 클릭해서 아래와 같이 bucket 규칙을 만들어주자.  아래 json 내용을 복사하고 bucket 이름만 바꿔서 사용하면 된다. ```json { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::s3-static-website-joinc/*" } ] } ``` ## Static WebSite URL 이제 static website 에 접근하기 위한 URL이 만들어진다. "S3 bucket > properties"에서 확인 할 수 있다.  ## 테스트 Static WebSite URL로 테스트를 해보자.  ## 정리 지금 까지의 내용을 정리해보자. 1. AWS S3 static website 기능을 이용해서 S3에서 정적 사이트를 바로 호스팅 할 수 있다. 2. Bucket을 만들고 파일과 폴더를 업로드 한다. 3. "S3 Bucket > Properties > Static website hosting" 을 enable 한다. 4. "S3 bucket > Permission > Block all public access" 를 **off** 한다. 5. "S3 bucket > Permission > Bucket policy"에 읽기(s3:GetObject)를 허용하는 규칙을 추가한다. 이렇게 해서 AWS S3를 이용해서 정적 웹 사이트를 호스팅 할 수 있게 됏다. 실제 업무 환경에서는 도메인을 연결하고 SSL(HTTPS)설정을 해줘야 할 것이다. 이들 내용은 따로 다루도록 하겠다.
Recent Posts
LLama-3.2-Vision 테스트
Vertex Gemini 기반 AI 에이전트 개발 04. 프롬프트 엔지니어링
Vertex Gemini 기반 AI 에이전트 개발 03. Vertex AI Gemini 둘러보기
Vertex Gemini 기반 AI 에이전트 개발 02. 생성 AI에 대해서
Vertex Gemini 기반 AI 에이전트 개발 01. 소개
Vertex Gemini 기반 AI 에이전트 개발-소개
생성 AI 모델 Flux.1 설치 및 사용
GPT를 이용한 Reranker 테스트
5분만에 만들어보는 Streamlit 챗봇
Let's encrypt로 SSL 인증서 관리하기
Archive Posts
Tags
aws
devops
s3
Copyrights © -
Joinc
, All Rights Reserved.
Inherited From -
Yundream
Rebranded By -
Joonphil
Recent Posts
Archive Posts
Tags