Cloudfront 와 S3 구성하기
Cloudfront와 S3를 활용하여 static한 페이지 구성하기
AWS Cloudfront + S3
보통 정적 컨텐츠를 저장할 목적으로 S3를 많이 활용합니다. 이렇게 저장한 파일은 S3 자체에서 제공할수도 있지만, 비용 절감과 속도 향상을 위해서 CDN(Contents Delivery Network)을 사용합니다. AWS에서는 Cloudfront라는 대표적인 서비스를 제공하는데, 본 실습에서는 이 Cloudfront와 S3를 연동하여 한 번에 생성해보도록 하겠습니다.
Backend 구성
terraform {
required_version = ">= 1.0.0"
backend "s3" {
bucket = "art-id-apnortheast2-tfstate"
key = "art/terraform/s3/art-id/id_apnortheast2/terraform.tfstate"
region = "ap-northeast-2"
encrypt = true
dynamodb_table = "terraform-lock"
}
}
도메인을 보유하지 않은 경우
CloudFront의 경우, 자신이 원하는 도메인을 설정할 수 있습니다.
하지만, 별도로 도메인을 보유하지 않은 경우에도, AWS에서 제공해주는 기본 도메인을 사용할 수 있습니다.
이번에는 도메인 없이 CloudFront를 생성하는 방법을 알아보겠습니다.
# S3 Bucket for storing contents
resource "aws_s3_bucket" "contents_devart" {
bucket = "${var.account_namespace}-contents-${var.shard_id}"
}
resource "aws_s3_bucket_public_access_block" "contents_devart" {
bucket = aws_s3_bucket.contents_devart.id
block_public_acls = true
block_public_policy = true
ignore_public_acls = true
restrict_public_buckets = true
}
resource "aws_s3_bucket_cors_configuration" "contents_devart" {
bucket = aws_s3_bucket.contents_devart.id
cors_rule {
allowed_headers = ["*"]
allowed_methods = ["GET", "HEAD"]
allowed_origins = ["*"]
expose_headers = ["ETag"]
max_age_seconds = 3000
}
}
resource "aws_s3_bucket_versioning" "contents_devart" {
bucket = aws_s3_bucket.contents_devart.id
versioning_configuration {
status = "Enabled"
}
}
resource "aws_s3_bucket_accelerate_configuration" "contents_devart" {
bucket = aws_s3_bucket.contents_devart.id
status = "Enabled"
}
resource "aws_s3_bucket_policy" "contents_devart" {
bucket = aws_s3_bucket.contents_devart.id
policy = data.aws_iam_policy_document.contents_devart.json
}
data "aws_iam_policy_document" "contents_devart" {
statement {
principals {
type = "Service"
identifiers = ["cloudfront.amazonaws.com"]
}
condition {
test = "StringEquals"
variable = "AWS:SourceArn"
values = [
aws_cloudfront_distribution.devart_cdn_distribution.arn,
]
}
actions = ["s3:GetObject"]
resources = ["${aws_s3_bucket.contents_devart.arn}/*"]
}
}
resource "aws_s3_bucket_lifecycle_configuration" "contents_devart" {
bucket = aws_s3_bucket.contents_devart.id
rule {
id = "contents_devart_rule"
status = "Enabled"
transition {
days = 30
storage_class = "STANDARD_IA"
}
}
}
resource "aws_cloudfront_origin_access_control" "devart_contents" {
name = "devart-contents"
origin_access_control_origin_type = "s3"
signing_behavior = "always"
signing_protocol = "sigv4"
}
# Cloudfront Distribution
resource "aws_cloudfront_distribution" "devart_cdn_distribution" {
origin {
domain_name = aws_s3_bucket.contents_devart.bucket_regional_domain_name
origin_id = "devart_origin"
origin_access_control_id = aws_cloudfront_origin_access_control.devart_contents.id
}
enabled = true
is_ipv6_enabled = true
comment = "Cloudfront configuration for cdn"
http_version = "http2and3"
# Default Cache behavior
default_cache_behavior {
allowed_methods = ["GET", "HEAD", "OPTIONS"]
cached_methods = ["GET", "HEAD"]
target_origin_id = "devart_origin"
compress = true
forwarded_values {
query_string = false
cookies {
forward = "all"
}
}
viewer_protocol_policy = "redirect-to-https"
min_ttl = 0
default_ttl = 3600
max_ttl = 86400
}
viewer_certificate {
cloudfront_default_certificate = true
}
# List of Custom Cache behavior
# This behavior will be applied before default
ordered_cache_behavior {
path_pattern = "*.gif"
allowed_methods = ["GET", "HEAD"]
cached_methods = ["GET", "HEAD"]
target_origin_id = "devart_origin"
compress = false
viewer_protocol_policy = "redirect-to-https"
min_ttl = 0
default_ttl = 3600
max_ttl = 3600
forwarded_values {
query_string = true
query_string_cache_keys = ["d"]
cookies {
forward = "all"
}
}
}
restrictions {
geo_restriction {
restriction_type = "none"
}
}
# You can set custom error response
custom_error_response {
error_caching_min_ttl = 5
error_code = 404
response_code = 404
response_page_path = "/404.html"
}
custom_error_response {
error_caching_min_ttl = 5
error_code = 500
response_code = 500
response_page_path = "/500.html"
}
custom_error_response {
error_caching_min_ttl = 5
error_code = 502
response_code = 502
response_page_path = "/500.html"
}
# Tags of cloudfront
tags = {
Name = "cdn-contents without domain"
}
}
생성된 CloudFront 테스트
S3 버킷에 다음과 같은 샘플 html 파일을 올려서 테스트합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevOpsArt 소개</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.container {
max-width: 800px;
margin: auto;
background: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
.video-container {
text-align: center;
margin-top: 20px;
}
iframe {
width: 100%;
height: 450px;
}
</style>
</head>
<body>
<div class="container">
<h1>DevOpsArt 소개</h1>
<p>DevOpsArt는 DevOps와 관련된 최신 기술과 트렌드를 다루는 전문적인 블로그 및 커뮤니티입니다. 우리는 DevOps의 개념, 도구, 그리고 최적의 실천 방법을 공유하며, 엔지니어들이 효과적이고 효율적으로 업무를 수행할 수 있도록 돕습니다.</p>
<p>DevOpsArt의 목표는 DevOps 문화를 전파하고, 이를 통해 조직의 개발 속도와 품질을 높이는 것입니다. 우리는 다양한 튜토리얼, 가이드, 그리고 사례 연구를 제공하여, 모든 수준의 기술자들이 DevOps에 대해 이해하고 활용할 수 있도록 지원합니다.</p>
<div class="video-container">
<h2>유튜브 채널</h2>
<iframe src="https://www.youtube.com/embed/vOhNCakx3kk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</body>
</html>위 코드를 sample.html 로 저장한 후, 본인이 만든 버킷에 업로드 합니다.
업로드가 완료되면, 앞서 생성한 CloudFront 도메인을 통해 접속하실 수 있습니다. 도메인 뒤 경로에 파일명을 넣으시면 접속 가능합니다.
https://dafbqt2yr09tj.cloudfront.net/sample.html
Last updated
Was this helpful?