Reactで作った学習記録アプリをデプロイした

はじめに

Reactを学習して作ったアプリを振り返りながら、アプリ作成を通して学んだことや大変だったことをまとめます。

作ったアプリ

学習内容とその学習時間を記録し、学習時間の合計を可視化できるアプリ

（以前の記事のアプリとは若干異なります）

このアプリを作る前の状態

• supabaseもfirebaseも聞いたことがあるけど使ったことはない
• CI/CDもよく聞くけど正直よくわからない
• .envは「Gitのトラッキングの対象外だよなあ」程度の知識

アプリ作成を通して学んだこと

• supabaseを使ったテーブル作成方法
• CI/CDの仕組み・必要性、仕組みをアプリに組み込む方法
• .envがなぜ必要か、何を記述するか、なぜ.gitignoreに追加するのか

大変だったこと

supabaseとfirebaseを初めて使ったため、使い方とどういうものなのかを習得することが大変でした。使用するソフトウェアが増えるとその分何が原因のエラーなのかを特定することが難しく、解決までに時間がかかりました。
また、.envに環境変数を書いておらず、参照元が見つからないエラーに何度も遭遇しました。
参照元の書き方が全て合っているかをドキュメントと読み、自分のコードを見比べることで解決することができました。
ドキュメントを読んで実装で使うことは日常茶飯事なので苦労しましたが経験して乗り越えることができ、不安や焦りは減ったなと感じました。

CI/CDは仕組みを導入する上で、それぞれの実行したいコマンド・テストの書き方やエラー時の対処に苦戦しました。
特にCDのymlファイルは書く場所が誤っていたり、同じ内容を重複して書いていることがあり、細かなエラーが出ないため正しいか確認することも難しかったです。
他の方のファイルを参考にすることで解消することができました。

おわりに

いろんなエラーに直面し、何日も解決せず焦ったりモチベーションが下がる日もありました。
しかし、調べて解決できそうなものを試して可能性を絞っていくことでなんとかデプロイまで自力で行うことができました！
「どうにかなる！」という自信に繋がったと思います！

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