Mirror WebGL

이 가이드는 사용법을 안내합니다 MirrorUnity 프로젝트용으로 Edgegap에서 헤드리스 서버를 생성하고 's Websocket Transport를 사용합니다.

이 가이드에서는 오픈 소스 샘플 프로젝트 TanksMirror 샘플의 다음 위치에서 확인할 수 있습니다, Assets/Mirror/Examples/Tanks.

이 샘플의 최종 버전은 저희의 GitHub

전송(transport) 변경

게임 서버를 빌드할 준비가 되기 전에 기본 씬에 몇 가지 변경을 먼저 해야 합니다.

• 열기 Scene.unity 다음 위치에 있습니다 Assets/Mirror/Examples/Tanks/Scenes;

• 을(를) 선택하고 씬을 열고, gameObject에서 KcpTransport 스크립트를 찾아 이 스크립트를 다음으로 교체하세요, SimpleWebTransport 다음 위치에 있습니다 Assets/Mirror/Transports/SimpleWeb또한 이 새로운 전송으로 스크립트의 Transport 필드를 업데이트했는지 확인하세요. 을(를) 선택하고 스크립트 구성요소의 Transport 필드를 이 새 전송으로 업데이트했는지 확인하세요. 또한 Auto Start Server Build 옵션도 선택되어 있는지 확인하세요.

• 사용 중인 Mirror 버전에 따라 다음을 변경/업데이트해야 할 수 있습니다, NetworkManagerHUD KCP 이외의 다른 전송과 작동하도록, 그리고 서버에 접속하기 전에 HUD에서 포트 값을 입력할 수 있도록.

네트워크 통신에 사용되는 포트(이하 [GAME PORT]라고 함)를 기록해두세요. 이 경우 사용된 포트는 7778.

옵션을 활성화해야 합니다.

컨테이너화 및 배포 과정을 용이하게 하기 위해 Edgegap Unity 플러그인의 최신 버전을 저희의 GitHub 에서 사용하여 과정을 자동화할 수 있습니다. 이 플러그인 사용 방법에 대한 자세한 내용은 저희의 문서.

원하신다면 대신 이 단계별 지침을 따를 수도 있습니다.

게임 준비가 완료되면 빌드 화면으로 이동하세요. Unity 에디터의 파일 -> 빌드 설정 상단 메뉴에서 확인할 수 있습니다. 사용 중인 Unity 버전에 따라 올바른 프리셋을 선택했는지 확인하세요.

• 2021.2 버전 이전:

  • 다음으로 설정하세요 대상 플랫폼 에서 Linux;

  • 다음으로 설정하세요 아키텍처 에서 x86_64;

  • 다음 항목을 체크하세요 서버 빌드 옵션.

• 그렇지 않은 경우:

  • 다음으로 설정하세요 플랫폼 에서 전용 서버;

  • 다음으로 설정하세요 대상 플랫폼 에서 Linux.

그런 다음 빌드 버튼을 눌러 새 빈 폴더 linux_server 을 파일 대상으로 사용하세요. 이 문서의 linux_server 폴더라고 부르겠습니다. [SERVER BUILD] 폴더를 전달하세요. 다음 Dockerfile 및 boot.sh 파일을 [SERVER BUILD] 폴더에 추가하세요:

Dockerfile

FROM ubuntu:bionic
MAINTAINER <author_detail>

ARG DEBIAN_FRONTEND=noninteractive
ARG docker_version=17.06.0-ce

RUN
    apt-get update && \
    apt-get install -y libglu1 xvfb libxcursor1 ca-certificates && \
    update-ca-certificates && \
    apt-get clean

EXPOSE 7778/TCP

COPY linux_server/  /root/linux_server/
COPY boot.sh        /boot.sh

WORKDIR /root/
ENTRYPOINT ["/bin/bash", "/boot.sh"]

boot.sh

xvfb-run --auto-servernum --server-args='-screen 0 640x480x24:32' /root/linux_server/[YOUR GAME].x86_64 -batchmode -nographics

생성된 파일의 이름으로 [YOUR GAME] 플레이스홀더를 반드시 교체하세요

그런 다음 [SERVER BUILD] 폴더에서 명령 프롬프트를 시작하세요; 다음 Docker 명령을 실행하여 빌드의 이미지를 생성하고 개인 레지스트리에 푸시합니다:

