作ったアプリの内容
- 今回作ったのは、YouTubeをキーワード検索して、視聴回数が多い順に結果を表示し、各動画の字幕をダウンロードして要約してくれるアプリです。(検索結果を10件以下にすると、一気にまとめて要約する機能もあります。)
Github
アプリのURL vercel （vercelは、URLの更新漏れが有ると思います。）
- フロントエンドにはReactとNext.jsを使い、バックエンドはPythonで組みました。フロントはUIに関して知識がほとんどない中で作ったので、具体的な部分は割愛しますが、検索キーワードの入力と結果の表示が主な機能です。
- バックエンドは、主に以下の機能があります：
A: YouTube検索(youtubesearchpythonライブラリ)
B: YouTubeの字幕取得(youtube_transcript_api)
C: 字幕の要約(LLM : gemini-1.5-flash)
実際の開発では、フロントとバックエンドの通信がうまくいかないことや、YouTubeから字幕取得の際にアクセスを拒否される問題が発生。そこでプロキシサーバが必要になり、Squidとngrokを使って2日間かけて解決しました。
- アプリ開発で問題になったこと：
・フロントとバックの通信問題。
・YouTubeからのアクセス拒否による字幕取得の失敗。
・プロキシサーバの構築に苦労（2日もかかる）。
分からないことだらけでも、AIやGoogle検索を駆使して、なんとか乗り切れたのが嬉しかったです。
- cursorの良かった点
最近はAIツールも多く登場していますが、私が使っているのは「cursor」です。個人的に一番しっくりくるのは、自由度が高く、ソースコードの修正ポイントが見やすい点です。AIとのやり取りもスムーズで、とても直感的に操作できました。
素人の私が言うのもなんですが、プロのエンジニアなら、開発効率が劇的に向上するツールだと感じています。cursorがある環境なら、開発スピードが上がり、やるべきことに集中できるのではないかと思います。
開発環境がインターネットに繋がってないとか悲劇ですね。
- cursorの辛かった点
cursorを使っていて辛かったのは、AIが答えを出せない場合です。同じ質問を繰り返しても、解決に至らないことがあります。これは自分の質問の仕方が悪かったのかもしれませんが、その「ハマり感」は確かにありました。行き詰まったときには、少しパソコンから離れて気分転換するのが大事だと感じました。
- Vercelへデプロイした際にハマったこと
フロントエンドとバックエンドをVercelにそれぞれデプロイしたところ、通信がうまくいきませんでした。cursorに確認したところ、別々のドメイン扱いになってしまうので、CORS（クロスオリジンリソース共有）設定が必要だと言われました。しかし、調べてもなかなか解決できず、結局1日がかりで試行錯誤。
最終的には、Vercelのvercel.jsonを編集することで、2つのアプリを1つのドメインとして認識させる方法にたどり着きました。ここでもcursorに助けられましたが、丸1日かかってしまいました。
- Squidとngrokでプロキシサーバを作った話
通信が解決したと思ったら、次はYouTube字幕取得の際にアクセス拒否される問題が発生。これを解決するために、Squidとngrokを使って自宅PCをプロキシサーバにしました。しかし、このプロセスが難航し、さらに1日かかりました。
翌朝、冷静にそれぞれの機能を確認しつつ再度チャレンジしたところ、何とか動かすことができました。ここまで苦労した分、少しは自分の成長を感じました（とはいえ、多分そんなことはないです）。
- 終わりに
セキュリティ面にはまだ課題が残っているし、UIも改善点が山積みですが、アプリが動いた瞬間は本当に嬉しかったです。この記事を読んでくれた人が、何かしら参考にしてくれたら幸いです。
それと、プロキシサーバは自宅サーバかつ、自宅にWIFIは無くテザリングのみで開発中なので、ほとんど稼働してません。悪しからず。フロントエンドの画面のみ確認できます。
- 次の記事で、ハマりポイントになった部分の詳細を記載予定です
- GitHubにソースコードは公開していますので、気になる方はぜひチェックしてください
以上、Vercelにデプロイした際の苦労話や、プロキシサーバを使って解決した経験について共有させていただきました！