Zenn
👯‍♂️

共有できるスタブAPIツールを公開してみた

2021/09/20に公開
TypeScript
API
Web
個人開発
blitzjs
tech

個人開発でco-metubというスタブAPIを共有できるGUIツールを作りました。
バックエンドとフロントエンドのチームで、スタブAPIを良い感じに共有したい時にお使いください。

https://github.com/solaoi/co-metub

使い方

インストール方法

Dockerが入った環境であれば、下記コマンドを実行するだけです。
空いてるサーバをスタブAPIサーバにしてしまいましょう。

# 公開したいポートを決めます。
HOST_PORT=8080
# httpで公開するなら、セキュア属性クッキーの無効化をtrueに設定します。
DISABLE_SECURE_COOKIES=false
# あとは、Dockerコマンドを叩くだけです。（SESSION_SECRET_KEYには、任意の値を入れてね）
docker run --init -e SESSION_SECRET_KEY="your random string of at least 32 bytes" \
-e DISABLE_SECURE_COOKIES=$DISABLE_SECURE_COOKIES \
-d -p $HOST_PORT:3000 -v $(pwd)/data:/data ghcr.io/solaoi/co-metub:latest

操作方法

プロジェクトの作成

まずは、スタブAPIを管理するためのプロジェクトを作ります。
プロジェクト一覧を開いて、『ADD』ボタンからプロジェクトを追加します。

プロジェクト名（Name）はお好きに、
BasePathはそのプロジェクトが管理する第一階層のパスとなります。
例えば、http://localhost/foo/barでスタブAPIを公開したい場合は
/fooをBasePathに入力してください。
（※BasePathの末尾にスラッシュは不要です。）

スタブAPIの作成

作成したプロジェクト配下でスタブAPIを作ります。
Stubs右の『ADD』ボタンから、スタブAPIを追加します。

スタブAPI作成ページが開けましたら、各項目を入力していきます。

Pathは第２階層以降を入力します。
例えば、http://localhost/foo/bar/bazでスタブAPIを公開したい場合は
プロジェクトのBasePathに/fooを、スタブのPathに/bar/bazを入力してください。
（※Pathの末尾にスラッシュは不要です。）

Methodでは、受け付けるリクエストの種類を選択してください。
またContentType, StatusCode, Responseには、返却するレスポンスの内容を入力してください。
（※Sleep(seconds)は、0以上の秒数を入力するとAPIのタイムアウト時の挙動を確認できます。）

スタブAPIの利用

スタブAPIの作成が完了すると、プロジェクトのStubs欄に追加したスタブが表示されるようになります。
『COPY-URL』項目にあるボタンから、スタブAPIのURLをコピーして利用していきましょう！
（※今回であれば、http://localhost:8080/api/foo/bar/bazがコピーされます。）

また、スタブAPIの詳細ページからも『COPY URL』ボタンから
スタブAPIのURLをコピーして利用できます。（内容は全く同じです。）

加えて、このスタブAPIの詳細ページではリクエストされた内容についても確認できます。
（直近3件のクエリ、BODY、ヘッダが確認できます。）

使った技術

アプリケーション

今回はサクッと作りたかったので、
React界のRuby on Railsと噂のBlitz.jsを利用しました。
お作法に戸惑いましたが、scaffoldでポンポン出来上がってくのは楽しいですね。

またお手軽に使えるを基準に考え、ファイルベースのSQLiteという選択をしました。
Dockerコマンドを実行したディレクトリに永続化用の/dataがいるので、
よしなにバックアップくださいませ。

  • Blitz.js
    • React
    • Next.js
    • Prisma
    • TypeScript
  • Chakra UI
  • SQLite

CI/CD

GitHubのProプランに何故か加入しているので、活用すべくパイプラインを組みました。

  • GitHub Actions
    • 【定期実行】npm-check-updatesでライブラリの更新があれば、PRを自動作成
    • 【リリース時】GitHub Packages Container registryにイメージをアップロード
    • 【PRやマージ時】CodeQL（脆弱性やコードの品質の可視化）実行
  • GitHub Packages Container registry

まとめ

モノづくりは、やっぱり楽しいですね！
実現したいヴィジョンから、実際に形にまでできるプログラミングって最高だと思います。

とはいえ、目的に応じて必要なこと、諦めることを時としてエンジニアは選択しなければなりません。
というわけでco-metubは、ユーザーの登録機能がある一方、削除はできません。
（プロジェクトが終わればスタブAPIですし、パッと全部消すでしょう。）

またフィードバックなどありましたら、気軽にこの記事でコメントやGitHubでissue立てちゃってください＞＜

Discussion