[React] WebRTC x React でP2Pビデオ電話アプリを作ってみる 番外編#1 ~Herokuにデプロイ~

概要

WebRTCとReactを使ったビデオ通話アプリケーションの番外編第1回です。これまでとりあえずうまく通話ができた(localhost内)ので今度はインターネットに公開してみます。
無料で使用できるHerokuというサービスで公開します。

Heroku

Herokuは基本料金無料で使用できるクラウドアプリケーションサービスです。

会員登録

ここから会員登録をします。必要事項を入力してください。

デプロイ

ダッシュボード右上のNewボタンからCreate New Appを選択します。
このページでアプリの名前と使用するサーバ(アメリカorヨーロッパ)を指定します。
その後のページでは、DeployタグのDeployment method欄でデプロイの方法を選択できるのですが、おすすめはGitHub連携です。(それしか使ったことがないなんて言えない)
この方法だと連携したGitHubレポジトリが更新されるたびにHeroku側も更新してくれるため楽です。

デプロイするコード

本編で使用したコードをそのままデプロイしても全然動きません。なので少し手を加えていきます。
と言っても手を加えるのはごく一部です。
backend/index.js

// 省略
const io = require('socket.io')(server, {
  cors: {
    //origin: 'http://localhost:3000',から変更
    origin: 'http://<appの名前>.herokuapp.com',
    methods: ['GET', 'POST'],
  }
});

app.use(express.static(path.join(__dirname, '../frontend/build'))); // 追加
// 省略

VideoConnect2.js

// 省略
// "http://localhost:3001"から変更
const SERVER = "https://<appの名前>.herokuapp.com";
// 省略

/package.json

// 省略
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node backend/index-heroku.js",
    "heroku-postbuild": "npm install && cd frontend && npm install && npm run build"
  },
// 省略

fontend/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import VideoConnect3 from './VideoConnect3'; // 変更

ReactDOM.render(
  <React.StrictMode>
    <VideoConnect3 /> // 変更
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

上記の部分を変更してください。<appの名前>はHerokuでのApp作成時の自分で決めたAppの名前を入力してください。変更後のものをGithubにbackend/index-heroku.js、frontend/src/VideoConnect3.jsとして保存してます。
最後にbackend内でnpm run buildを実行してください。実行後にbuildフォルダができれば完成です。

動作確認

ダッシュボード右上のOpen appをクリックすると自分のAppが開きます。同じURLでもう一つタブを立ち上げ本編第5回と同様に使用してみましょう。うまく動くはずです。 うまく動かない時は、Herokuのダッシュボード右上MoreからView logsにエラーが出ていると思います。

まとめ

• Herokuは偉大なサービスです。無料で利用できてこんな簡単にデプロイできるのすごい