Zenn
🦚

開発環境の環境変数を管理するプラットフォームを作った

2022/02/06に公開
個人開発
#
環境変数
idea

作ったものと作った理由

作ったやつ
https://envassador.com

デバイス間での環境変数の共有やチーム間での環境変数の共有が面倒だったので作ってみました。

.env.example を cp して値を入れてだったり、何か環境変数を加えたりしたときに .env.exampleにキーを加えたりするのが個人的に煩わしかったので、チーム間、デバイス間で安全にかつ簡単に共有できるものを作りました。

俗に言う f○ck 駆動開発 (俗に言わない)

もちろん他人の環境変数へのアクセスや組織外のアカウントのアクセスはできないようになってるので安心してください。
実際に https://envassador.com/project/enva-dev でこのプロダクト自体の開発用の環境変数を管理しています。皆さんのブラウザからは 404 となっているはずですがおそらくログインしてないのでログイン画面にとんじゃいます。私のアカウントでログインした状態だとこのように映ります。

着想から今に至るまでちょうど 2 ヶ月くらいかかりました。

一応簡単な紹介動画も作ってみたのでこれを見るとイメージしやすいかもです。
https://www.youtube.com/watch?v=WGM3ncb0xIY

機能の紹介

簡単に紹介します。
CLI ありきなのでブラウザの説明は適当です。

ブラウザ

ログインするとヘッダーの右上に+ボタンが出るのでそれを押すとプロジェクトを作成できます。
あとはプロジェクトのページで環境変数を CRUD できます。

このページで自分のプロジェクト一覧が見られます
https://envassador.com/project

CLI

これを使わないと正直旨味がありません。
バイナリをこちらでダウンロードし、解凍、パスを通します。

パスワード

認可が必要なコマンドでは email と cli 用パスワードの入力が求められます。
※ログインする時に必要なパスワードとは別物です。

こちらのページで cli 用のパスワードを取得します。忘れてしまったら再度生成してください。何度でも生成できます。

セットアップ

enva set

プロジェクト名は、環境変数の出力先等を聞かれるので入力していきます。
プロジェクト名と環境変数だけ必須で残りはオプショナルです。

こんな感じの形式になります。

enva.json
{
    "file": ".envrc",
    "project": "sample1",
    "org": "my_org",
    "pre": "echo 'GOOD MORNING!'\nPATH_add ./bin",
    "suf": "echo 'OK'"
}

対応拡張子は .envrc, .json, .yaml(.yml)でそれ以外は .envと同じように key = valueの形式になります。

プロジェクトの開始

init コマンドでプロジェクトを開始できます。もちろんブラウザ上からもできます。

enva init

もしenva.jsonに記載されているプロジェクトが既に存在すればそのプロジェクトにenva.jsonに記載されているファイルから環境変数がインサートされます。

逆にenva.jsonに記載されているプロジェクトがまだ作成されていなければ、プロジェクトを作成するか cli 上で聞かれます。作成するを選択した場合、プロジェクトの作成後、上記と同じようにenva.jsonに記載されているファイルから環境変数がインサートされます。

このコマンドは強力なので既にプロジェクトに環境変数が登録されている場合は使えないようになっています。
ですので、enva.jsonで指定しているプロジェクトが空もしくはプロジェクトがまだない場合のみ有効です。

その他

その他にもありますが長くなっちゃうので控えます。
こちらのページにコマンドの説明があります。
もしくは以下のコマンドで使い方を出力できます。

enva help

技術スタック

細かいテクニックとかも別々に記事にしたい。

API

go

CLI

go

Front

Next.js (typescript)
mui, recoil, swr

セットアップが楽なので next にしました。SSR も SG も使ってません

DB

PostgreSQL

Infra

予算は半分無視して自分への投資だと割り切ってます。
nat gateway が高い 💦

AWS (ECS, Fargate, ECR, RDS, cognito)
Vercel

IaC

Terraform

CI/CD 及び自動化、コード生成等

go + github actions

アーキテクチャ

クリーンアーキテクチャ

その他

sentry

工夫した点

今回は自動化をたくさんしました。
理由としては単に自分が物臭だからです。

API に関しては API に影響するコードが変更されていたら、docker のイメージをビルドして、それを ECR にプッシュしてイメージタグを指定している terraform のコードを更新するところまでやっています。
apply はプルして手動でしています。

他にもバイナリの配布の部分はバージョンアップしたいタイミングでバージョン情報の載った json を編集すると github actions でフックしてバイナリを生成、tar に圧縮し、こちらのページ(https://envassador.com/cli)が勝手に更新されるようにしています。
CLI のコマンドの説明等も基本自動生成にしてます。

今後やること

  • UI のブラッシュアップ
  • 機能の追加、ブラッシュアップ
  • 課金プランの開始 (チーム開発でこそ効果を発揮するので急ぎたい)
  • RDB にあんまりハッスルして欲しくないのと swr を使ってる都合上、ElastiCache とか導入するかも
  • OSS 的にコードを公開するかは迷い中(CLI は優先的に公開してもいいかも)

参考にしたものとか

AWS 系

こちらがわかりやすくて非常に助かりました。
あとは、terraform や aws の公式ドキュメントで大体事足りた
https://y-ohgi.com/introduction-terraform/handson/ecs/

CLI

こちらをフォークして使っています。あとは go の極標準的なパッケージくらいしか使ってません。
https://github.com/joho/godotenv

現職

現職で学ぶことが非常に大きいです。
やっと go と ts である程度まともなコードが書けるようになってきた気がしています。

GitHubで編集を提案

Discussion