はじめに
Next.js + Supabase を使ってチーム開発等で使える .env を GitHubリポジトリに紐づけて共有・保存出来るWebアプリ を作成しました。
こちらが デプロイしたアプリケーション になります。
こちらが EnvHub自身のGitHubリポジトリ になります。
V2アップデート後の紹介記事です
V2アップデート後の紹介記事を作成しました！
以下がリンクとなります！
免責事項
このウェブアプリを利用することによって生じるあらゆる損害や損失に対して、一切の責任を負いません
作成した動機
・チーム開発時 にコード共有は GitHub を使うが、envファイルの共有 は チャットツールでのファイル共有 を使っており、envファイル自身も共有できたら良いのにな と思ったからです。
デモ動画
・アップロード側
・ダウンロード側
技術スタック・ライブラリ
1. 基盤側
・Next.js (App Router)
・@supabase/ssr
2. フロントエンド側
・react-dropzone
・react-modal
・react-spinners
・react-toastify
・sharp -> 開発サーバ立ち上げには必要無かったのですが、build時に必要でした。
3. グローバルステート管理
・zustand
4. バックエンド側
・zod
・server-only
頑張ったところ
・ハイドレーションを発生させないよう 出来るだけ サーバコンポーネント に寄せたところというところと
・セキュアにしたくて Supabaseへのアクセス を 全てサーバ側 からにして ロジックを隠している ところを頑張りました。
妥協したところ
個人リポジトリ だけが envファイル共有 となっており、
orgnizationのリポジトリ が envファイル共有 の対象としなかったことです。
これは GitHub REST API の 時間毎の回数制限 と レンダリング時の複数回にわたるデータフェッチがボトルネックになること を危惧したからです。
さいごに
さいごにこの開発のために学習した ライブラリの使い方 を記事にしているのでリンクを張っておきます。