Firebase-React-App

https://serverlesslt.connpass.com/event/221343/
で発表した資料です。

リポジトリ
https://github.com/izuna385/arxiv-checker

Transcript

1. Reactアプリケーションへの Firebase導入 @izuna385
2. サマリ • 最近やってたこと ◦ 課題意識 • やったこと ◦ https://github.com/izuna385/arxiv-checker にFirebaseを追加する。
3. 最近の課題意識 • 自身の専門のみで解ける課題が非常に小さいこと • 自然言語処理だけ出来たとしても、お客様の課題を解くのは難しい • バックエンド以外の領域に手を広げて、課題解決の手段を広げたい。
4. 自分が今やっていることと、やりたいこと ・バックエンド以外でも課題解決の守備範囲を増やしたい。 frontend backend 業務でやっていること DB
5. インフラ 自分が今やっていることと、やりたいこと ・バックエンド以外でも課題解決の守備範囲を増やしたい。 frontend やりたいこと backend 業務でやっていること DB
6. やったこと • アプリケーション https://github.com/izuna385/arxiv-checker への認証追加 • バックエンドでarXivを叩いて、データを加えて結果をフロントに返すだけのアプリ。
7. バックエンド側の処理 • FastAPIを用いて、内部で論文が扱うタスクと固有表現を抽出 request backend (container) frontend (container) Docker-compose
8. Firebase導入の理由 • サービスにAuthenticationを加えたい • （FastAPIやDjangoでも頑張ればJWTトークン発行やtwitter Authができるらしいが） 認証はさっと終えて、内部のロジック実装を頑張りたい。 • サーバレスへの心理的ハードルを取っ払いたい。
9. 導入方法 • Firebase側 ◦ 作成手続きを進めるとconfigが表示される。 ◦ Authentication を有効にする。 • アプリケーション側 ◦ 今回は認証後にトップページが出るようにReact-routerで制御 ◦ npm install firebase ◦ configを用いてfirebase側に接続
10. Firebase側の設定 • Authenticationを有効にする。
11. アプリケーション側: packageのインストール • npm install firebase
12. configファイルの追加① • .gitignore に .env.localが存在することを確認する。 ◦ create-react-app 時に自動的に書かれる。 • .env.local に先程のFirebaseに接続するための情報を追記する。 ◦ 環境変数として定義するため
13. configファイルの追加② • import可能な設定ファイルとなるように firebase.js を環境変数を用いて作成
14. configファイルのインポート • Firebase.js を別途設定 • v8 と v9で設定が違いはまる。 https://firebase.google.com/docs/web/ modular-upgrade
15. Sign-up画面の作成 • 必要最低限のフォームのみ
16. 登録 • 実演
17. 気づき＋今後やりたいこと • 5分で登録システムを作成することができた。 • React側での認証情報の保持で挫折してしまい、今回は登録のみしかできなかった。 • 参考にさせていただいたサイト https://reffect.co.jp/react/react-firebase-auth#Firebase-3