ReactとNext.jsでフロント、Pythonでバックエンドを開発し、Vercelへデプロイした話。ついでにSquidとngrokでプロキシサーバも作った！の続編です。

困ったこと（大きく２点）

（１）フロントとバックの通信問題

フロントエンドとバックエンドを別々のアプリケーションにする必要がありました。そこで、フロントエンドとバックエンドを通信させようとしたところ、CORSエラーが発生。CORSの制御は私には難しく感じました。
AIに相談した結果、Vercelに2つのアプリをデプロイし、1つのドメインとして扱う方法が可能とのことで、以下のようなJSON設定を作成しました。（フロントはデプロイした時に生成されるURLを使い、バックは、以下のようにフロントのサブURLに見える。）

Vercel.jsonをフロントエンド側に設定して、フロントエンドからバックエンドを呼び出す方法
Vercel.jsonの設定でフロントエンドから見て、バックエンド（"https://backend-teal-five-69.vercel.app"）は、/app2/と見えるようにしています。
フロントエンドロジックのhref={/app2/api/download/${result.videoId}}は、
href={https://backend-teal-five-69.vercel.app/api/download/${result.videoId}`}`と同じように動作します。

これにより、バックエンド側では以下のエンドポイントが呼び出されます：

@app.route('/api/download/<video_id>', methods=['GET'])
def download(video_id):

フロントエンドに配置（バックエンドをデプロイしてURLが決まってからフロントエンドをデプロイ）
Vercel.json

{
  "rewrites": [
    {
      "source": "/app2/(.*)",
      "destination": "https://backend-teal-five-69.vercel.app/$1"
    }
  ]
}

フロントエンドからバックエンドにアクセスするロジック：

<a
  href={`/app2/api/download/${result.videoId}`}
  target="_blank"
  rel="noopener noreferrer"
  className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
>
  字幕要約
</a>

バックエンドの確認用URL：

@app.route("/")
def hello_world():
    return "<p>path : /  hello world</p>"

（２）YouTube字幕取得APIの拒否問題

YouTubeから字幕を取得しようとした際、YouTube APIが拒否されました。この問題はこちらのissuesでも言及されていますが、プロキシサーバを経由することで解決する必要があるとのこと
https://github.com/jdepoix/youtube-transcript-api/issues/303
そこで、自宅のWindows環境にプロキシサーバを構築し、外部アクセスを可能にしました。Wi-Fiが無くiPhoneのテザリングのみで接続していますが、問題なく実現できました。

使用したツール：
Ngrok: 自宅サーバを公開するためのツール
Squid: プロキシサーバとして機能

Ngrokの使い方
(localhostのWebアプリを公開)
参考URL: https://www.mgo-tec.com/blog-entry-ngrok-install.html
まず、localhost上でWebサービスを立ち上げる必要があります。私はReactアプリをlocalhost:3000で起動し、それをNgrokで外部に公開しました。
NgrokのサイトでサインアップしてAuthtokenを取得
Ngrokのダウンロードとインストール(ファイルを解凍するだけ。)解答したexeファイルをダブルクリックすると、コマンドプロンプトが開きます。

ngrok authtoken <Authtoken>
ngrok http 3000

これで外部からアクセス可能なURLが生成されます。一旦停止します。

Squidの使い方
参考URL: https://e-kamo.net/install-squid4-on-win10
Windows版Squidを使ってプロキシサーバを立ち上げました。以下が設定の要点です：
Squidをインストール
設定ファイル(squid.conf)にキャッシュやDNSサーバの設定を追加

# キャッシュディレクトリの設定
cache_dir ufs C:/Squid/var/cache 3000 16 256
# DNSサーバの指定(google)
dns_nameservers 8.8.8.8 8.8.4.4
# error_directoryの指定
error_directory C:/Squid/usr/share/squid/errors/ja-jp
# access.logフォーマットをYYYY/MM/DD HH:MM:SS から始まるように
logformat readable_time %{%Y/%m/%d %H:%M:%S}tl %>a %Ss/%03>Hs %<st %rm %ru %un %Sh/%<A %mt
access_log C:/Squid/var/log/squid/access.log readable_time

追記したら、メモ帳を保存して終了。

Squidに認識させるため、Powershellの管理者権限で停止・起動

net stop "Squid for Windows"
.\squid.exe -z
net start "Squid for Windows"
.\squid.exe -k reconfigure

これでプロキシサーバがポート3128で稼働します。
プロキシサーバを起動したので、パソコンのプロキシを127.0.0.1:3128で設定します。

Ngrokの使い方２(Squidのプロキシサーバを公開)
Squidの設定ファイル(squid.conf)は、http_port 3128となっているので、ポート3128を使います。
Windows Firewall ディフェンダーとセキュリティソフトでポート3128を開きます。
SquidプロキシはTCPベースのプロトコルで動作するため、TCPトンネルを作成する必要があります。
grok tcpコマンドで、TCPトラフィックをトンネルします。
Ngrokを使ってTCPトンネルを作成し、プロキシサーバを公開します。

ngrok tcp 3128

表示されたURL（"tcp://0.tcp.jp.ngrok.io:????"）が外部から見た私のプロキシサーバのアドレスになります。

YouTube字幕取得APIの実装
プロキシサーバを介してYouTubeTranscriptApiを利用するためのコードは以下です：

transcript = YouTubeTranscriptApi.get_transcript(
    video_id, 
    languages=['en'], 
    proxies={"https": "tcp://0.tcp.jp.ngrok.io:????"}
)

この方法により、自宅のプロキシサーバを通じてYouTubeの字幕を取得することが可能になりました。

GitHubでソースコードを公開していますので、興味がある方はぜひご覧ください
https://github.com/sinzy0925/vercel-youtube-search

インスタグラムに、毎日やったことを投稿してます。
こちらの件に関する内容は、以下です。（笑笑）
https://www.instagram.com/p/DBOftGBzYUw/
https://www.instagram.com/p/DBRFtYjTmUN/
https://www.instagram.com/p/DBTd4gUzBeu/
https://www.instagram.com/p/DBWLrMAThjm/
https://www.instagram.com/p/DBYyqsYSjwe/