Postman 練習環境を構築し、ハンズオンコンテンツを120%吸収する

はじめに

日々の活動、ご苦労様です!!
先日、Postmanオンラインワークショップ - APIテストスクリプト入門 に参加しました！
説明が丁寧で理解しやすかったのですが、ハンズオンの時間内で扱いきれないインプットもあったので、気軽に試せる環境を欲しいと思い構築・公開してみました。

今回はその構築手順を主とした記事となります。

環境説明

今回の環境はPostmanの練習に集中するため、必要最低限の実装で済ませていますが、既存コードを真似ていただければテーブルやAPIを簡単に追加することが出来ます。

API: Next.js Route Handler
DB: PostgreSQL ( Supabase )
ORM: Prisma

練習用プロジェクトを構築する

Supabase Projectを作成する

まずはSupabaseにログインし、こんな感じでprojectを作成します。
この時のパスワードは後に使用するのでコピーしておいてください。
※無料枠で作れるprojectは2つまでです。
[ サインイン >> All projects >> New project ]

作成完了する画像のような画面が表示されるので、Project URL と API Keyをコピーしておいてください。
後に、.env.local ファイルで使用します。
[ project >> Home ]

Connection Stringには2つのモードがあるのでどちらもコピーします
後に、.env ファイルで使用します。
[ project >> Home >> Project Setting >> Database ]

Next.js プロジェクトをクローンする

既に必要なコードを揃えたプロジェクトを作成しているので下記リンクからクローンしてください
対象リポジトリ：postman_practice repository
対象ブランチ：postman_script_bigginer

その後、packageをinstallします

cd postman_practice
npm i

Prismaでmigration&seedを実行する

1. Supabaseと繋げる必要があるので、環境変数を設定していきます

.env.local

NEXT_PUBLIC_SUPABASE_URL="https://joeqnbfydmempmaebanl.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImpvZXFuYmZ5ZG1lbXBtYWViYW5sIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzIwMjIwMjAsImV4cCI6MjA0NzU5ODAyMH0.xVbFpgRhdc4dIVjW189loxL-lbMR0emDtq0HbF2GECA"

.env

DATABASE_URL="postgresql://postgres.joeqnbfydmempmaebanl:[project作成時のパスワード]@aws-0-ap-northeast-1.pooler.supabase.com:6543/postgres"
DIRECT_URL="postgresql://postgres.joeqnbfydmempmaebanl:[project作成時のパスワード]@aws-0-ap-northeast-1.pooler.supabase.com:5432/postgres"

2. migration & seed 実行

npx prisma migrate dev --name init
npx prisma db seed

3. Supabaseに戻るとデータが挿入されていることが確認できます
[ project >> Table Editor ]

4. Nextに戻り、プロジェクトを起動しておいてください

npm run dev

Postmanに環境変数とコレクションをimportする

Next プロジェクトの utils/postman/test_script にそれぞれのjsonファイルを格納しています。画像のカーソルが当たっているinputにjsonファイルの中身をペーストすればOKです。
なお、コレクションのimportも同様です。

Get リクエストを送信して以下のようなレスポンスが返却されればOKです!!

ハンズオンを復習する

環境は出来上がったので、あとは復習・練習あるのみです！
上記リンクが実際にハンズオン用に用意された資料なので一通りなぞるのが良いかと思います！

参考

終わりに

最後までお読みいただきありがとうございます!!
APIを早く簡単に作りたかったので Next の Route Handler を採用しましたが、正解でした！
普段のプロジェクトで使用機会がほぼなかったので不遇な扱いをしていましたが、こういう機会では最適かもしれませんね

追伸

アドカレ4記事目終わり〜
体験記は1日かかりませんが、試行が必要な記事は相応に時間かかりますね
まだ走ります!