CSS 디자인 15.7k 0

쉽게 이야기하면 깃헙은 파일 호스팅 목적으로 링크를 제공하는 게 아니기 때문에 파일을 따로 업로드해서 모든 사람이 링크로 볼 수 있도록 설정해야 합니다.

아래에 있는 이야기는 브라우저와 HTTP 프로토콜에 대한 기본 지식없이 이해하기 힘들 수 있습니다.

1. 오류 원인

깃헙에서 그냥 https://raw.githubusercontent.com/~~~/main.css 이런식으로 @import 하는 경우 Cross-Origin Read Blocking (CORB) 오류가 발생하는데 이건 깃랩도 똑같은 에러가 발생합니다. 구글링 해보니 리포지토리에 있는 파일들을 호스팅 목적(여기선 @import)으로 사용하려면 따로 설정을 해줘야 되더라구요.

2. 해결 방법

그래서 저는 S3에 css 파일을 업로드하고 referer를 tgd.kr/*로 제한하는 방식으로 버킷 정책을 설정하는 방식으로 해결했습니다. 혹시 저처럼 s3에 업로드하실 분들은 아래 순서로 설정을 해주시면 될 것 같습니다.

  1) s3 버킷 생성

  2) 버킷의 모든 액세스 퍼블릭 차단 해제

  3) 버킷 정책 추가

  4) 다시 퍼블릭 액세스 차단 편집에 들어가서 버킷 정책으로 액세스 관리에 체크

왜 그런지는 모르겠는데 모든 퍼블릭 액세스 차단 편집에서 세 번째꺼가 활성화된 상태로는 버킷 정책 편집이 안 되더라구요... 그래서 귀찮지만 순서를 바꿔줘야 해요.

3. 추가사항

이 에러가 왜 나는지 궁금하면 CORB, X-Content-Type-Options: nosniff에 대해 더 알아보시면 좋을 거 같아요