はじめに
こちらで作成した学習記録アプリの続きです。
今回は、主にSupabase・アプリのデプロイ・CI/CDに取り組みました。
アプリ画面
前回と比べて、styled-componentで少しだけスタイリングしています。
機能一覧
- 学習内容と学習時間の入力
- 学習時間の記録の表示
- 学習時間の合計の表示
- 学習記録の削除 ← NEW
リポジトリ
工夫したこと・大変だったこと
コンポーネントの分割
Udemyの講座でAtomic Designについて触れていて、本アプリにも取り入れてみました。
ただし、templateについては本アプリでは不要と考え、省略しています。
動画を見て理解したつもりでしたが、実際に自分でやってみようと思うと、moleculesとorganismsの判別が難しいなと感じました。
Github Actionsを用いた CD
公式ドキュメントや記事を見ながら何をしているのか確認しながら進めていきましたが、Firebaseへのデプロイのフローの理解とエラー解決にかなりの時間を費やしました。
特に時間を費やしたのが、
- Firebaseの認証周りの理解
- supabaseUrl is required.というエラーの解決
でした。
下記に詳しく記述します。
Firebaseの認証周りの理解
こちらの記事を参考に進めていたのですが、何故 firebase loginをしないでログインできているのかや事前にbase64でエンコードして、認証時にデコードしているのかを理解することに時間がかかりました。
Firebaseの認証については、npmのReadmeでGOOGLE_APPLICATION_CREDENTIALSを利用して認証できることが分かりました。
公式のドキュメントやREADMEを見る癖をつけるようにします。
base64でエンコードしていたのは、こちらの記事からセキュリティという理由というよりも、フォーマットエラーが起きるが含まれていて、エラーを起こす可能性があるためという結論に至りました。
supabaseUrl is required
secretsをGithubに登録しているはずなのに、supabaseUrl is requiredというエラーに遭遇しました。
この原因としては、job間でのビルドしたデータの受け渡しができていことでした。
勝手にneedsを指定すれば、データの受け渡しができているものと思い込んでいました。
Github Actionsでのデータの受け渡しには、actions/upload-artifactとactions/download-artifactが必要ということが学べました。
テスト
Jestを用いたテストを初めて書いたのですが、getBy・findBy・queryByの使い分けやfindBy・waitForの違いなど、各メソッドの理解が難しかったです。
特にモック周りのエラーに悩まされ、その中でもjest.mock関連のエラーが頻発しました。
このあたりについては、ドキュメントで勉強しつつ、テストを多く書いていくなどの慣れも必要なのかなと思いました。
また、本アプリのテストコードを書く際に、下記の記事が大変参考になりました。
アプリ作成を通じて成長した点
まずは、SupabaseやFirebaseの基本的な使い方を学ぶことができました。
そして、CI/CDを用いることでデプロイの手間を大幅に削減できることが分かりました。CI/CDの概念自体はしっていましたが、普段SSHでの手動デプロイをしているため、今回で体感でき、感動さえしました。今回は初めてということもあり、かなり躓いてしまいましたが、もっと技術力を磨けばいろいろなことができそうだと思いました。
次に挑戦したい点
ドメインについて意識
JISOUの勉強会でドメインについて、学びました。まだ、自分の中に落とし込み切れていないので、本アプリでは断念しますが、資料や本を読みこんで次のアウトプットに取り入れてみたいです。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