깃허브 데스크탑 - 유니티 WebGL을 React에 배포하기

깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기)

 

Git / GitHub 전체 링크

Unity 전체 링크

리액트 전체 링크

 

참고 

- gh-pages로 HTML 배포하기

- gh-pages로 유니티 WebGL 배포하기

- gh-pages로 리액트 프로젝트 배포하기

- 유니티 WebGL + React 라우터 적용하기

 

gh-pages로 리액트 프로젝트 배포하기를 참고하여 리액트 프로젝트까지 배포하자.

 

배포가 완료되었다면 react-unity-webgl을 설치한다.(https://www.npmjs.com/package/react-unity-webgl)

npm install react-unity-webgl

 

유니티 빌드된 파일(Compression Format - Diabled)에서 Build 폴더에 있는 파일을 모두 복사한다.

 

그리고 리액트 프로젝트의 public 폴더 아래 build 폴더를 만든 후, 붙여넣기를 한다.

 

그리고 App.js를 아래와 같이 수정한다.

(App-header 바로 아래에 <Unity unityProvider={unityProvider} />)

import logo from "./logo.svg";
import "./App.css";

import { Unity, useUnityContext } from "react-unity-webgl";

function App() {
  const { unityProvider } = useUnityContext({
    loaderUrl: "build/html-hosting.loader.js",
    dataUrl: "build/html-hosting.data",
    frameworkUrl: "build/html-hosting.framework.js",
    codeUrl: "build/html-hosting.wasm",
  });

  return (
    <div className="App">
      <header className="App-header">
        <Unity unityProvider={unityProvider} />
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

이대로 배포하면 제대로 적용이 되지만, local에서는 에러가 발생한다.

(Uncaught SyntaxError: Unexpected token '<')

 

현재 gh-pages에서 homepage를 다음과 같이 설정하였다.

"homepage": "https://bloodstrawberry.github.io/react-unity"

 

따라서 경로를 unityProvider 변수의 경로에 프로젝트 이름을 추가해야 한다. (github에 배포할 때는 지워야 한다.)

  const { unityProvider } = useUnityContext({
    loaderUrl: "react-unity/build/html-hosting.loader.js",
    dataUrl: "react-unity/build/html-hosting.data",
    frameworkUrl: "react-unity/build/html-hosting.framework.js",
    codeUrl: "react-unity/build/html-hosting.wasm",
  });

 

위와 같이 설정하였다면 로컬에서도 확인할 수 있다.

 

게임 화면이 작지만, style을 추가하면 원하는 크기로 조절할 수 있다.

<Unity unityProvider={unityProvider} style={{width:"750px", height:"500px"}}/>;

 

불필요한 파일이나 css 등은 지우고 아래와 같이 App.js를 수정하자.

import { Unity, useUnityContext } from "react-unity-webgl";

function App() {
  // const { unityProvider } = useUnityContext({
  //   loaderUrl: "react-unity/build/html-hosting.loader.js",
  //   dataUrl: "react-unity/build/html-hosting.data",
  //   frameworkUrl: "react-unity/build/html-hosting.framework.js",
  //   codeUrl: "react-unity/build/html-hosting.wasm",
  // });

  const { unityProvider } = useUnityContext({
    loaderUrl: "build/html-hosting.loader.js",
    dataUrl: "build/html-hosting.data",
    frameworkUrl: "build/html-hosting.framework.js",
    codeUrl: "build/html-hosting.wasm",
  });

  return (
    <div className="App">
      <header className="App-header">
        <h1>React / Unity Test</h1>
        <Unity
          unityProvider={unityProvider}
          style={{ width: "750px", height: "500px" }}
        />
      </header>
    </div>
  );
}

export default App;

 

리액트 gh-pages를 배포하기 위해 npm run deploy를 실행한다.

D:\github\react-unity> npm run deploy

 

Published가 확인되었다면 배포된 링크로 이동해보자.

PS D:\github\react-unity> npm run deploy

> react-unity@0.1.0 predeploy
> npm run build

...

> react-unity@0.1.0 deploy
> gh-pages -d build

Published

 

HTML 배포와 마찬가지로 게임이 정상적으로 실행되는 것을 확인할 수 있다.