Unity作品をWebGLで書き出しRailsを使ってherokuにデプロイする

Unityの作品を全世界に向けて公開したい！という人へ
私の備忘録をかねて、参考になればと思います。

ruby 2.5.1 （途中で2.6.3に上げます）
rails 5.2.3

# Railsの準備
手前味噌ですが、[RailsにPostgreを導入する](https://qiita.com/krile136/items/24a16cd9d598e75ecc01#%E3%81%93%E3%81%93%E3%81%8B%E3%82%89rails)でRailsのいつものYay!が見れるところまで進めてください。

## コントローラーの作成
```
アプリのディレクトリにいるか確認する
$ pwd

gameコントローラーを作成する
$ rails g controller games
```
app/controllers/games_controller.rb を開き、以下のように編集

```
class GamesController < ApplicationController
  def index
  end
end
```
## hamlのインストール
これは私の趣味ですが、erbよりhamlが好きなので入れます。

```
gemfileの一番下に
 gem 'haml-rails'
を追加

haml-railsのインストール
$ bundle install

erbをhamlに変換
$ rails haml:erb2haml

最後に
Would you like to delete the original .erb files? (This is not recommended unless you are under version control.) (y/n)
と聞かれるので、yを入力して完了

```

## ビューの作成
```
app/views/games/　に新しいファイルを作成
ファイル名は "index.html.haml"

index.html.hamlを開き、１行目に
hello world
を書いておく。(""とかで囲う必要無し）
```

## ルーティングの作成

config/routes.rb を開いて、以下のように編集

```
Rails.application.routes.draw do
  resources :games
  root 'games#index'
end
```
indexしか使わないのでほんとはresourcesの後にindexつけたほうが良いと思う。（面倒くさがり）

## hello worldが見れるかチェックする
```
ターミナルに戻り、
$ rails s
```
ローカルホストにアクセスして、hello worldが見れるかチェックする。
http://localhost:3000/

## ここまでOKならgitに登録する
```
$ git init
$ git -A
$ git commit -m "first commit"
```

## 必要なgemのインストール
Gemfile を開き、以下のように編集

```
group :development, :test do
の中に
  gem 'sqlite3'
を追加する
他にbyebugとか入っているが、触らないこと。
```
また、本番環境用の記述も追加する。中身は空っぽでOK
Gemfileの中の適当な場所に追加する。

```
group :production do

end
```
bundle installを忘れないように

```
$ bundle install
```

## rubyのアップデート
ここまでで、UnityのWebGLファイルを適切な場所におけば動きます。
が、rubyのバージョンが低いためエラーが出るのでアップデートします。
すでに2.6.3以上の方は必要ない、かも？
参考：https://qiita.com/hellhellmymy/items/a32f53ba38f843a8f916

```
$ brew update && brew upgrade ruby-build
$ rbenv install 2.6.3
$ rbenv local 2.6.3
$ gem install bundler -v 2.0.2
$ rm Gemfile.lock

Gemfileを開き、
 ruby '2.5.1' 
を
 ruby '2.6.3'
に変更する。

$ bundle install

gitに登録しておく　(コミットメッセージは自分がわかればなんでも良いです）
$ git -A
$ git commit -m "update ruby"
```

これでRails側の準備は整いました。

# herokuの準備

## herokuへの登録
herokuを検索して、サクッと登録してしまいましょう。

## herokuのインストール
```
brewを使ってインストール
$ brew tap heroku/brew && brew install heroku

インストールできたか確認する
$ heroku --version
heroku/7.30.0 darwin-x64 node-v11.14.0

herokuへログイン
$ heroku login
なんでも良いのでキーを押すとブラウザでログイン画面が出るのでログインする
ログインに成功すると、ターミナルでもログイン成功が報告される

herokuのURLにもなる名前をつける
$ heroku create <好きな名前>
```
これでherokuの準備ができました。

## UnityのWebGL書き出し
作成したUnityプロジェクトを開き
File → Build Setting
<img width="689" alt="Build_Settings.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489761/54b35c52-7aac-00f3-1a8e-07b47e0d1667.png">
1.左からWebGLを選択
2.swith platformをクリック
（画像ではBuildになってますが、初期はswitch ~になってます）
3.Build And Runをクリック
出力先は、あとで移動するのでデスクトップにでもおいてください。

## コーヒーブレイク
ここまでお疲れ様です。
WebGLの書き出しはかなり時間がかかるのでコーヒーでも飲みながら休憩しましょう。

## WebGLファイルをRailsへ
参考：https://qiita.com/kanatano_mirai/items/10ffeeca3e0d49db0caa
参考：https://osouonna.hatenablog.jp/entry/2018/09/29/172951
出力先には、以下の３つのファイルがあると思います

```
index.html
Builderファイル
TemplateDataファイル
```
これらを移動します。

```
index.html
 → public の中へ移動

Builderファイル
 → app/assets/javascripts の中へ移動

TemplateDataファイル
 → app/assets/images の中へ移動
```

## index.htmlの編集
public/index.htmlを開き
TemplateData/***
Build/***
となっている全てのパスの先頭に
../assets/
を追加します。

```
完成形

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Unity WebGL Player | error</title>
  <link rel="shortcut icon" href="../assets/TemplateData/favicon.ico">
  <link rel="stylesheet" href="../assets/TemplateData/style.css">
  <script src="../assets/TemplateData/UnityProgress.js"></script>
  <script src="../assets/Build/UnityLoader.js"></script>
  <script>
    var gameInstance = UnityLoader.instantiate("gameContainer", "../assets/Build/deploy_test.json", { onProgress: UnityProgress });
  </script>
</head>

<body>
  <div class="webgl-content">
    <div id="gameContainer" style="width: 960px; height: 600px"></div>
    <div class="footer">
      <div class="webgl-logo"></div>
      <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
      <div class="title">error</div>
    </div>
  </div>
</body>

</html>
```

## jsonファイルの編集
app/assets/javascripts/Build/◯◯.jsonを開き
◯◯.data.***
◯◯.asm.***
となっている全てのファイル名の先頭に
../Build/
を追加します。
(◯◯の部分はWebGLを書き出すときにつけた名前)

```
完成形
（このとき、WebGLに書き出す際の名前をdeploy_testとしてました）

{
  "companyName": "DefaultCompany",
  "productName": "error",
  "dataUrl": "../Build/deploy_test.data.unityweb",
  "wasmCodeUrl": "../Build/deploy_test.wasm.code.unityweb",
  "wasmFrameworkUrl": "../Build/deploy_test.wasm.framework.unityweb",
  "TOTAL_MEMORY": 268435456,
  "graphicsAPI": [
    "WebGL 2.0",
    "WebGL 1.0"
  ],
  "webglContextAttributes": {
    "preserveDrawingBuffer": false
  },
  "splashScreenStyle": "Dark",
  "backgroundColor": "#231F20",
  "cacheControl": {
    "default": "must-revalidate"
  }
```

## compileの設定を変更
config/environments/production.rb　を開き

```
config.assets.compile = false
を
config.assets.compile = true
に変更する。

config.assets.js_compressor = :uglifier
を
config.assets.js_compressor = Uglifier.new(harmony: true)
に変更する。
```
## コントローラーの変更
今のままだとhello worldしか表示されないので、
indexアクションの先を書き出したindex.htmlに変更する

```
class GamesController < ApplicationController
  def index
    render file: 'public/index.html'
  end
end
```

## 準備完了！
まずはローカル環境でテストして、OKならgitに登録しましょう！

```
$ rails s

うまくunityプロジェクトが表示されているようなら、
$ git -A
$ git commit -m "unity on rails"
```

## いよいよherokuへのデプロイ
さぁ、herokuへデプロイしましょう！

```
$ git push heroku master
```

## 生成されたURLでアクセスする
デプロイが問題なく終了したら、生成されたURLでアクセスしてみましょう！
ターミナルのログの下の方が以下のようになってると思いますが
https://◯◯.herokuapp.com/ 
がアクセスするべきURLとなります。
このURL名は、上の方でheroku createした時の名前になります。

```
remote: -----> Compressing...
remote:        Done: 53.5M
remote: -----> Launching...
remote:        Released v7
remote:        https://◯◯.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/◯◯.git
```


## お疲れ様でした！
以上がWebGLで書き出したUnityプロジェクトをRailsを使ってherokuに
デプロイするまでの手順となります。
ローカルと違い、heroku上のunityプロジェクトはロードに時間がえらくかかりますが
やはり全世界に発信できるというのは良いですね。