こんにちは！@kurimoni367 です！！
自分の通っている高校でAWSを活用してサービスを構築・運用したことについて投稿します。今回は文化祭編です！！
目次
1. 構築することになった経緯
2. 構築サービス一覧
3. NYGstreaming（動画配信プラットフォーム）
4. その他サービス
5. 運用してみて
6. 振り返り
1.構築することになった経緯
技術統括局とは
そもそもなぜ私が学校でサービスの導入を行えたのかというと、技術統括局という組織を学校の中で作りそこで局長として活動していたからです。前身組織であった生徒会電算部をパワーアップさせ、技術的アプローチによって学校行事や日々の学校生活までの運営をになう組織です。いわゆる技術屋といったところでしょうか。主に撮影・編集・音響・無線・3DCG・配信の6セクションに分かれて活動していました。そして、この編集・配信セクションこそが開発部始動のきっかけになりました。
YouTubeでの問題
これまでは、文化祭でのバンド団体の動画配信や、入学式等のライブ配信はすべてYouTubeで行っていました。ですが、YouTubeでは限定公開にしていてもリンクさえ知っていれば関係者以外も視聴できる状態であったり、ライブ配信の際に音源が著作権違反とみなされれば、事前にどれだけ著作権申請を行っていてもBANされてしまったりします。そのほかにも、過激なメッセージが投稿されることを避けるためコメントを開放できない等さまざまな問題がありました。
これらの問題を解決するための方策を考えていましたが、既存のサービスには最適なものが見つかりませんでした。「それなら自作するか！」と思い立ったことが開発を始めるきっかけとなりました。
最大の問題"コードが書けない"
といっても、自分は「高校ではコードは書かん！」と決めていた人間なのでただの夢物語だったのですが、超つよつよプログラマの子が入局したことによって夢物語から現実的な"計画"へと変わりました。
企画認可をしてもらうに当たって
やはり避けて通れないのは先生の許可をもらうところです。
先生方にとっては未知のものでもあり、うまくいく保証はありません。それに、高校の行事予算という点においては従量課金制というクラウドの長所が短所となってしまいます。
それを解決するため、本局が過去2年間で実施してきたオンライン文化祭の再生回数やアクセス数などのデータをすべて集め、料金を試算しました。その結果予算内に収まることが分かり予算問題はクリアしました。
そもそもの中身を認可して貰う必要があるので、1万字ほどの企画書を作成してなんとかゴーサインを出してもらえました。なんやかんやで構築よりこの方がしんどかったかもしれません笑
お願い
この記事の記載事項やサービスについて、弊学及び当局へのお問い合わせはおやめください。
またこの記事の記載事項について、誤りの無い様細心の注意を払っていますが正確性を保証することはできません。
予めご了承下さい。
2.構築したサービス一覧
結果的に今回の文化祭で構築したサービスは以下の4サービスです。
1.文化祭HP
2.NYGstreaming(動画配信プラットフォーム)
3.チケット管理システム
4.入退場管理システム
この他にAWSを使用した場面は局員の作業環境用にAmazon Workspaceを使用しました。
(体育祭で運用したものは別で記事を作成します)
それではひとつずつ振り返っていこうと思います。
3.NYGstreaming（動画配信プラットフォーム）
NYGstreamingは、動画配信サイト並びにライブ配信を行うサイトです。
実装されている機能は現時点では
- オンデマンド配信
- 超低遅延ライブ配信
- CMランダム再生機能
- おすすめ動画表示
- 題名・概要欄表示
の5つです。
ver1.1ぐらいの時
2021年12月ごろ、Amazon Interactive Video Service（以下、IVS）を知りました。これがAWSとの最初の出会いでした。
自作なんてできるのかと半信半疑で調べていたところ、「クラウドで配信の面倒なところだけ提供してくれるのか！」と食いつき始めの一歩を踏み出した訳ですが、当時はまだコーディングも全然出来ず、ましてやAIprogramerやChatGPTもありませんでした。
というわけで、サンプルコードから再生URLのみを変更したファイルをS3に格納し、静的ウェブホスティングでテストを行いました。
すると、IVSの遅延が衝撃の2秒から5秒と超低遅延でありネットワーク負荷も高くありませんでした。学校でのテストも問題なく終わり、無事IVSの導入を行うことになりました。
その後、ドメインnygstreaming.infoを取得しRoute53でホストゾーン管理を始めました。以降いくつかのマイナーチェンジを行いはしたものの、当時の私のプログラミング限界が来てver1.1は終了しました。
ver1.2 ~要件定義＆テスト実装
例のつよつよプログラマが入局し自作環境への移行に向けて動き始めました。その頃定めたのは
- オンデマンド動画配信
- サムネイル画像の表示
- 題名・概要欄の実装
- マネージできるコメント欄
- マネージできるライブチャット
- おすすめ動画の表示
- 動画再生前にCMが流れる
の7つです。もしものことを考え、あまりサーバーには情報を乗せずAWS側で出来ることはAWSで実行するようにした結果、下図のような構成案になりました。
この頃にはサーバーの知識も付けEC2を使用していました。オンデマンドの動画配信に関しては、作成した動画をAWS Elemental MediaConvertでHLS形式に変換、S3に格納してCloudFrontで配信という形を取りました。
ライブチャットはIVS chatを、CM機能はAWS Elemental MediaTailorをそれぞれ使うことに
データベース関連もAWSを用いDynamoDBを使用する話もあったのですが、残り3か月の期間でここまでは無理だろうということになり見送ることとなりました。
ついに、テスト実装を始める段階になったのですが それはﾏｧうまくいきませんでした。Media convertの大量の設定に苦しめられ、ようやく変換できたと思えば次はS3の設定、といった風にたくさんの障壁がありました。
プログラムチームもブラウザの違いに苦しめられ、UIがマシになったところでver1.2は終了しました
ver1.3~開発完了
締切が迫ってきているのにも関わらず全く上手く行かない日々が続きました。
CMで実装する予定だったMedia Tailorは一つのCMを事前に流すことしかできなかったため、いくつかの種類のCMをランダムで流すという当初の予定を踏まえ、プログラムチームが頑張って実装してくれることになりました。
それでも尚、まだうまく行かないところがありました。一番の目玉であったオンデマンド配信の部分です。HLSのテストサイトに再生URLを入れたら再生されるにも関わらず、実際の環境では再生されないということが発生しました。原因を探るも一切わからず、ふと構成図に目を向けるとあることに気がつきます
「もしかして、CORS設定が上手く行ってない…？」
大正解でした。今回の構成ではEC2からウェブページの情報を取ってきている一方で、動画は別ドメインのサーバーから送られています。そのためCORS設定がうまく行っていないと再生されなかったのです。
そうして結果的に構成は以下のようになりました。
いくつか予定していた構築が間に合わなかったものの、なんとかリリースすることができました。
お知らせ
現在、NYGstreamingは一般公開を停止しています。
2023年2月に一週間の期間限定で再公開の予定です。
その他のサービス
入退場管理システム
今回の文化祭は入場できる人が制限されていたので、入場時に認証が必要でした。その認証のため、メール等で配布したQRコードをかざしてもらい第何部に登録された人なのかの処理を行いました。
読み取り端末は配布されているChromebookを使用し、アプリ等は制限がかかっているのですべてブラウザ上で完結するようにしました。
上の図のように、このサービスは特にAWS的に特別なことはしていません。t2.microで耐えてくれてよかったです。
チケット管理システム
このサービスは入退場管理sysと異なり、バンドのステージ等有志団体の公演を見るためのチケットを管理するものです。
Webフォームにて希望する公演のチケットを注文してもらい、定員を超えている場合には抽選処理を行いました。また、このサービスは在校生向けであったため、抽選結果を記したQRコード付きチケットをwordの差し込み文章機能で作成し、配布しました。
このサービスにおいてこだわった点はいわゆるDos・DDos対策です。一度に多くの生徒がアクセスし、重くなった時にリロードを何度もしてより負荷がかかることを避けて、AWS WAFを導入しました(わざとアタックをかけられる可能性も0ではなかったので)。AWS WAFではALBを設定している場合、非常に簡単にCAPTCHAを実装することができます。気になる方はぜひ公式ドキュメントや技術系ブログなどを参考にしてください。
運用結果ですが、これのおかげもあってかサーバーに過剰な負荷はかからずサービス的には成功でした。しかし、このCAPTCHAは英語で表示されるため一部で混乱は起こってしまったようでした。確かに英語のそれなりに整ったUIが突然出てきたらヤバいサイトと言われかねないですね（笑）。
文化祭HP
きっと多くの高校の文化祭で作成されているであろうホームページですが、今年度はwordpressで作成することになりそのためサーバーを用意する必要がありました。EC2で立てようかそれともGMO等のサービスを使おうか迷ったのですが、請求を一つにまとめたかったことと、EC2の一部機能がそのまま使えることを踏まえてAmazon Lightsailを使用しました。
無料枠もあるこのサービスは、比較的安い料金でサーバーを立てることができます。また、サーバーにApache等のwebソフトを入れたりwordpressを設定したりする必要がなく、ブラウザからもコンソールを操作できるので非常に便利です。Ubuntu以外にもOSも選べたりLAMPやnode.jsなども事前インストールできるのでぜひ見てみてください。
5.運用してみて
NYGstreaming
正直なところかなり不安でした。後述の2サービスを運用していましたが、一番アクセス数が多くかつネット負荷が掛かりそうなのがこのサービスだったからです。EC2のインスタンスがt2.microだったことも不安に拍車をかけました。
しかし、結果としてその心配は杞憂に終わることになります。動画をS3からのcloudfront配信にしたことによって、サーバーにはなんの負荷もかからずかつ高速に配信でき、EC2のインスタンスは簡単なhtmlファイルとサムネイル画像を送信するだけなので、落ちるどころかユーザーアクセスが一番多いときでも快適に使うことができました。
途中、あまりにも上手く行かないので"動画をEC2サーバーに載せよう"と何度もプログラムチーム言われましたが、クラウドに固執した甲斐がありました。(料金的にも)
入退場・チケット管理システム/文化祭HP
前者はWAFの英語表示で少し混乱が起こった程度で、運用面では全く問題は起きませんでした。
やらかしたのは後者です。かなり弱めのタイプを契約したので、リリース直後の時のアクセス増加ですごく重い状態になってしまいました。
これでどの程度のマシンタイプならどの程度のリクエストをさばけるのかを把握できたので次からは改善していこうと思います
6.振り返り
感想としては色々ありますが、まず良くなかった点は
- 構築期間が3ヶ月と短すぎた
- もっとコスト削減ができた
の主に二点です。
当時、私はIパスちょい上ぐらいの知識ならありましたが、もちろん開発運用の経験はなく、ましてやクラウドテクノロジーなど全く知りませんでした。その状態から3ヶ月間でここまで持っていくのはかなりしんどいものがありました。
もう少しの余裕があれば、血反吐を吐くような日々も幾分はましになったのかなと思いますしクオリティも上がったのかなと思います。
また、2つ目に上げたのは知識不足や学んでいる時間がなかったという点に起因するものです。例えば今回EC2を立てているものもlambdaやAmplify、データベース系のサービスを使えば簡単にできますし、コスト削減にもなります。
私はこれで引退ですが、来年も続けられていたらここを改善したいです。
次に良かった点は
- よく三ヶ月でここまでできたこと
- クラウドテクノロジを使わなければ確実に実現できなかったものを作れたこと
- コスト予想から少し超えたものの予算枠内にきちんと収まったこと
- 自身のAWSの知識が一気に深まったこと
- 後輩たちに新たなアプローチの手段を与えられた
ことです。
良くない点にも挙げましたがその一方で、なぜあのような短期間で学習して構築・運用できたかはわかりません笑。コストが予想から超えてしまったのはライブ動画の視聴者数が想定より多くIVSの請求がかさんでしまった点です。
そして、最後に挙げさせていただきましたが、今回私がこの「クラウドを用いた」コンテンツ制作で一つ実績を残せたことは、
後輩たちにそもそも開発をするという選択肢
と
その開発の手段の一つに可能性の塊であるクラウドテクノロジー
を与えられたこと と思っています。
私がこのクラウドテクノロジーに今も魅せられているのは、その可能性そのものです。今でも初めてAWSのホームページにアクセスして「製品」のところにカーソルを合わせた時の驚きと胸のときめきは忘れません。
ほぼ無限と言っていいほど出てくるサービスたちで「あれもできる！これを使えばあんなこともできる！」と胸を躍らせました。
もちろんご存知のようにクラウドには短所もあります。ですが、クラウドにしかできないこと、クラウドだから簡単にできることはもっとあると思っています。
後輩たちがこの新しい選択肢も考えながらあらゆるアプローチでもっとより良い行事・学校にしてくれることを応援しています。
そして最後になりますが、構築等でご助言をいただきましたAWS様、ずっと一緒についてきてくれて素晴らしいものを作ってくれたプログラムチームのみんな、NYGstreamingのサイトデザインを考えてくれたKくん、これを認可して後押ししてくれた学校と先生方、そしてこのサービスを使ってくれた文化祭実行委員会や学校の皆さんにこの場を借りて厚く御礼申し上げます。
本当にありがとうございました。
さて、それでは長くなりましたがここぐらいで一旦終わろうと思います。ここまで読んでくださった皆さんありがとうございました！！
また投稿しようと思うのでぜひ見に来てください！！
(@SK1826 構成図のデジタル化ありがとう！ 文章添削してくれた人もありがとう！)