はじめに
Next.js + Supabase を使ってチーム開発等で使える .env を GitHubリポジトリに紐づけて共有・保存出来るWebアプリ を作成しました。
こちらが デプロイしたアプリケーション になります。
こちらが EnvHub自身のGitHubリポジトリ になります。
セキュリティを犠牲に 実装単純化・レスポンスの速さ を優先しています。
本当に シークレットなキー の共有は行わず、漏れても大丈夫な設定値 の共有等に
お使いください。
免責事項
このウェブアプリを利用することによって生じるあらゆる損害や損失に対して、一切の責任を負いません
私について
・4年制情報系専門学校の3年生
・応用情報技術者・情報処理安全確保支援士取得
Web開発(出来ればバックエンド)のサマーインターンやアルバイト等に繋がれば良いなと思っています。
作成した動機
・チーム開発時 にコード共有は 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へのアクセス を 全てサーバ側 からにして ロジックを隠している ところを頑張りました。
妥協したところ
1.一つ目は 個人リポジトリ だけが envファイル共有 となっており、
orgnizationのリポジトリ が envファイル共有 の対象としなかったことです。
これは GitHub REST API の 時間毎の回数制限 と レンダリング時の複数回にわたるデータフェッチがボトルネックになること を危惧したからです。
2.二つ目は 個人リポジトリ を 更新日時 で ソートした最新100リポジトリ のみを
envファイル共有 の対象としたことです。
これは
GitHub REST API の性質上 1アクセスに対して100リポジトリ までしかデータを返せず、
個人が大量にリポジトリを保持していた場合に
時間毎の回数制限 に引っかかってしまう可能性と
次の100リポジトリがあるかどうか を レスポンスヘッダーによって確認する ので
並列にデータフェッチを行えないため、
レンダリング時の複数回にわたるデータフェッチがボトルネックになること
を危惧したからです。
3.三つ目は セキュア を考えると envファイルのCRUDを行うエンドポイント内で
envファイルと紐づいているリポジトリ が 認証ユーザが保持しているリポジトリ であることを 担保すべき ですが 担保していない ことです。
API側で担保 するならば CRUD毎にデータフェッチが必要 となり、
大量にアクセスした場合に時間毎の回数制限 に引っかかってしまう可能性と
データフェッチの待機時間 が必要となるので
レスポンスが遅くなる ことを危惧したからです。
本来は PostgreSQL の RLS を利用して DB側で担保 したかったのですが、
その場合 リポジトリのID と リポジトリの参加者 を DB側で保持 する必要があり
無料プランのSupabaseでは DBの容量に限りがあるため この方法は採用しませんでした。
さいごに
この記事はWeb開発(出来ればバックエンド)のサマーインターンやアルバイト等に繋がれば良いなと思っています。
下記に私の連絡先を記載しておきます。
(この記事にコメントを付けて頂くのが一番気づきやすいと思います。)
メールアドレス:ecccompsenyou@gmail.com
さいごにこの開発のために学習した ライブラリの使い方 を記事にしているのでリンクを張っておきます。