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
- GraphQL: https://graphql.org/
- Rust: https://www.rust-lang.org/
- Actix Web: https://actix.rs/
- Async Graphql: https://async-graphql.github.io/async-graphql/en/index.html
- Redis: https://redis.io/
- MySQL: https://www.mysql.com/
- WebRTC API: https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API
- React: https://reactjs.org/
- Next.js: https://nextjs.org/
- Apollo Client (React): https://www.apollographql.com/docs/react/
- Storybook: https://storybook.js.org/