【個人開発/学生】.envをGitHubリポジトリに紐づけて共有出来る"EnvHub"をアップデートしました。【Next.js + Supabase】

# はじめに
**Next.js + Supabase** を使用して作った **.env** を **GitHubリポジトリに紐づけて共有・保存出来るWebアプリ** である**EnvHub**をアップデートしました。

こちらが **デプロイしたアプリケーション** になります。

https://env-hub-hazel.vercel.app/

こちらが **EnvHubのGitHubリポジトリ** になります。

https://github.com/warabimochi1126/EnvHub

## 技術スタック
主に以下の技術スタックを使用しています。
- **Next.js(App Router)**
- **Supabase**

## 工夫したところ
- `React Server Components`を活用して無駄なハイドレーションを抑えた点
- `SSG`できる部分は`SSG`して静的にビルドされた部分を描画している点
- `SSR`される部分が導線の大元になることからローディングアニメーションを追加した点
- `Supabase(BaaS)`へのアクセスをフロントエンドからではなくバックエンドからのアクセスにした点

## 苦労したところ
- 基本的にはフロントエンドからのアクセスされる事が想定されている`Supabase`へのアクセスをバックエンド経由にしたことで、認証処理を公式ドキュメント通りに進めても上手く行かなかったことに苦労しました。
結果的に`OAuth`の認可コードフローを見ながら、**自分がどこで詰まっているのか**を把握して、対応しました。

- トップ画面に表示している画像スライダーがTypeScriptに対応していなかったため、コード補完されず苦労しました。
結果的に、ライブラリのGitHubリポジトリのIssueから同じ問題を抱えているユーザがフォークして作成したライブラリを使って対応しました。



## アップデート内容
- organizationのリポジトリも共有対象として選択できるようになりました！
    - 添付画像の**組織タブ**をクリックするとorganizationのリポジトリが選択出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/dfdf892c-9fc2-41dc-8a3e-b881d06b7602.png)

- 1度のアップロードにつき1回、コミットを生成出来るようになりました！ 
    - **アップロードを確定する**を押下時に**コミットメッセージ**を入力出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/6673e267-d180-ff65-7928-40ca4b5da542.png)

- コミット単位で過去アップロードしたファイルを遡って取得出来るようになりました！
    - **コミット履歴**からコミットを一つをクリックすると、コミットに紐づいているアップロードしたファイル群が描画されます。
    - ファイル単体での保存、コミットに紐づいたファイル全体の保存どちらも可能です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/b2eeaecb-7f42-b6cd-207e-071879e5179f.png)

- デザインを一新しました！
  - 以下に画面のBefore Afterを載せておきます。
  - モーダル内の描画等の細かい物は載せていないので、ぜひ一度触ってみてください！

**トップ画面**
- Before

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/06ec76d2-cb1b-73e6-88e7-5d886c11cb5e.png)

- After

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/1319b6ba-4e52-2f95-d4ab-5d2aa9805e2b.png)

**ログイン画面**
- Before

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/0a1b17a0-49d3-994b-de3f-601f4618115a.png)

- After

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/4d7a4ded-1bcf-1bbc-6708-99326df9567a.png)

**ファイルアップロード画面**
- Before

![envhub_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/c2532407-10b8-0503-0ef6-f3c6113696cc.png)

- After

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/d92d4e2f-0b7b-21fa-f081-747e0f86e8e4.png)

**ファイルダウンロード画面**

- Before

![envhub_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/7cb49a8b-077b-8f57-a6df-51fa81d97d8a.png)

- After

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/31aebf4c-a358-aff8-2fcd-88ae6c507ecd.png)

## V2アップデートに伴い新しくやってみたこと
- **GitHub Actions**を使った`CI`の導入
PRタイトルが`Conventional Commits`に沿っているか判定する`actions`と`jest`のテストを実行する`actions`を組みました。

`Conventional Commits`に沿っているかを判定する`actions`は概ね満足なんですが、`Danger JS`を起動するために`docker`コンテナを建てていて、それに時間が掛かってしまっているので`docker`コンテナを建てずに実行して時間短縮したいと思っています。

`jest`のテストを実行する`actions`は大満足です。
ただ、テストはあまり書けていないので時間のある時に書きたいです。

`CI`を全く知らない状態から`actions`を組んでみたのですが、ちゃんとやるとかなり開発効率が上がりそうでもっと詳細に学習したいと思いました。

- **Issue**を使ってタスクを管理する
`Issue`を使ってタスクをチケットにして管理し、PR内部でcloseすることでGitHubのみでチケット管理を行っていました。
チケット起票・進捗の見える化が`GitHub`のみで行えてかなり良かったです！
個人開発で行うと自己満感が強かったので、今度はチーム開発で使いたいです。

こんな感じでチケット管理が出来ます。

https://github.com/users/warabimochi1126/projects/5

チケット起票画面はこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/06c7ab8d-df38-b4d1-6bb3-a6e8d14a570e.png)

## V3でやりたいこと
- コマンドラインでのenvファイルの取得・アップロード
`env pull` `env push` のような**コマンド**でenvファイルの取得・アップロードを行えるようにしたいです。

- BEの分離・リファクタリング
現在`BE`部分を`Next.js`の`Route Handlers`と`Server Actions`の併用で実装しています。
この部分を`NestJS`か`Hono`のどちらかに分離して実装したいと思っています。
`NestJS`はデフォルトでコントローラとサービス層が分かれていて、リポジトリパターンの概念を持ち込むことでそのまま実装出来そうだという理由と`DTO`と`class-validator`の使いやすさが選定理由です。
`Hono`は`Cloudflare Workers`にそのままデプロイ出来て格安で運用出来そうだという選定理由です。
`リファクタリング`については処理自体を関数に分けているものの、全てをコントローラから呼んでいる状態でかなり読みづらくなってしまっています。
`BE`の分離によりリポジトリパターンに則った実装にし、読みやすく出来れば良いなと思っています。

- Supabaseからの脱却
現在は`Supabase`という`BaaS`に強く依存したアプリになっており、
具体的には**DB**・**Auth**・**オブジェクトストレージ**の機能を使用しています。
これらを全て**Cloudflare D1**・**Auth.js**・**Cloudflare R2**に乗せ換えたいと思っています。
主に**コスト**が要因です。(R2エグレス料金無料だし無料枠もかなり多いです。)

# さいごに
こちらが **V1デプロイ時に書いた紹介記事** です。

https://qiita.com/warabimochi_26/items/0c86ea1e6dfb84fb1c4a