[AWS] S3에 폰트 파일 올려보기

AWS S3를 처음 사용해보면서 간단하게 폰트 파일을 올려보기로 했다.

폰트 파일 업로드하기

기본 설정으로 rebuilder-font라는 버킷을 생성한 뒤 다음과 같이 폰트 파일을 업로드했다. (로컬에 이미 분류되어 있던 폴더를 그대로 올림)

CORS 설정

폰트를 S3에서 불러오는 과정에서 적용될 사이트의 URL과 다르기 때문에 CORS 에러가 발생할 수 있다는 걸 알게 되어 다음과 같이 진행했다.

• Amazon S3 > 버킷 > rebuilder-font에서 '권한'에 들어감
• 맨 아래 CORS(Cross-origin 리소스 공유)의 편집을 클릭
• 다음과 같이 작성 (형태는 반드시 JSON이어야 함)

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "http://localhost:5173",
            "http://localhost:5173/technology"
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]

퍼블릭 액세스 차단 설정

폰트를 로드하기 위해 외부에서 퍼블릭하게 접근이 가능해야 한다. 권한의 '퍼블릭 액세스 차단(버킷 설정)'의 모든 퍼블릭 액세스 차단의 체크를 해제해서 비활성화해주었다.

여기까지 하고나서 객체의 각 폰트 파일 내의 '객체 URL'을 선택해보았다.
하지만 다음과 같이 'Access Denied'라는 문구가 떴다.
아직 퍼블릭 액세스가 허가되지 않은 것이다.

'Access Denied' 오류 해결

퍼블릭 액세스 차단(버킷 설정) 바로 아래에 있는 버킷 정책의 편집을 누르고 다음과 같이 입력했다. 참고 블로그

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1405592139000",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::rebuilder-font/*",
                "arn:aws:s3:::rebuilder-font"
            ]
        }
    ]
}

참고로 '새 문 추가'로 생성되는 기본 템플릿에 Resource만 추가하면 되는 게 아니라 Action도 따로 넣어줘야 하고.. 아무튼 위처럼 작성하고 Resource만 s3::: 다음에 자신의 버킷명을 넣어준다.

이제 객체 URL을 누르니 Access Denied 화면이 뜨지 않고 폰트 파일이 잘 다운로드되었다.

이제 외부에 퍼블릭하게 공개되었다는 뜻이니 global.css 최상단에('*'보다 더 위에) 다음과 같이 선언해주고 body의 font-family 맨 앞에 'Pretendard'를 주니 가장 먼저 로드된 woff2 글꼴이 잘 적용되었다.

@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-display: swap;
  src: local('Pretendard'),
    url('https://rebuilder-font.s3.ap-northeast-2.amazonaws.com/woff2-subset/Pretendard-Bold.subset.woff2')
      format('woff2'),
    url('https://rebuilder-font.s3.ap-northeast-2.amazonaws.com/woff-subset/Pretendard-Bold.subset.woff')
      format('woff'),
    url('https://rebuilder-font.s3.ap-northeast-2.amazonaws.com/otf/Pretendard-Bold.otf')
      format('opentype');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-display: swap;
  src: local('Pretendard'),
    url('https://rebuilder-font.s3.ap-northeast-2.amazonaws.com/woff2-subset/Pretendard-SemiBold.subset.woff2')
      format('woff2'),
    url('https://rebuilder-font.s3.ap-northeast-2.amazonaws.com.com/woff-subset/Pretendard-SemiBold.subset.woff')
      format('woff'),
    url('https://rebuilder-font.s3.ap-northeast-2.amazonaws.com/otf/Pretendard-SemiBold.otf')
      format('opentype');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-display: swap;
  src: local('Pretendard'),
    url('https://rebuilder-font.s3.ap-northeast-2.amazonaws.com/woff2-subset/Pretendard-Medium.subset.woff2')
      format('woff2'),
    url('https://rebuilder-font.s3.ap-northeast-2.amazonaws.com.com/woff-subset/Pretendard-Medium.subset.woff')
      format('woff'),
    url('https://rebuilder-font.s3.ap-northeast-2.amazonaws.com/otf/Pretendard-Medium.otf')
      format('opentype');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-display: swap;
  src: local('Pretendard'),
    url('https://rebuilder-font.s3.ap-northeast-2.amazonaws.com/woff2-subset/Pretendard-Regular.subset.woff2')
      format('woff2'),
    url('https://rebuilder-font.s3.ap-northeast-2.amazonaws.com.com/woff-subset/Pretendard-Regular.subset.woff')
      format('woff'),
    url('https://rebuilder-font.s3.ap-northeast-2.amazonaws.com/otf/Pretendard-Regular.otf')
      format('opentype');
}

결과

** 이 내용은 나중에 AWS S3 + CloudFront로 배포하기 직전에 로컬에 넣어두고 빌드하는 방식으로 바꾸었습니다!