こんにちは！ 株式会社スタートアップテクノロジー 所属、
そして先日、AWS Serverless HEROに選ばれました、JAWS-UG 浜松支部の松井です！
今回は AWS の各種マネージドサービスを活用した配信サイトの構築方法のお話をさせていただきます！
オンライン配信しようとした場合、 YouTube Live などを活用する方法が考えられますね。
しかし、既存サービスを活用する場合カスタマイズが難しく、何かと不自由もあるかと思います。
そこで今回は、 AWS で提供されている Amazon Interactive Video Service (IVS) と AWS Amplify 、
また StreamYard と言うライブストリームサービスを活用して、自分だけのオリジナル配信サイトを構築する方法をご紹介します！
- 下記サービスの有効なアカウント
- AWS
- GitHub
- StreamYard の Basic プラン（本資料内で登録・設定方法をご案内します）以上のアカウント
- 数十円程度の AWS 利用料および StreamYard の最低 $20/month の利用料
- 今回のハンズオンで構築するアーキテクチャです。
- Amplify Console を使い、 Nuxt.js で作成した静的ページをデプロイ・ホスティングします。
- StreamYard という配信データを送信するWebサービスを使って、 Amazon IVS に対してPC上から動画データを送信します。
- Webブラウザ側から、 amazon-ivs-player や、 Video.js といったライブラリを利用して、 Amazon IVS が提供する再生URLからストリーミングデータを取得して表示します。
- また、参考として、JAWS DAYS 2021 re:Connect の配信サイトのアーキテクチャも紹介します。
- Amazon EventBridge をトリガーにして AWS Lambda を実行し、 Amazon IVS の配信視聴者数を取得し、 Amazon DynamoDB に保存する機能を実装しました。
- また、 Amazon IVS の Timed Metadata という機能を利用して、上記の視聴者数も含めたリアルタイムなデータのクライアントへの反映や、アンケート機能などを実装しました。
- AWS Amplify を利用して、配信に付随する各種データの管理ができる仕組みも構築しました。
- IVS の設定
- StreamYard の登録・設定
- Nuxt.js プロジェクトのセットアップ
- Amplify Console でデプロイ
- AWS マネジメントコンソールにアクセスします。
- メールアドレスを入力して、次へをクリックします。
- セキュリティチェックを入力して、送信をクリックします。
- パスワードを入力して、サインインをクリックします。
- ivs と入力して、 Amazon Interactive Video Service をクリックします。
- リージョンを 米国西部（オレゴン）に変更 をクリックします。
- チャネルの作成をクリックします。
- チャネル名にivs-nuxt-1と入力し、チャネルの作成をクリックします。
- 作成した ivs-nuxt-1 詳細ページの、ストリーム設定の3点をコピーして控えます。
- 取り込みサーバー
- ストリームキー
- 再生URL
- StreamYard のトップページ へアクセスします。
- 上記にメールアドレスを入力して、 Get started をクリックします。
- メールが送信されてくるので、6桁の確認コードをコピーします。
- 確認コードを入力して、 Log in をクリックします。
- Onward! をクリックします。
- Upgrade をクリックします。
- Basic の Upgrade now をクリックします。
- カード情報を入力し、 monthly / annually を任意で選択し、 Purchase plan をクリックします （注意: 料金が発生します）。
- Return to dashboard をクリックします。
- Destinations をクリックしてから、 Add a destination をクリックします。
- Custom RTMP をクリック
- 先ほど 1. IVS の設定 で最後に控えた下記2つを入力します。
- 取り込みサーバー
- ストリームキー
- Nickname は ivs-nuxt-1 と入力し、 Add RTMP server をクリックします。
- 今回ページを公開するための Nuxt.js のフロントエンドプロジェクトをセットアップします。
- ハンズオンの中では具体的にコードの変更はしませんが、これ以降はこちらの環境で自由にカスタムしていただけます！
- こちらを参考に、 AWS Cloud9 環境を構築します。
- Cloud9 の環境が整いました。 の箇所まで進めます。
- 注意!! リージョンとインスタンスタイプの組み合わせによっては、うまく環境が立ち上がらない場合があります。こちらの手順はリージョンやインスタンスタイプに依存しないため、うまくいかない場合はリージョンやインスタンスタイプを変更していただいて構いません。
- こちらのリポジトリにアクセスします。
- Fork をクリックします。
- GitHub からコードをクローンして、プロジェクトディレクトリに移動します。
- ※これ以降、プロジェクトリポジトリに移動しないとうまくコマンドが実行できませんのでお気をつけください。
git clone https://github.com/[自分のGitHubアカウントのキー]/ivs-nuxt.git
cd ivs-nuxt
- npm パッケージをインストールします。
npm i
- テスト起動します。
npm run dev
- Preview をクリックしてから、 Preview Running Application をクリックします。
- デモ用のストリーミング動画が表示されるのを確認します。
- Create a broadcast をクリックします。
- アイコンをクリックし（マウスオーバーで、
ivs-nuxt-1と表示されます）、任意のタイトルを入力して、 Create broadcast をクリックします。
- Enter studio をクリックします。
- 左下の顔の表示にマウスオーバーすると、 Add to stream と表示されるので、クリックします。
- Go live をクリックし、ダイアログからさらに Go live をクリックします。
- 一度、起動している開発環境のサーバーを停止します(ターミナルで
ctrl + c)。
ctrl + c
- ターミナルで下記を実行し、こちらで控えた自分の 再生URL を環境変数に設定します。
export IVS_NUXT_STREAM_URL="自分の再生URL"
- サーバーを再起動します。
npm run dev
- Preview しているページを再読み込みして、自分の配信が再生されることを確認します。
- ここまでローカルでプロジェクトを進めてきましたが、いよいよ配信サイトを公開します！
- AWS Amplify Console から簡単なステップで公開できますので、その手順を解説します。
- AWS マネジメントコンソールで検索フォームに
amplifyと入力します。 - AWS Amplify が表示されたら、クリックします。
- GET STARTED をクリックします。
- Get started の下の右側のセクションの Get started ボタンをクリックします。
- GitHub を選択し、 Continue をクリックします。
- Authorize aws-amplify-console をクリックします。
- リポジトリからForkしたご自身の ivs-nuxt リポジトリを選択します。
- main ブランチを選択して、 次へ をクリックします。
- ビルド設定の追加の Edit をクリックして、後述の
amplify.yml通り変更してください。 - Advanced settings をクリックします。
- 環境変数の Key に
IVS_NUXT_STREAM_URLを、 Value に先ほどこちらで控えた 再生URL を入力します。 - 次に、次へをクリックしてください。
amplify.yml
version: 1
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run build
- npm run generate
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
- 保存してデプロイをクリックします。
- プログレスバーのステータスが検証になるのを待ちます。
- その後、ドメインの箇所に記載されているURLをクリックしてください。
- 配信ページが Cloud9 で実行したプレビューページ同様表示されればOKです！
いかがでしたでしょうか？
こちらの配信サイトは JavaScript(Vue.js/Nuxt.js) ベースでできておりますので、
もちろんこのリポジトリからカスタムしていただいて独自の機能を追加したり、思い思いのデザインにしていただくことが可能です！
例えば、カスタマイズの方向性としては下記などが考えられます。
- Amazon IVS の Timed Metadata を利用して、バックエンドとのインタラクションを活用した機能を構築する。
- Amazon IVS の録画データの保存機能を有効化して、 Amazon S3 に配信動画を保存する。
ぜひ、色々とカスタムして遊んでみてください！！
Happy coding!