1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

プログラミングスクール「JISOU」のカリキュラムで
CICDでアプリケーションをデプロイできたのでまとめます

やったこと

  • React + Vite によるフロントエンド開発
  • supabaseでバックエンド(DB)
  • Jestでテスト
  • firebaseでデプロイ
  • github actionsでCICD

Reactやってみた

普段業務でvueで開発してます
Reactの入口だけ触ってみた感じだと
第一印象は結構vueと違うな〜って感じでした
もちろん書き方が色々違うのは当然なんですが
変数の状態が変更されるときに、もう一度コードが上から再評価される仕組みなど
仕組み自体も結構違って、頭の切り替えが大変でした
もう少しReact触ってみたら,VueとReactの比較記事書きたいです

supabaseについて(DBのみ)

めっちゃ楽やん!!!
まずデータベースをGUIでさらって作れて嬉しいし
それをフロントで呼び出して使うのもすっごく簡単
今までrailsでmySQLでDB構築したり
AWSのDynamoDBを使ったことがあるけど
ダントツに楽に構築できた。素晴らしい。

とはいえまだ、単純なgetやpostやdeleteしかやってないので
色々複雑なことをやろうとするとまた別の感想が出てくるのかもしれないけど...
例えば、今開発環境でも本番環境でも同じDBを参照してしまっているので
実際にサービスをリリースしようとしたらこのままじゃ明らかにアウトなので、今後はそこら辺も学んでいきたいです

初学者がとにかくアプリケーションをデプロイしたい、DBにデータ持たせたいって時は
とっても良さそう

Firebaseについて(hostingのみ)

こちらもとっても簡単だった。
ただ、こちらはほとんど参考の手順通りにやってdeployまでやってるだけなので
あんまり理解はできてない感がある

CI/CD

務めている会社でもCI/CDは推奨なんだけども
今開発しているプロダクトではCDが難しい開発環境で、ずっと対応できておらず
具体的な手法は今回初めて学ぶことができた
github actionsによるCI/CDをやってみた結果
やってみるだけなら意外と簡単だった
(.github/workflowの中に手順を書いたymlを置いてpushするだけ)
ymlファイルのベストプラクティスは色々学ばないとかもだけど、それはおいおい

CIなら早速業務でやるように提案してみよかな

まとめ

すごく学びの多い課題だった!
業務がフロントエンド開発なので、やはり普段の学習もそちらにフォーカスが行きがちになっていたので
このカリキュラムで今まで触れたことのないものをたくさん触れられた
一度触れられたらこっちのもんで、あとは遊び倒しながら学んでいきたい

最終的にはすべて自己解決できたけど、もちろん初めてのことには付きもののエラーにはたくさん悩まされた
一つやるごとにエラーが出る...笑
でも、エラーを一つずつ潰して、アプリがきちんと画面に表示されるようになるのはやっぱり楽しい
これだからやめられないぜ!笑

JISOUのメンバー募集中

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか?

気になる方はぜひHPからお願いします👇

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?