ARM CPU(Mac M1, M2 등)를 사용하는 경우, 다음 전용 페이지.

를 참조하세요.

Linux 사용 시
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

docker build . -t <IMAGE_NAME>:<IMAGE_VERSION>
# 로그인, 프롬프트가 비밀번호를 요청합니다

docker login -u '<REGISTRY_USERNAME>' <REGISTRY_URL>
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

docker image tag <IMAGE_NAME>:<IMAGE_VERSION> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_VERSION>
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_VERSION>

Linux 사용 시
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

docker build . -t <IMAGE_NAME>:<IMAGE_VERSION>
cmd 사용 시

docker login -u '<REGISTRY_USERNAME>' <REGISTRY_URL>
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

docker image tag <IMAGE_NAME>:<IMAGE_VERSION> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_VERSION>
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

docker login -u <REGISTRY_USERNAME> <REGISTRY_URL>

Linux 사용 시
docker build . -t <IMAGE_NAME>:<IMAGE_TAG>

docker build . -t <IMAGE_NAME>:<IMAGE_VERSION>
# 로그인, 프롬프트가 비밀번호를 요청합니다

docker login -u '<REGISTRY_USERNAME>' <REGISTRY_URL>
docker image tag <IMAGE_NAME>:<IMAGE_TAG> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

docker image tag <IMAGE_NAME>:<IMAGE_VERSION> <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_VERSION>
docker push <REGISTRY_URL>/<PROJECT_NAME>/<IMAGE_NAME>:<IMAGE_TAG>

서버를 Edgegap에 배포하기

Edgegap 대시보드에 로그인한 후, 웹사이트의 페이지로 이동하세요. 그런 다음 페이지로 이동하세요. 우측 상단의 새로 만들기

• 버튼을 클릭하여 애플리케이션 생성 양식으로 이동합니다. 아래는 각 필드와 올바르게 입력하는 방법입니다:

• 애플리케이션 이름: 다른 애플리케이션들 사이에서 쉽게 식별할 수 있도록 원하는 이름을 입력하세요.

• 이미지: 애플리케이션을 쉽게 식별하기 위한 특정 이미지를 지정할 수 있습니다.

• 버전 이름: 배포하는 버전의 범위를 설명하기 위해 버전 이름을 사용할 수 있습니다. 예: “demo”, “production”, “v1”, “v2”

  • 컨테이너:

  • 레지스트리: “[URL]” — 여기서 [URL]은 컨테이너 리포지토리 페이지에서 표시되는 자격증명 값입니다.

  • 이미지 리포지토리: “[PROJECT]/[YOUR GAME]” — 여기서 [PROJECT]와 [YOUR GAME]은 도커 이미지를 푸시할 때 사용한 값입니다.

  • 태그: “[TAG]” — 여기서 [TAG]는 도커 이미지를 푸시할 때 사용한 값입니다.

  • “개인 리포지토리 사용”을 체크하세요.

  • 개인 레지스트리 사용자 이름: “[USERNAME]” — 여기서 [USERNAME]은 자격증명에 있는 값입니다.

  • 개인 레지스트리 토큰: “[TOKEN]” — 여기서 [TOKEN]은 자격증명에 있는 값입니다.

  • 포트 : 다음을 클릭하세요 새 포트를 추가하려면 + 포트 추가

    • 7778 - WS - TLS 업그레이드 사용 (베타)

WSS 옵션을 사용하는 경우 TLS 업그레이드 옵션을 반드시 활성화해야 합니다. 그렇지 않으면 Edgegap 대시보드의 컨테이너 로그에서 이와 유사한 오류가 발생할 수 있습니다.

클라이언트의 처음 바이트가 핸드셰이크용 'GET'이 아니었습니다, 대신 16-03-01이었습니다

3389 - TCP - 검증 비활성화 Deploy 게임 서버 배포를 진행하려면 버튼을 클릭하세요. 배포의 최신 상태가 최신 상태는 다음으로 설정되어야 합니다가 되면 게임의 클라이언트 버전으로 서버에 접속할 수 있습니다. 다음을 기록해두세요, 를 배포의 URL과 배포의 포트 매핑 탭에 있는 외부 포트 공개적으로 사용 가능한 포트입니다.

WS

클라이언트 테스트

