UE4 PixelStreamingの手引き（AWSホスティングRTA編）

# 注意

今回の記事はUE4のPixelStreamingをAWS上で動作させるためのRTA記事となります
なにもないところからPixelStreamingが動くところまで説明します

## 読者想定
- AWSアカウントを作れるor持っている
- 最低限のサーバ構築ができる
- GPUインスタンスを立てる度胸がある

## 説明すること
- デモアプリを動かすためのPixelStreaming用のUE4設定
- PixelStreamingを動かすためのIAMとEC2の設定

## 説明しないこと
- UE4のアプリの作り方、パッケージングなど
- UE4についてのトラブルシューティング
- AWSの使い方
- ドライバインストール時の設定（基本的にデフォルトのまま入れます）

# 手順

## 1. UE4プロジェクトの作成
まずはプロジェクトを作成しましょう
UE4.21を起動し、新規プロジェクトからThirdPersonTemplateを選びましょう
特に編集しないのでStarterContentsはなくて良いです

![2018-11-14_13h46_45.png](https://qiita-image-store.s3.amazonaws.com/0/117589/c6ce5d23-89b9-af98-b94c-bdce2fe85477.png)


## 2. Pluginの有効化
次はPluginの有効化です
`Edit > Plugin`でプラグイン設定の画面を表示し、`PixelStreaming`プラグインを有効にしましょう
警告は出ますがよく読んで無視します
![2018-11-14_13h47_28.png](https://qiita-image-store.s3.amazonaws.com/0/117589/4a9b1915-58e2-09bf-e8e6-99391009115a.png)
設定したらEditorを再起動します

### 2-1. VirtualJoystickの常時表示設定
なお、スマートフォンやタブレットで確認したい人は、VirtualJoystickの表示設定をしておくと幸せになれます
![2018-11-14_13h48_07.png](https://qiita-image-store.s3.amazonaws.com/0/117589/2b1bab94-4265-9abf-cb02-be4acf69f37a.png)

## 3. パッケージング
プラグインの設定が終わればパッケージングを行います
今回はWindowsサーバで動かすのでWindows(64bit)でOKです
![2018-11-14_13h48_20.png](https://qiita-image-store.s3.amazonaws.com/0/117589/d457f5ef-34be-efad-3534-c7a91e969066.png)


## 4. 必要ライブラリの準備
この時点でサーバに持っていくリソースを準備しておきましょう
下記を一つのフォルダにまとめておくと持っていくときに便利です

- 3でパッケージングしたUE4アプリ
- `<Engine_Install_Folder>\UE_4.21\Engine\Source\Programs`から`PixelStreaming`フォルダを丸ごと
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/88b5a490-7761-44a3-70c5-94e0ac6c7b64.png)

- `<Engine_Install_Folder>\UE_4.21\Engine\Source\ThirdParty\WebRTC\rev.23789\programs\Win64\VS2017\release`に入っているものを全部
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/353599db-3eb0-cd37-29cc-9c29a02fb708.png)

- Node.jsのインストーラー
    - LTS版でOKです

![2018-11-14_14h10_18.png](https://qiita-image-store.s3.amazonaws.com/0/117589/cd6ea2c8-fcb4-8d89-ceaa-f85d1c0819f7.png)

## 5. IAMの準備
ここからAWSマネジメントコンソール上の作業です

### 5-1. IAMポリシーの作成
NVIDIAドライバをダウンロードする際にS3へのアクセス権限が必要になるので、IAMポリシーを作成します
必要な設定は下記画像の通り、S3の`ListBuckets`と`GetObject`を許可するようにしてください
![2018-11-14_13h54_23.png](https://qiita-image-store.s3.amazonaws.com/0/117589/aa5600be-d8ff-6290-1a60-278b6066f2c0.png)

### 5-2. IAMロールの作成
5-1で作成したポリシーを使ってロールを作成します
ロールを使用するサービスはEC2
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/24b69af4-6d58-883c-68be-c67f07a0f221.png)
ポリシーは先ほど作成したものを設定しましょう
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/e8eaf8b2-ce0b-edc3-fb3f-0d9d2612cf8b.png)

## 6. EC2インスタンスの作成
EC2インスタンスを作成します

### 6-1. AMI
今回はWindowsServer2016BaseのAMIを選択してください
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/a7e691c3-ab14-6bcf-eeea-922aa4eafe23.png)

### 6-2. インスタンスタイプ
インスタンスタイプは`GPU Graphics`の`g3s.xlarge`を選択しましょう
（お金がある人はもっと上のインスタンスタイプを使用しても良いですが、動かすだけなら過剰スペックです）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/282eef39-ca03-2557-de6b-e117638c6182.png)

### 6-3. インスタンスの詳細
詳しい人のみ変更してください。動かすだけなら特に変更は必要ありません
赤枠で囲ったIAMロールに、5で作成したIAMロールを設定します
（このとき設定し忘れましたので、後にリカバリー策を書いています）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/52b0d777-4cdc-e8c8-14f8-8f7473470237.png)


### 6-4. ストレージ
ストレージボリュームは不足のない程度に設定してください
100GBあれば大抵どうにでもなります。ちょっとでも節約したい人はデフォルトの30GBで十分でしょう
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/87621cbe-5e46-d6e0-3abc-080d8a72551c.png)

