Cloudfront를 사용하여 AWS S3에 Gatsby를 배포하기 위한 체크리스트

Epilocal에서 우리는 정적 사이트 생성기를 믿고 특히 Gatsby를 사용합니다. Gatsby는 AWS와 함께 꽤 잘 작동하지만 올바르게 설정하는 몇 가지 요령이 있습니다.

Gastby on AWS를 배포하는 다른 사람과 공유하고 싶었던 모든 새로운 설정에 대해 내부적으로 사용하는 체크리스트를 작성했습니다.

사용 도구:

gatsby-plugin-s3를 사용하는 개츠비

AWS S3

AWS 클라우드프론트

AWS 경로 53

AWS 인증서 관리자

단계:

1단계: 정적 호스팅을 위한 S3 버킷 설정

액세스 포인트 정책에만 허용되는 퍼블릭 액세스로 새 S3 버킷을 생성합니다. 이는 액세스 제어 목록에 대한 공개 액세스만 차단함을 의미합니다.

설정은 다음과 같아야 합니다.



속성으로 이동하여 정적 웹사이트 호스팅을 선택합니다. "이 버킷을 사용하여 웹사이트 호스팅"옵션을 선택합니다.



또한 이 페이지에서 버킷의 엔드포인트 URL을 볼 수 있습니다. 나중에 복사하십시오. (5단계에서 CloudFront를 설정하는 데 사용함)

2단계: 새 버킷 정책을 추가하여 버킷에 배포할 IAM 사용자 CLI 권한 부여

권한 > 버킷 정책으로 이동하여 S3의 버킷 정책으로 이동하고 다음을 추가합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[YOUR BUCKET NAME HERE]/*"
        }
    ]
}

3단계: Gatsby 빌드용 gatsby-plugin-s3 설치 및 구성

NPM 또는 Yarn을 사용하여 gatsby-plugin-s3를 설치합니다.

gatsby-config.js 파일에서 다음을 추가해야 합니다.

    {
      resolve: `gatsby-plugin-s3`,
      options: {
        protocol: "https",
        hostname: "[YOUR CANONICAL DOMAIN NAME HERE (example:  www.epilocal.com)]",
        bucketName: "[YOUR BUCKET NAME HERE]",
      },
    }

4단계: S3 버킷에 Gatsby 빌드 배포

명령줄에서 다음을 실행합니다. gatsby deploy .

시스템에 여러 AWS 프로필이 있는 경우 대신 AWS_PROFILE=[YOUR PROFILE NAME HERE] npm run deploy 명령을 사용하여 사용하려는 프로필의 ID에 접두사를 붙일 수 있습니다.

5단계: Cloudfront를 S3 버킷에 연결

다음 옵션 변경을 제외하고 모든 기본값을 사용하여 새 Cloudfront 배포를 만듭니다.

오리진 도메인 이름: 드롭다운을 선택하지 않고 여기에 S3 버킷의 엔드포인트 URL을 복사하여 붙여넣습니다. 다음과 같아야 합니다. [YOUR BUCKET NAME].s3.amazonaws.com

뷰어 프로토콜 정책: HTTP를 HTTPS로 리디렉션

CNAME: www.[YOURDOMAINNAME].com

고객 SSL 인증서: 아직 활성화하지 않은 경우 AWS Certificate Manager 링크를 따라 도메인에서 SSL을 활성화하십시오. (도메인 이름으로 Route 53을 사용하지 않는 경우 대신 여기에서 SSL 인증서를 가져올 수 있습니다.) 참고: *.com 및 루트 도메인을 포함하도록 SSL 인증서를 지정해야 합니다.

6단계: www 도메인에 대해 Route 53에 A 및 AAAA 영역을 생성하고 Cloudfront 배포를 가리키도록 합니다.

Route 53 호스팅 영역에서 새로운 단순 레코드를 정의합니다.

레코드 이름에 "www"를 입력하고 "CloudFront 배포에 대한 별칭"을 선택했는지 확인합니다. 그러면 CloudFront 리전 및 배포 이름이 표시되고 드롭다운에서 선택할 수 있습니다. (아래 이미지에서 "배포 선택"이라고 표시된 곳).



동일한 프로세스를 반복하고 A 레코드 대신 AAAA 레코드를 만듭니다.

7단계: 루트 도메인 요청을 www로 리디렉션하는 두 번째 S3 버킷 생성

새 S3 버킷을 생성합니다. 이번에는 공개 액세스를 허용할 필요가 없습니다.

속성으로 이동하여 정적 웹사이트 호스팅을 선택합니다. "리디렉션 요청"옵션을 선택하고 "대상 버킷 또는 도메인"아래에 www 도메인 이름을 입력합니다.

8단계: S3 리디렉션 버킷을 위한 두 번째 Cloudfront 배포 생성

다음 옵션 변경을 제외하고 모든 기본값을 사용하여 새 Cloudfront 배포를 만듭니다.

오리진 도메인 이름: 드롭다운을 선택하지 않고 여기에 두 번째 S3 버킷의 URL을 복사하여 붙여넣습니다. 다음과 같아야 합니다[YOUR BUCKET NAME].s3.amazonaws.com.

뷰어 프로토콜 정책: HTTP 및 HTTPS

CNAME: [YOURDOMAINNAME].com

사용자 정의 SSL 인증서: 이전에 SSL 인증서가 *.com 및 루트 도메인을 포함하도록 지정한 경우 동일한 SSL 인증서가 이 배포도 포함해야 합니다.

9단계: 두 번째 Cloudfront 배포를 가리키는 루트 도메인에 대한 A 및 AAAA 영역 설정

Route 53 호스팅 영역에서 새로운 단순 레코드를 정의합니다.

이번에는 레코드 이름을 비워 둡니다. "CloudFront 배포에 대한 별칭"을 선택하면 이번에는 두 번째 CloudFront 지역 및 배포 이름이 표시되고 드롭다운에서 선택할 수 있습니다.