느린 개발자

 

Unity WebGL 프로젝트 파일을 웹 브라우저에서 실행하면서 성능을 최대한 내기 위해 배포된 서버에서 Brotli 설정하는 

방법을 소개합니다. 그러나 이러한 압축방식으로 최적화를 하고싶지 않다면 유니티에서 빌드할 때 gzip으로 설정하면 됩니다.

 

● 이전 포스팅에서  Unity WebGL 프로젝트를 웹 브라우저(Nuxt)에서 실행하는 방법을 참고하시고 진행하시면 됩니다.

느린 개발자

---

 

Brotli 이란?

Brotli 압축 방식은 Gzip 보다 나은 압축률을 제공하는 손실 없는 압축 알고리즘입니다.  그러나 아직 모든 웹 서버나 

모든 브라우저에서 지원 되는 것은 아니기 때문에 호환성 체크가 필요합니다. 보통 IE에서는 gzip을 사용해야 합니다.

 

 

참고문서

WebGL: 압축 빌드 및 서버 설정 - Unity 매뉴얼

 

 

Ubuntu 서버 Nginx Brotli 모듈 설치

Unity webGL 프로젝트가 배포된 서버에서 모듈을 설치합니다. 

sudo apt-add-repository -y ppa:hda-me/nginx-stable
sudo apt-get install brotli nginx-module-brotli

// 설치 에러시
sudo apt-get install dpkg-dev build-essential gnupg2 git gcc cmake libpcre3 libpcre3-dev zlib1g zlib1g-
dev openssl libssl-dev curl unzip -y

 

nginx.conf 설정

• nginx가 기본적으로 설치되어있고, 배포가 되었다는 상태에서 진행합니다. (nginx 배포는 추후에 다룰예정)

vi etc/nginx/nginx.conf로 conf 파일을 열어서 작성합니다.

/etc/nginx/nginx.conf

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

http {

# ...
        # Gzip 설정
        gzip on;
        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        # Brotli 설정
        brotli on;
        brotli_static on;
        brotli_comp_level 6;
        brotli_types text/xml image/svg+xml application/x-font-ttf image/vnd.microsoft.icon application/x-font-opentype application/json font/eot application/vnd.ms-fontobject application/javascript font/otf application/xml application/xhtml+xml text/javascript  application/x-javascript text/plain application/x-font-truetype application/xml+rss image/x-icon font/opentype text/css image/x-win-bitmap;

 

 

배포 사이트에 대한 conf 파일 설정

• 사이트에 대한 nginx 설정 파일을 열어서 설정합니다.
• Nuxt 프로젝트 포트 3000으로 proxy 설정이 되어있고 나머지 brotli에 대한 설정입니다.

sudo vi /etc/nginx/sites-available/testSite.com

/etc/nginx/sites-available/testSite.com

server {
        listen 80;
        listen [::]:80;
        server_name testSite.com;

        location / {
                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
        }

        # On-disk Brotli-precompressed data files should be served with compression enabled:
        location ~ .+\.(data|symbols\.json)\.br$ {
            # Because this file is already pre-compressed on disk, disable the on-demand compression on it.
            # Otherwise nginx would attempt double compression.
            gzip off;
            add_header Content-Encoding br;
            add_header Content-Type application/octet-stream;
            #default_type application/octet-stream;


                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
        }

        # On-disk Brotli-precompressed JavaScript code files:
        location ~ .+\.js\.br$ {
            gzip off; # Do not attempt dynamic gzip compression on an already compressed file
            add_header Content-Encoding br;
            add_header Content-Type application/javascript;
            #default_type application/javascript;

                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
        }

        # On-disk Brotli-precompressed WebAssembly files:
        location ~ .+\.wasm\.br$ {
            gzip off; # Do not attempt dynamic gzip compression on an already compressed file
            add_header Content-Encoding br;
            # Enable streaming WebAssembly compilation by specifying the correct MIME type for
            # Wasm files.

            add_header Content-Type application/wasm;
            #default_type application/wasm;

                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
        }


        # On-disk gzip-precompressed data files should be served with compression enabled:
        location ~ .+\.(data|symbols\.json)\.gz$ {
            gzip off; # Do not attempt dynamic gzip compression on an already compressed file
            add_header Content-Encoding gzip;
            add_header Content-Type application/gzip;
            #default_type application/gzip;


                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
            }

        # On-disk gzip-precompressed JavaScript code files:
        location ~ .+\.js\.gz$ {
            gzip off; # Do not attempt dynamic gzip compression on an already compressed file
            add_header Content-Encoding gzip; # The correct MIME type here would be application/octet-stream, but due to Safari bug https://bugs.webkit.org/show_bug.cgi?id=247421, it's preferable to use MIME Type application/gzip instead.

            add_header Content-Type application/javascript;
            #default_type application/javascript;

                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
        }

        # On-disk gzip-precompressed WebAssembly files:
        location ~ .+\.wasm\.gz$ {
            gzip off; # Do not attempt dynamic gzip compression on an already compressed file
            add_header Content-Encoding gzip;
            # Enable streaming WebAssembly compilation by specifying the correct MIME type for
            # Wasm files.

            add_header Content-Type application/wasm;
            #default_type application/wasm;

                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
        }

}

 

 

참고 문서)

WebGL: 서버 설정 코드 샘플 - Unity 매뉴얼