AWS S3에 Hugo 사이트 배포

사이트가 hugo로 생성되면, 이를 어떤 호스팅 플랫폼에 배포해야 합니다. 여기서는 AWS S3에 배포하고 AWS CloudFront CDN으로 제공하는 방법을 설명합니다.

사이트 준비

여기서는 Hugo 사이트 프로젝트를 생성하거나 해당 사이트에 글이나 블로그 게시물을 추가하는 방법은 설명하지 않습니다. 이미 이 작업을 완료했다고 가정합니다.

아직 하지 않았다면, 여기에 Hugo 빠른 시작이 있습니다.

배포 옵션

Hugo로 생성된 사이트를 배포하고 호스팅할 수 있는 방법은 여러 가지가 있습니다 (https://gohugo.io/hosting-and-deployment/). 개인적으로 다음과 같은 방법을 선호합니다:

• Hugo 사이트를 GitHub에 호스팅하는 방법
• AWS Amplify를 사용하여 빌드 및 배포
• hugo deploy 명령어를 사용하여 S3에 배포하고, AWS CloudFront CDN, AWS Route53, AWS Lambda를 사용하여 제공

다음에서는 정확히 마지막 방법을 설명합니다.

1. 퍼미션을 완화한 S3 버킷 생성

https://console.aws.amazon.com/s3로 이동합니다.

1. 사이트 이름과 같은 이름의 버킷을 생성합니다. 예: “microsoft.com”

2. 버킷을 클릭한 후 속성으로 이동하고 아래에 있는 “정적 웹사이트 호스팅"을 클릭합니다.

3. 편집을 클릭한 후 “호스팅"을 활성화합니다.

4. 인덱스: index.html, 오류: 404.html을 입력합니다.

5. 저장을 클릭하고, “버킷 웹사이트 엔드포인트"를 기억합니다. 예: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com

6. 버킷 권한으로 이동하고, 아래 이미지를 참조하세요. 공개 액세스가 차단되어선 안 됩니다.

7. 버킷 정책 (microsoft.com을 도메인 이름으로 교체):

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

2. 인증서 생성

AWS 인증서 관리자 https://console.aws.amazon.com/acm로 이동합니다. 올바른 지역을 선택합니다.

1. 요청을 클릭합니다.
2. 공개 인증서를 선택합니다.
3. 도메인 이름: “microsoft.com"과 “www.microsoft.com” 두 개를 입력합니다.
4. “blog.microsoft.com”, “xmpp.microsoft.com” 등의 하위 도메인도 요청할 수 있습니다.
5. DNS 검증을 수행합니다. 등록업체가 AWS라면 Route53 콘솔을 통해 이 작업을 수행하는 것이 훨씬 쉽습니다.

3. Lambda@Edge에 람다 함수 배포

Lambda@Edge 함수는 Hugo QuickStart 프로젝트의 디렉토리 URL을 기본 객체인 index.html로 재작성합니다. 이로 인해 Cloudfront는 URI ‘/posts/my-post/‘를 ‘/posts/my-post/index.html’로 제공하여 200 상태 코드를 반환합니다.

Flavor Cafe (Scotch) Lambda@Edge 코드

// Hugo on Cloudfront, Lambda@Edge function 
// Flavor Cafe (Scotch)
// @starpebble on github
//
// 두 가지 재작성 규칙을 위한 hugo 하위 디렉토리 URI.
// 예:
//   1. URI /posts/를 /posts/index.html로 재작성
//   2. URI /posts를 /posts/index.html로 재작성
//
// 규칙 2에 대해 원하는 만큼 파일 확장자를 추가할 수 있습니다.
// 알려진 파일 확장자로 끝나는 URI는 규칙 2에 의해 재작성되지 않습니다.

'use strict';

// @starpebble on github
// hugo flavor cafe (scotch)

const DEFAULT_OBJECT = 'index.html';

exports.handler = (event, context, callback) => {
  const cfrequest = event.Records[0].cf.request;
  if (cfrequest.uri.length > 0 && cfrequest.uri.charAt(cfrequest.uri.length - 1) === '/') {
    // 예: /posts/를 /posts/index.html로
    cfrequest.uri += DEFAULT_OBJECT;
  }
  else if (!cfrequest.uri.match(/.(css|md|gif|ico|jpg|jpeg|js|png|txt|svg|woff|ttf|map|json|html)$/)) {
    // 예: /posts를 /posts/index.html로
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
}; 

4. AWS CloudFront CDN 생성

https://console.aws.amazon.com/cloudfront로 이동합니다.

1. 분배를 생성합니다.
2. 원본을 생성하여 S3 버킷을 가리키도록 합니다.

3. 사이트 인증서를 생성합니다.
4. 정적 웹사이트로 전환하는 것을 제안하면 동의합니다.
5. 원본을 가리키는 행동을 생성하고, HTTP를 HTTPS로 리디렉션합니다.

6. 행동/함수 연관성 아래에서 원본 요청에서 람다 함수를 선택합니다.

7. 저장합니다.
8. 분배의 일반 탭으로 이동하여 분배 도메인 이름을 복사합니다. 예: asdfasdfasdf.cloudfront.net

5. AWS Route53 DNS를 CloudFront로 지정

https://console.aws.amazon.com/route53/v2/hostedzones로 이동합니다.

1. 사이트의 호스팅 존을 생성하거나 클릭합니다. 예: “microsoft.com”
2. 클라우드프론트 분배에 가리키는 빈 “A” 레코드를 생성합니다.
3. “www” 레코드를 생성하여 첫 번째 “A” 레코드에 별칭으로 지정합니다.

6. AWS CLI 설치

1. AWS 클라이언트 명령줄 도구를 설치합니다. https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
2. AWS CLI 연결을 구성합니다.
   1. ~/.aws/credentials 파일을 확인합니다. 다음과 같은 내용이 있어야 합니다.

[default]
aws_access_key_id = .......
aws_secret_access_key = .......

3. 연결을 테스트하기 위해 아래와 같은 명령어를 입력하여 S3 버킷을 확인합니다.

aws s3 ls

7. config.toml 업데이트

1. hugo.toml 또는 config.toml 파일을 열고, 아래와 같이 추가합니다 (microsoft.com을 본인의 도메인으로 교체):

[[deployment.targets]]
# 이 타겟에 대한 임의의 이름
name = "lfs3"

# S3; https://gocloud.dev/howto/blob/#s3
# S3 호환 엔드포인트 사용 시: https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# CloudFront CDN을 사용하는 경우, 필요에 따라 캐시를 무효화합니다.
cloudFrontDistributionID = 	""

config.yml을 사용하는 경우 다음과 같이 보입니다:

deployment:
  targets:
    name: "lfs3"
    URL: "s3://microsoft.com?region=ap-southeast-2"
    cloudFrontDistributionID:	"E123123123"

3. 파일을 저장합니다.
4. 사이트를 컴파일합니다.

hugo

5. hugo deploy 명령어로 배포합니다.

hugo deploy

6. 브라우저에서 사이트 URL을 열어 모든 것이 잘 작동하는지 확인합니다.

유용한 링크

• Hugo 웹사이트에서 Google 폼 제출하기
• Hugo 웹사이트에 구조화된 데이터 마크업 추가하기
• Hugo 쉬트 커트
• Gitea 액션을 사용하여 Hugo 웹사이트를 AWS S3에 배포하기
• Hugo 빠른 시작: https://gohugo.io/getting-started/quick-start/
• Hugo 테마 예시의 대규모 목록: https://themes.gohugo.io/
• Hugo 호스팅 및 배포: https://gohugo.io/hosting-and-deployment/
• Mainroad Hugo 테마에서 이미지 처리: Mainroad 테마 이미지 처리
• AWS 명령줄 인터페이스(AWS CLI) 설치: https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
• Hugo에 가장 인기 있는 테마들
• Mainroad 테마를 사용하는 Hugo 사이트에서 페이지 번들 폴더에 썸네일 이미지를 저장하는 방법

이 작은 가이드가 도움이 되었기를 바랍니다. 좋은 하루 보내세요!