Reactアプリケーションへの Firebase導入 @izuna385

サマリ ● 最近やってたこと ○ 課題意識 ● やったこと ○ https://github.com/izuna385/arxiv-checker にFirebaseを追加する。

最近の課題意識 ● 自身の専門のみで解ける課題が非常に小さいこと ● 自然言語処理だけ出来たとしても、お客様の課題を解くのは難しい ● バックエンド以外の領域に手を広げて、課題解決の手段を広げたい。

自分が今やっていることと、やりたいこと ・バックエンド以外でも課題解決の守備範囲を増やしたい。 frontend backend 業務でやっていること DB

インフラ 自分が今やっていることと、やりたいこと ・バックエンド以外でも課題解決の守備範囲を増やしたい。 frontend やりたいこと backend 業務でやっていること DB

やったこと ● アプリケーション https://github.com/izuna385/arxiv-checker への認証追加 ● バックエンドでarXivを叩いて、データを加えて結果をフロントに返すだけのアプリ。

バックエンド側の処理 ● FastAPIを用いて、内部で論文が扱うタスクと固有表現を抽出 request backend (container) frontend (container) Docker-compose

Firebase導入の理由 ● サービスにAuthenticationを加えたい ● （FastAPIやDjangoでも頑張ればJWTトークン発行やtwitter Authができるらしいが） 認証はさっと終えて、内部のロジック実装を頑張りたい。 ● サーバレスへの心理的ハードルを取っ払いたい。

導入方法 ● Firebase側 ○ 作成手続きを進めるとconfigが表示される。 ○ Authentication を有効にする。 ● アプリケーション側 ○ 今回は認証後にトップページが出るようにReact-routerで制御 ○ npm install firebase ○ configを用いてfirebase側に接続

Firebase側の設定 ● Authenticationを有効にする。

アプリケーション側: packageのインストール ● npm install firebase

configファイルの追加① ● .gitignore に .env.localが存在することを確認する。 ○ create-react-app 時に自動的に書かれる。 ● .env.local に先程のFirebaseに接続するための情報を追記する。 ○ 環境変数として定義するため

configファイルの追加② ● import可能な設定ファイルとなるように firebase.js を環境変数を用いて作成

configファイルのインポート ● Firebase.js を別途設定 ● v8 と v9で設定が違いはまる。 https://firebase.google.com/docs/web/ modular-upgrade

Sign-up画面の作成 ● 必要最低限のフォームのみ

登録 ● 実演

気づき＋今後やりたいこと ● 5分で登録システムを作成することができた。 ● React側での認証情報の保持で挫折してしまい、今回は登録のみしかできなかった。 ● 参考にさせていただいたサイト https://reffect.co.jp/react/react-firebase-auth#Firebase-3