Hugo 사이트를 AWS S3에 배포하기

사이트가 Hugo 로 생성되면 이제 호스팅 플랫폼에 배포할 차례입니다. 여기서는 이를 AWS S3 로 푸시하고 AWS CloudFront CDN 으로 제공하는 방법을 설명합니다.

이 가이드는 웹 인프라 — 정적 출판, CDN, 색인 및 도메인 서비스 클러스터의 일부입니다.

CLI 기반 배포 워크플로우에 대한 전체 가이드는 AWS CLI 를 사용한 Hugo 사이트의 AWS S3 배포 를 참조하세요.

사이트 준비

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

아직 완료하지 않았다면 Hugo 빠른 시작 을 참조하세요.

배포 옵션

Hugo 로 생성된 사이트를 배포하고 호스팅하는 데 사용할 수 있는 여러 옵션이 있습니다 (https://gohugo.io/hosting-and-deployment/). 저는 개인적으로 다음 옵션을 선호합니다.

• Hugo 사이트를 GitHub 에서 호스팅하는 방법
• AWS Amplify 를 통한 빌드 및 배포.
• 그리고 hugo deploy 명령을 사용하여 S3 로 배포하고 AWS CloudFront CDN, AWS Route53, AWS Lambda 를 통해 제공.

Netlify 와 같은 대안에 대해서는 Hugo 및 정적 사이트를 위한 Netlify: 가격, 무료 티어 및 대안 를 참조하세요.

아래에서는 바로 이 마지막 방법을 자세히 설명합니다.

1.宽松的 권한을 가진 S3 버킷 생성

https://console.aws.amazon.com/s3 으로 이동하세요.

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

2. 버킷을 클릭한 후 => 속성 => 아래쪽 => 정적 웹사이트 호스팅을 선택합니다.

3. 편집을 클릭한 후 - 활성화하고, “정적 웹사이트 호스팅"을 선택합니다.

4. 또한 index 에는 index.html, error 에는 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 함수 배포

Lambda@Edge 함수는 Hugo QuickStart 프로젝트의 디렉토리 URL 을 기본 객체인 index.html 로 다시 작성합니다. 이것이 CloudFront 가 URI ‘/posts/my-post/‘에 대한 내용을 ‘/posts/my-post/index.html’로 반환하여 404 대신 200 을 반환하는 방식입니다.

Flavor Cafe (Scotch) Lambda@Edge 코드

// Hugo on Cloudfront, Lambda@Edge function 
// Flavor Cafe (Scotch)
// @starpebble on github
//
// Two rewrite rules for hugo sub directory uri's.
// Example:
//   1. rewrite uri /posts/ to /posts/index.html
//   2. rewrite uri /posts  to /posts/index.html
//
// Add as many file extensions as you like for rule 2.
// uri's that end in a known file extensions are not rewritten by rule 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) === '/') {
    // e.g. /posts/ to /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)$/)) {
    // e.g. /posts to /posts/index.html
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
}; 

4. AWS CloudFront CDN 생성

이 작업은 새 AWS 콘솔 UI로는 작동하지 않습니다. aws cli 명령어를 사용해야 합니다 - 사용량 기반 (무료 플랜이 아님) AWS CloudFront 배포 생성 를 참조하세요.

https://console.aws.amazon.com/cloudfront 로 이동하세요.

1. 배포 생성
2. S3 버킷을 가리키는 오리진 생성

3. 사이트에 대한 인증서
4. 정적 웹사이트로 변환하라는 제안을 받으면 동의합니다.
5. 오리진을 가리키는 동작을 생성하고 Http 를 Https 로 리디렉션합니다.

6. 아래 동작/함수 연관성 - 오리진 요청에서 Lambda 함수를 선택합니다.

7. 저장
8. 배포의 일반 탭으로 이동하여 배포 도메인 이름을 복사합니다. 다음과 같이 보여야 합니다: asdfasdfasdf.cloudfront.net

5. AWS Route53 DNS 를 CloudFront 로 설정

https://console.aws.amazon.com/route53/v2/hostedzones 로 이동하세요.

1. 사이트의 호스팅 존을 생성하거나 클릭하세요. 사이트 이름과 같아야 합니다. 예: “microsoft.com”
2. CloudFront 배포 (배포 도메인 이름) 를 가리키는 빈 “A” 레코드를 생성합니다.
3. 첫 번째 “A” 레코드의 별칭으로 작용하는 “A” “www” 레코드를 생성합니다.

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 프로젝트의 hugo.toml 또는 config.toml 파일을 엽니다.
2. 끝에 다음을 추가합니다 (다시 microsoft.com 을 본인의 것으로 교체):

[[deployment.targets]]
# An arbitrary name for this target.
name = "lfs3"

# S3; see https://gocloud.dev/howto/blob/#s3
# For S3-compatible endpoints, see https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# If you are using a CloudFront CDN, deploy will invalidate the cache as needed.
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 치트 시트
• AWS CLI 를 사용한 Hugo 사이트의 AWS S3 배포
• Gitea Actions 를 사용하여 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 사이트의 페이지 번들 폴더에 썸네일 이미지를 저장하는 방법

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