[Debugging] Unity WebGL Brotli compression 사용시 발생하는 403 Forbidden 해결 방법

/// <summary>

/// 403 Forbidden 해결 방법

/// @author         : Incentive Code

/// @last update  : 2023. 02. 25

/// @version        : 1.0

/// @update

///     [2023. 02. 25] v1.0 - 최초 작성. 

///        /Build/ 아래에 있는 파일들의 접근 권한을 확인 후, 읽기 권한을 부여.

/// </summary>


요즘은 회사에서 Unity Engine 으로 개발을 하고 있습니다. 주로 메타버스 오피스를 구현하는 일을 진행하고 있습니다. 메인 타겟 플랫폼은 WebGL 입니다.

어디서든 가볍게 웹 브라우저만 있으면 접속해서 업무를 보고, 팀원들과 소통을 할 수 있도록 하는 것이 목표였기에... 나름 적당한 선택이었다고 생각합니다.


하지만 개발 기간이 늘어나고, 기능이 붙으면 붙을수록, 디자이너의 결과물이 계속해서 쌓일수록 프로그램은 무거워졌습니다. Asset Bundle 을 사용해도 보고, Addressable Assets 을 사용해도 봤지만... 여전히 무겁게만 느껴졌습니다.

그래서 시스템 최적화를 진행하기로 했습니다.

최적화와 관련된 정보를 검색하다가 Unity Asset store 에서 WebGL Optimizer 라는 것을 발견하고 프로젝트에 import 했습니다. 

이렇게 생겼습니다.

혹시 필요하신 분이 계실수도 있으니 링크를 남겨두겠습니다.

[ Unity Asset store / WebGL Optimizer ]


WebGL Optimizer 는 실행되자 마자 Brotli compress 를 사용하라고 조언을 했습니다.

FAIL.. 바로 수정을 하려면, 우측에 있는 Fix 버튼을 눌러주면 됩니다.

기존에는 별도의 Gzip, Brotli 옵션을 사용하지 않았기에 추가 작업을 할 것이 없었습니다.

하지만 Brotli compression 을 사용하기 위해서는 웹서버 쪽에 작업을 추가로 해주어야 합니다. 이 항목은 Unity document 를 참고하셔서 각자의 환경에 맞게 설정하시기 바랍니다. 아래에 링크를 추가해 두었습니다.

[ WebGL 프로젝트 빌드 및 배포 / 서버 설정 코드 샘플 ]


웹서버 설정이 끝났다면 프로젝트를 빌드해봅니다.

WebGL Optimizer 가 권장하는 대로 설정한 상태의 Build Settings 입니다.

Unity Document 에 따르면 Brotli compression 는 최고의 압축 비율을 자랑한다고 합니다. 그 때문인지 빌드 시간은 다른 옵션들에 비해 조금 더 깁니다. 프로젝트가 크다면 많은 인내심이 필요할 것 같습니다.


Build 가 끝나면 설정해 둔 웹서버에 결과물들을 올려놓고 실행해 봅니다.

저는 Mac OS 의 로컬 웹서버에서 테스트를 진행했기 때문에, 웹 브라우저를 실행시키고 http://localhost 를 입력하고 결과를 확인했습니다. 그리고 여기에서 문제의 403 Forbidden 을 마주치게 되었습니다.

Disabled 나 Gzip 옵션으로 Build 할 때는 이런 오류 안 나왔었는데...

권한이 없다고 하니, 파일들의 상태를 확인해 봅니다.

왜인지 알 수는 없지만 정말 권한이 없습니다. 소유주에 한해서만 읽고 쓰기 권한이 열려 있습니다.

권한이 없기 때문에 발생하는 403 Forbidden

chmod 명령어를 사용해서 그룹 사용자와 외부 사용자에게 읽기 권한을 부여해 주겠습니다.


이제는 외부 사용자도 파일을 읽을 수 있게 되었습니다.

그리고 다시 웹 브라우저에서 결과를 확인해보니... 네, 이제는 정상적으로 화면이 출력됩니다.


개발을 하다보면, 알고 보면 정말 별 것 아닌 문제인데 몰라서 헤맬 때가 종종 있습니다.

네, 그게 오늘이었습니다.

파일 권한을 확인했다면 금방 끝났을 문제를 Unity Engine 설정 쪽과 document 찾는다고 제법 긴 시간을 소모했습니다. 

저와 같은 문제를 직면한 분들에게 이 글이 조금이나마 도움이 되었기를 바랍니다.

긴 글 읽어주셔서 감사합니다.


긴 글이 불편한 분들을 위한 3줄 요약

/// <summary>

/// 1. WebGL 을 메인 타겟으로 정하고 개발하고 있다면,  WebGL Optimizer 같은 툴을 사용해보자.

/// 2. Brotli compression 을 사용하는데 403 Forbidden 오류가 발생한다면, 파일 권한을 확인해보자.

/// 3. chmod 644 로 읽기 권한을 부여해주면 403 Forbidden 오류가 해결된다.

/// </summary>



Incentive Code

여전히. 예술하는 프로그래머, 코딩하는 예술가

댓글 쓰기

다음 이전