### 6-5. タグ
タグはわかりやすいものを設定しておくと良いでしょう

### 6-6. セキュリティグループ
最重要です
以下の通りに設定してください
外部からのアクセスを想定する場合は、80, 19302, 19303のソースは0.0.0.0/0でも良いです
それ以外の場合はマイIPに設定しておいてください
なお、3389はリモートデスクトップ用のポートですので、ここは必ずマイIPにすることを推奨します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/392db8c3-2eec-1187-54b0-60777e860878.png)


### 6-7. 確認
設定内容を確認しておきましょう
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/c393c698-e715-5341-844f-70958ed7749b.png)

### 6-7-1. キーペアについて
新しいキーペアを作成してダウンロードしておきましょう
絶対になくしたり公開したりしないでください
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/d239fa85-d9fa-5fb1-6cd4-d610a58cf3a9.png)


### 6-8. インスタンス作成中
インスタンスが立ち上がるまでは休憩時間です

### 6-X. IAMロールの設定を忘れた際のリカバリー
IAMロールの設定を忘れた場合は落ち着いて、インスタンスを選択し、アクションからIAMロールの割り当てを選択します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/c8c039f6-bfc4-2927-696f-6eaf7b69a759.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/f9ae4a11-b919-f2ef-326b-5a52070c27a0.png)


### 6-9. ログイン
インスタンスが立ち上がったら接続しましょう
インスタンスを選択した状態で、上部の`接続`をクリックすれば案内が出ますので、それに従って接続設定を行います
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/05639c19-ea4e-d358-16d3-3d2ee2d8315e.png)


## 7. サーバの設定
リモートデスクトップで接続できたら、4で用意したリソースをデスクトップ上にでもコピーしておきましょう

### 7-1. NVIDIAドライバのインストール
まずNVIDIAドライバが無いとUE4アプリが実行できません
PowerShellを起動し、下記ページに書いてあるスクリプトをコピペします
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/WindowsGuide/install-nvidia-driver-windows.html
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/8939b834-62e4-6197-bf3d-bb134b05fea3.png)

実行するとデスクトップ上にインストーラがダウンロードされますので、実行してインストールします
WindowsServer2016用のものを選びましょう
インストール設定はデフォルトのままでOKです

インストール後は再起動が求められますので、再起動しましょう
ここでリモートデスクトップが切れますので、しばらく置いて再接続します

### 7-2. アプリの動作確認
再起動後にUE4アプリが実行できるかどうかチェックしておきましょう
ランタイムのインストールを求められますので、そのままインストールしてください

ランタイムインストール後、ThirdPersonTemplateの画面が立ち上がれば成功です
Alt+F4で閉じておきましょう
（なおこれは他の必須ライブラリをついでに入れるというズボラムーブの一環です）

### 7-3. Node.jsのインストール
Node.jsインストーラを起動し、Node.jsをインストールします
デフォルト設定でOKです

### 7-4. WindowsFirewallの設定
もちろんFirewallがありますので、設定をしておきましょう
TCPは80、8124、8888を、UDPは19302-19303を開けておきます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/41e8f6c3-d296-8c17-7d97-fc6a7756b1f8.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/f6d5cff0-7368-6359-234e-c3bdea37740e.png)

### 7-5. ショートカットの作成
UE4アプリへのショートカットを作成し、コマンド引数を追加しておきます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/e86d95ce-23e0-d042-9056-dd847e010a0f.png)


## 8. 起動
以下の順に起動しましょう

- STUN/TURN
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/328bfca6-4ff6-bc03-80a0-be2535170cfc.png)

- SignallingWebServer
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/551bc07a-0e86-b17d-0448-b30c9862a0e2.png)

- WebRTCProxy
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/4e11165f-c102-9668-aa40-d400da9d8b4e.png)

- UE4アプリ
作成したショートカットから起動します

## 9. ブラウザアクセス
後はPublicDNSあるいはPublicIPを用いてアクセスしましょう
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/ac5682c0-32a5-348b-49da-9455b744488d.png)
上手く動けばゴールです

# 記録
プロジェクト作成開始からPixelStreaming開通までの結果は19分10秒でした
（最初のプロジェクトのスクリーンショットから最後のブラウザのスクリーンショットまで）

その後の編集に約1時間かかりました

# 後記
- ある程度の範囲に公開するのであれば、SSLの設定が必要になってきます
- 今回使用したSTUN/TURNサーバは仮のものであり、実用する場合には別途STUN/TURNサーバを用いることが推奨されています
- 今回提示した設定は最低限のセキュリティを確保しつつ実行する方法です。実用する場合は適宜アレンジしてください


誰かガチ構成を考えてくれないかなぁ…

# 関連記事
- [UE4 PixelStreamingの手引き（導入編）](https://qiita.com/T_Sumisaki/items/d526d1fd43041856114c)
- [UE4 PixelStreamingの手引き（ホスティング編）](https://qiita.com/T_Sumisaki/items/34c73db59ee95af2e4e3)
- [UE4 PixelStreamingの手引き（UIカスタマイズ編）](https://qiita.com/T_Sumisaki/items/68d37587890f379f0b8e)