/video-chat-app

Primary LanguageTypeScript

video-chat-app

WebRTCを用いたビデオチャットアプリです。
フロントにReact/Next.js、APIサーバーにRust/Actic Webを使用し、
APIランタイムにGraphQLを用いています。

Zennでの紹介記事
https://zenn.dev/inf_e/articles/63e51cd42ca5eb

動作確認

本アプリは画像ファイルのストレージとしてGoogle Cloud Storage(GCS)を使用しています。
backendディレクトリ内.env.devファイルの「BUCKET_NAME」にGCSバケット名を指定します。
また、「Service Account Token Creator」と「Storage Object Admin」のロールを持つサービスアカウントを用意し、
サービスアカウントのJSON形式の鍵ファイルをbackendディレクトリに配置します。
配置したJSONファイル名を.env.devファイルの「SERVICE_ACCOUNT」に指定します。

  • BUCKET_NAME … 画像ストレージとして使用するGCSバケット名
  • SERVICE_ACCOUNT … サービスアカウントの鍵ファイル名

加えて、同.env.devファイルに、メール送信時に使用するSMTPサーバーの以下情報を設定します。

  • MAIL_HOST … SMTPホスト名
  • MAIL_USERNAME … SMTPユーザー名
  • MAIL_PASSWORD … SMTPパスワード

以上でアプリの設定が完了となります。
プロジェクトのルートディレクトリ内の以下ファイルを実行して、開発環境を起動します。

setup.sh or .bat

起動後しばらく時間を置き、
ブラウザから http://localhost:3000 にアクセスして動作確認してください。

使用ポート

  • Actix Web: 8080
  • Redis: 6379
  • MySQL: 3306
  • Next.js: 3000
  • Storybook: 6006

参考