【10分でできる】SkyWayを使ってビデオチャットアプリを作成してHerokuでデプロイする方法

#プログラミング勉強日記
2021年3月19日
SkyWayでビデオチャットアプリを作る方法はいくつかのサイトに載っていたが、Herokuでデプロイするのが大変だったので、記事に残しておく。

#開発環境と前提条件

- Windows10
- Node.jsが入ってる
- npmコマンドが使える
- Herokuのアカウント登録がある

#ビデオチャットアプリを作る

##1. SkyWayの登録・ログインする
　[こちら](https://webrtc.ecl.ntt.com/)から無料で始めるをクリックして、会員登録をする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/2de0703e-814f-0479-fe1f-0501fce9505d.png)

##2. SkyWayでアプリケーションを作成する
　アプリケーション説明文に`videochat-sample`, 利用可能ドメイン名に`localhost`と`videochat-sample.herokuapp.com`を入力する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/c61cf6f1-5592-4e28-7331-a25652bbc02f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/7c9e8cf8-c049-655e-8d73-46da56b4b720.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/26ea50bb-8e6d-4e34-28fc-f8cff569bd4f.png)

 アプリを作成するとAPIキーを取得できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/c801c08e-be09-f59c-1b01-74cc78aac5f3.png)

##3. GitHubからサンプルコードを入手する
　SkyWayで作成したアプリケーション説明文と同じ名前のフォルダを作る。
　[SkyWayの公式のGitHub](https://github.com/skyway/skyway-js-sdk/tree/master/examples)からサンプルコードを取得し、作ったフォルダに入れる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/63da3658-b259-43df-d3eb-99679f76097e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/005ea7d3-1500-5c1d-d202-233ab5a29847.png)

##4. ローカルで動かす方法
　`_shared/key.js`の中身をSkyWayで取得したAPIキーを入力する。

```js:_shared/key.js
window.__SKYWAY_KEY__ = '<YOUR_KEY_HERE>';
```

　コードを保存してるディレクトリの中でローカルサーバを立ち上げる。

```
$ ruby -run -e httpd . -p 8080
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/0fdc96c3-f5f4-6466-7565-eb437151344c.png)

　ブラウザで`localhost:8080`にアクセスすると、以下のようにビデオチャットが作成されてる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/f1c549be-7e73-b999-bd35-c9c1529660e5.png)

#Herokuを使ってデプロイする方法

##1. expressをインストールする
　ディレクトリの中で下記コマンドを入力

```
$ npm init 
$ npm install express
```

　色々聞かれるが全てEnterで問題ない。expressのインストールが終了すると、`package.json`と`package-lock.json`が作成される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/10ce4803-5775-4df1-3a75-cc2158923312.png)


```:package.json
{
  "name": "videochat-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^8.2.0",
    "express": "^4.15.3"
  }
}
```


##2. app.jsファイルを作成する
　ディレクトリ直下に`app.js`ファイルを作成する。

```js:videochat-sample/app.js
var express = require('express');
var app = express();

app.use(express.static('public', { hidden: true }));
app.listen(process.env.PORT || 8080);
```

##3. フォルダを整理する
　ページにアクセスしたときにすぐにチャット画面が開くように、ディレクトリの中を整理する。`public`フォルダを作成し、`_shared`, `p2p-data`, `p2p-media`, `room`をpublicの中に入れる。roomフォルダの中にある`index.html`と`script.js`をpublic直下に置く。
　文章だとわかりにくいので、以下の写真のようになるようにする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/a314ed61-1e6f-37ea-2d49-8a0cd90494f7.png)

　階層を変えたので、`public/index.html`のパスを変更する。

```html:public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SkyWay - Room example</title>
    <link rel="stylesheet" href="_shared/style.css">
  </head>
  <body>
    <div class="container">
      <h1 class="heading">Room example</h1>
      <p class="note">
        Change Room mode (before join in a room):
        <a href="#">mesh</a> / <a href="#sfu">sfu</a>
      </p>
      <div class="room">
        <div>
          <video id="js-local-stream"></video>
          <span id="js-room-mode"></span>:
          <input type="text" placeholder="Room Name" id="js-room-id">
          <button id="js-join-trigger">Join</button>
          <button id="js-leave-trigger">Leave</button>
        </div>

        <div class="remote-streams" id="js-remote-streams"></div>

        <div>
          <pre class="messages" id="js-messages"></pre>
          <input type="text" id="js-local-text">
          <button id="js-send-trigger">Send</button>
        </div>
      </div>
      <p class="meta" id="js-meta"></p>
    </div>
    <script src="//cdn.webrtc.ecl.ntt.com/skyway-4.4.0.js"></script>
    <script src="_shared/key.js"></script>
    <script src="script.js"></script>
  </body>
</html>
```

　ここで再度ローカルで動くか確認してみてください。

```:ローカルで動かす
node app.js
```

##4. Herokuにログインする
　Git Bashで以下のコマンドを入力すると、ブラウザが開くのでログインする。

```
$ heroku login
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/066eb68b-620c-c2e3-e1ae-53e8ed6791fb.png)

##5. Herokuでアプリを作成する
　今までと同じ名前でアプリを作成する。


```:Gitbash
$ heroku create videochat-sample
```

##6. Herokuにデプロイする

```
$ git init
$ git add .
$ git commit -m "create app"
$ git remote add heroku https://git.heroku.com/videochat-sample.git
$ git push heroku master
```

　`https://videochat-sample.herokuapp.com/`にアクセスすると表示される。このとき、`https`の<b>`s`</b>を入れることを忘れないように！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/5b40f006-7441-812e-739b-56484f317855.png)


#最後に
　4日間かけてアプリを作成してデプロイしたのをまとめた。アプリ名(今回なら`videochat-sample`)を全て統一することが重要なので、スペルミス等注意が必要。
　ただ、この方法だと誰でもAPIキーを見れてしまうので、環境変数に入れてうまく隠す必要がある。APIキーを隠す方法もできたら記事に書こうと思う。

　もう1度手順を踏んでやっていたがエラーがあって何度かやり直したので、これだけではいけないかもしれないです…何かありましたらコメントください！
　最後まで読んでいただき、ありがとうございました。

#参考文献
[【爆速！】5分でビデオチャットを構築する](https://qiita.com/kolife/items/6b771676d7558254b3a6)
[WebRTC Platform SkyWay](https://github.com/skyway)
[SkyWayを使って多人数ビデオチャットを作ってみた](https://qiita.com/neriai/items/b96bb88f39903a2abf85)