> For the complete documentation index, see [llms.txt](https://docs.edgegap.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.edgegap.com/ko/docs/sample-projects/unity-netcodes/fishnet-on-edgegap-webgl.md).

# 피시넷 WebGL

이 가이드는 다음을 사용하는 데 도움을 줄 것입니다 [FishNet](https://github.com/FirstGearGames/FishNet)의 웹소켓 전송, [Bayou](https://fish-networking.gitbook.io/docs/manual/components/transports/bayou)를 사용하고, Unity 프로젝트를 위한 Edgegap 헤드리스 서버를 만드는 방법을 안내합니다.

최종 샘플 프로젝트는 저희 [GitHub](https://github.com/edgegap/netcode-sample-unity-fishnet)의 `Fishnet_v4.1.6R_WebGL` 폴더에서 찾을 수 있습니다. 이 가이드는 Bayou의 적절한 버전만 사용한다면 Fishnet의 어떤 버전에서도 동작해야 합니다.

{% hint style="info" %}
FishNet 버전 4.1.6R에는 Edgegap 플러그인이 포함되어 있으므로, Dockerfile을 사용해 수동으로 처리할 수 있더라도 이를 사용해 게임 서버를 자동으로 빌드하고 컨테이너화하겠습니다.

플러그인에 대한 자세한 내용은 문서를 [여기에서](broken://pages/749f54d5ea9e89689928f4eb24c21ad8c20d25df).

참고하세요. 제대로 동작하려면 Docker가 실행 중이어야 합니다.
{% endhint %}

### Unity 요구 사항

이 프로젝트는 Unity 버전 `2021.3.16f1`에서 테스트되었습니다. 다음 모듈이 설치되어 있어야 합니다:

* WebGL 빌드 지원;
* Linux 전용 서버 빌드 지원;
* Linux 빌드 지원(IL2CPP).

### 전송 방식을 전환합니다

Bayou용 Unity 패키지는 [이 GitHub](https://github.com/FirstGearGames/Bayou/releases)에서 다운로드하세요. 게임 프로젝트에서 툴바의 `Asset/Import Package/Custom Package...`.

를 통해 패키지를 가져옵니다. `MainMenu` 다음 위치에 있는 씬을 여세요 `Assets/SpaceEdge/Scenes`. `NetworkManager` gameObject에서 `Tugboat` 전송 컴포넌트를 제거합니다. 이를 다음으로 바꾸세요 `Bayou` 전송을, 다음 위치에 있는 `Asstes/FishNet/Plugins/Bayou`. 설정된 포트 값을 확인해 두세요. 이 경우 `7770`.

다음을 활성화해야 합니다 `헤드리스에서 시작` 옵션을 서버 빌드에 대해.

<figure><img src="https://1562312210-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-594181325c3fba9f457c57865daad12b3acc32d3%2Fnetwork-manager-setup.png?alt=media" alt=""><figcaption></figcaption></figure>

### 게임 서버 빌드 및 컨테이너화

다음 경로의 Edgegap 플러그인을 여세요 `Tools/Edgegap Hosting` 툴바 메뉴에서 확인하세요. 다음을 검증하세요 `Edgegap API 토큰` 그리고 게임용 애플리케이션을 생성하거나 불러오세요. 다음을 확인하세요 `포트` 값이 Bayou 전송의 값과 일치해야 합니다. 다음을 선택하세요 `WS` 프로토콜을 선택한 뒤 `새 버전 태그`.

모든 설정이 제대로 완료되면 `빌드 및 푸시`를 클릭하세요. 그러면 잠시 후 게임 서버가 자동으로 컨테이너화되고 Edgegap 대시보드에 새 애플리케이션 버전이 생성됩니다.

### 클라이언트 테스트

#### 에디터에서

프로젝트로 돌아가서 다음을 선택하세요 `MatchmakingSystem` gameObject를 열고 다음 필드를 변경하세요:

<figure><img src="https://1562312210-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-7e7c88646513c68ea7dd68ba7aba1a40aa1b09d1%2Ffishnet-matchmaking-system.png?alt=media" alt=""><figcaption></figcaption></figure>

* AppName: Edgegap 플러그인에서 사용한 “애플리케이션 이름”으로 설정합니다.
* AppVersion: Edgegap 플러그인에서 사용한 “버전 이름”으로 설정합니다.
* AuthHeaderValue: Edgegap 플러그인에서 사용한 Edgegap API 토큰으로 설정합니다.

{% hint style="info" %}
다음을 제거하세요 `token` 단어를 API 토큰에서 제거하세요. 우리는 이를 `Awake()` 메서드 중 인증 헤더 스키마로 설정하고 있기 때문입니다. `MatchmakingSystem`.
{% endhint %}

를 통해 패키지를 가져옵니다. `MatchmakingSystem` 스크립트는 다음 위치에 있습니다 `Assets/SpaceEdge/Scripts/Systems`, 여기에서 같은 값들을 업데이트할 수도 있습니다. 다음을 검색하세요 `"UDP_PORT"` 를 `"Game Port"`.

{% hint style="info" %}
이 샘플의 이전 버전은 Edgegap 대시보드를 통해 애플리케이션을 수동으로 생성했으며, 이름 `UDP_PORT` 가 서버가 사용하는 포트 이름으로 사용되었습니다.

Edgegap 플러그인은 대신 포트 이름을 자동으로 `Game Port` 로 지정하므로, 스크립트를 반드시 업데이트해야 합니다. 그렇지 않으면 게임이 작동하지 않습니다.
{% endhint %}

<figure><img src="https://1562312210-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-2a6ddd5037990eccf3c62943a9f6cc610ff175e8%2Ffishnet-code.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1562312210-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-7a1523917e1509cab8490108ed7a98b44ae5423e%2Fport-name.png?alt=media" alt=""><figcaption></figcaption></figure>

다음 옵션의 선택을 해제했는지 확인하세요 `헤드리스에서 시작` 옵션을 `NetworkManager` gameObject에서도 해제하세요. 이제 클라이언트 연동을 테스트하려는 단계이기 때문입니다.

이 작업이 끝나면 `재생` 을 에디터에서 누른 다음 텍스트 상자에 이름을 입력하고 다음을 클릭하세요 `게임 시작`. 게임은 사용 가능한 서버를 찾거나, 없으면 자동으로 배포한 뒤 연결합니다.

{% hint style="warning" %}
클라이언트 쪽에 `연결 실패` 오류가 있다면, 다음 `헤드리스에서 시작` 옵션이 `서버 빌드`에서 활성화되지 않았기 때문일 수 있습니다. 이 경우 서버가 제대로 시작되지 않아 배포가 연결을 수락할 수 있는 상태가 아닙니다. 새 컨테이너 이미지와 앱 버전을 생성한 뒤 다시 시도하기 전에 해당 옵션이 활성화되어 있는지 확인하세요.

또는 앱 버전의 `포트 이름` 이 스크립트의 것과 같지 않기 때문일 수도 있습니다. `MatchmakingSystem` 두 이름이 모두 같은지 확인하세요. 이 경우 `"Game Port"`입니다. 그런 다음 다시 시도하세요.
{% endhint %}

#### Itch.io에서

에디터에서 게임 클라이언트가 작동함을 확인했다면 Itch.io에서도 작동해야 합니다. 거기에 게임을 업로드하려면 다음의 `빌드` 화면에서 Unity Editor의 `File -> Build Settings`아래에서 클라이언트 빌드를 만들어야 합니다. 다음 옵션을 선택하세요:

* 설정 `플랫폼을` 에서 `WebGL`;
* 열고 `Player Settings`를 여세요. `Player -> Publishing Settings`아래에서 다음을 설정하세요 `압축 형식` 에서 `Gzip` 으로 하고 다음이 선택되어 있는지 확인하세요 `Decompression Fallback` 옵션. 이 설정을 저장하고 창을 닫으세요.

<figure><img src="https://1562312210-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-d31291cf36a863193c24a856718a791db0c61577%2Fbuild-settings.png?alt=media" alt=""><figcaption></figcaption></figure>

그런 다음 빌드를 누르고 다음 이름의 새 빈 폴더를 선택하세요 `build` 를 파일 대상 위치로 지정합니다. 이 `build` 폴더의 파일들을 zip 폴더로 압축하되, 그 파일들이 루트에 있도록 하세요. 그런 다음 zip 폴더를 Itch 프로젝트에 업로드하고, 브라우저에서 파일이 실행되도록 하는 옵션을 선택하면 됩니다. 그러면 게임은 에디터에서와 동일하게 작동해야 합니다.