Unity 에디터의 탱크 씬으로 돌아가서, 을(를) 선택하고 게임오브젝트를 선택하고 다음 설정을 변경하세요:

• 의 구성요소:

  • 다음을 설정하십시오: 다음의 값을 설정하세요: 서버 배포의 를 배포의 URL로;

  • 체크 해제하세요 Auto Start Server Build 옵션.

• Simple Web Transport 구성요소:

  • 다음을 설정하십시오: 클라이언트 애플리케이션에 샘플 HUD 추가하기 값을 Edgegap 배포의 외부 포트 예: 32821;

  • 다음이 활성화되어 있는지 확인하세요. Client Use WSS 옵션이 활성화되어 있습니다.

Game Port 로 지정하므로 스크립트를 업데이트해야 합니다. 그렇지 않으면 게임이 작동하지 않습니다. 에디터에서, 그런 다음 클라이언트 버튼을 클릭하세요; 잠시 후 서버에 연결되어 게임을 플레이할 수 있게 됩니다.

또한 앱 버전의

게임 클라이언트를 Itch에 올리려면 클라이언트 빌드를 만들어야 합니다; 이를 위해 Unity 버전에 맞는 WebGL Build Support 모듈을 설치해야 합니다. 완료되면 다시 빌드 화면으로 이동하세요. Unity 에디터의 파일 -> 빌드 설정로 이동하여 다음 옵션들을 선택하세요:

• 다음으로 설정하세요 플랫폼 에서 스크립트의 이름과 같지 않을 수 있습니다. 두 이름이 이 경우처럼 동일한지 확인한 후 다시 시도하세요.;

• Itch.io에서 에디터에서 게임 클라이언트가 작동하는 것을 확인했다면 Itch.io에서도 작동해야 합니다. 거기에 게임을 업로드하려면에서 클라이언트 빌드를 만들어야 합니다. 다음 옵션들을 선택하세요:WebGL 을(를) 선택하세요. 에서 다음 Player Settings 을(를) 여세요. Player -> Publishing Settings

그런 다음 빌드 버튼을 눌러 새 빈 폴더 에서 을 파일 대상으로 사용하세요. 이 문서의 에서 폴더라고 부르겠습니다. [CLIENT BUILD] 폴더라고 합니다.

게임 빌드가 완료되면 이 에서 폴더의 파일들을 루트에 오도록 압축(zip)하세요. 그런 다음 이 zip 파일을 Itch 프로젝트에 업로드하고 브라우저에서 재생되는 파일 옵션을 선택하면 됩니다. 게임을 실행한 후에는 HUD에서 네트워크 주소와 포트 값이 올바르게 설정되어 있는지 확인한 다음, 클라이언트 버튼을 클릭하여 플레이하세요.

클라이언트를 Edgegap에 호스팅하기

게임 클라이언트를 Edgegap에 호스팅할 수도 있습니다! 그렇게 하려면 다음을 추가하세요, Dockerfile 및 nginx.conf 파일을 [CLIENT BUILD] 폴더에 추가하세요:

Dockerfile

FROM nginx:alpine
MAINTAINER <author_detail>

COPY build/ /usr/share/nginx/html
copy nginx.conf /etc/nginx/

nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
worker_connections  1024;
}


http {
include       /etc/nginx/mime.types;
default_type  application/octet-stream;

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';

access_log  /var/log/nginx/access.log  main;

sendfile        on;
#tcp_nopush     on;

keepalive_timeout  65;

#gzip  on;

include /etc/nginx/conf.d/*.conf;

server {
# 다음 구성을 http 서버 설정 내에 추가하세요
# ...

    # 디스크에 미리 Brotli 압축된 데이터 파일은 압축이 활성화된 상태로 제공되어야 합니다:
    location ~ .+\.(data|symbols\.json)\.br$ {
        # 이 파일은 이미 디스크에서 미리 압축되어 있으므로, 온디맨드 압축을 비활성화합니다.
        # 그렇지 않으면 nginx가 이중 압축을 시도할 수 있습니다.
        gzip off;
        add_header Content-Encoding br;
        default_type application/octet-stream;
    }

    # 디스크에 미리 Brotli 압축된 JavaScript 코드 파일:
    location ~ .+\.js\.br$ {
        gzip off; # 이미 압축된 파일에 대해 동적 gzip 압축을 시도하지 마세요
        add_header Content-Encoding br;
        default_type application/javascript;
    }

    # 디스크에 미리 Brotli 압축된 WebAssembly 파일:
    location ~ .+\.wasm\.br$ {
        gzip off; # 이미 압축된 파일에 대해 동적 gzip 압축을 시도하지 마세요
        add_header Content-Encoding br;
        # Wasm 파일에 대해 올바른 MIME 타입을 지정하여 스트리밍 WebAssembly 컴파일을 활성화하세요.
        # Wasm 파일용입니다.
        default_type application/wasm;
    }

    # 디스크에 미리 gzip 압축된 데이터 파일은 압축이 활성화된 상태로 제공되어야 합니다:
    location ~ .+\.(data|symbols\.json)\.gz$ {
        gzip off; # 이미 압축된 파일에 대해 동적 gzip 압축을 시도하지 마세요
        add_header Content-Encoding gzip;
        default_type application/octet-stream;
    }

    # 디스크에 미리 gzip 압축된 JavaScript 코드 파일:
    location ~ .+\.js\.gz$ {
        gzip off; # 이미 압축된 파일에 대해 동적 gzip 압축을 시도하지 마세요
        add_header Content-Encoding gzip;
        default_type application/javascript;
    }

    # 디스크에 미리 gzip 압축된 WebAssembly 파일:
    location ~ .+\.wasm\.gz$ {
        gzip off; # 이미 압축된 파일에 대해 동적 gzip 압축을 시도하지 마세요
        add_header Content-Encoding gzip;
        # Wasm 파일에 대해 올바른 MIME 타입을 지정하여 스트리밍 WebAssembly 컴파일을 활성화하세요.
        # Wasm 파일용입니다.
        default_type application/wasm;
    }
}
}

이전에 했던 와 동일한 Docker 명령을 진행하세요 게임 클라이언트의 이미지도 빌드하고 개인 저장소에 푸시하되, 명령 창을 [CLIENT BUILD] 폴더에서 연 상태로 진행하세요. 서버용 이미지 이름과 다른 이미지 이름을 사용해야 합니다.

그런 다음 Edgegap 대시보드에서 클라이언트용 새 애플리케이션을 다음 설정으로 생성하세요:

• 버튼을 클릭하여 애플리케이션 생성 양식으로 이동합니다. 아래는 각 필드와 올바르게 입력하는 방법입니다:

• 애플리케이션 이름: 다른 애플리케이션들 사이에서 쉽게 식별할 수 있도록 원하는 이름을 입력하세요.

• 이미지: 애플리케이션을 쉽게 식별하기 위한 특정 이미지를 지정할 수 있습니다.

• 버전 이름: 배포하는 버전의 범위를 설명하기 위해 버전 이름을 사용할 수 있습니다. 예: “demo”, “production”, “v1”, “v2”

  • 컨테이너:

  • 레지스트리: “[URL]” — 여기서 [URL]은 컨테이너 리포지토리 페이지에서 표시되는 자격증명 값입니다.

  • 이미지 리포지토리: “[PROJECT]/[YOUR GAME]” — 여기서 [PROJECT]와 [YOUR GAME]은 도커 이미지를 푸시할 때 사용한 값입니다.

  • 태그: “[TAG]” — 여기서 [TAG]는 도커 이미지를 푸시할 때 사용한 값입니다.

  • “개인 리포지토리 사용”을 체크하세요.

  • 개인 레지스트리 사용자 이름: “[USERNAME]” — 여기서 [USERNAME]은 자격증명에 있는 값입니다.

  • 개인 레지스트리 토큰: “[TOKEN]” — 여기서 [TOKEN]은 자격증명에 있는 값입니다.

  • 포트 : 다음을 클릭하세요 새 포트를 추가하려면 + 포트 추가

    • 80 - HTTPS

3389 - TCP - 검증 비활성화 Deploy 버튼을 클릭하여 게임 클라이언트 배포를 진행하세요. 서버와 클라이언트 배포가 모두 최신 상태는 다음으로 설정되어야 합니다로 설정되면, 클라이언트의 를 배포의 URL을 지정된 외부 포트 에서 브라우저로 열면 HUD에 올바른 값을 설정한 후 게임을 플레이할 수 있습니다!

Mirror 통합 및 웹소켓에 대해 더 많은 정보가 필요하면, 그들의 문서를 참조할 수 있습니다 문서.