Supabaseから外部のAPIを実行する

記事の目的

この記事では、Supabaseをバックエンドに利用したアプリケーションから外部のAPIを呼び出す方法について、初心者でも理解しやすいようにステップバイステップで解説します。具体的には、SupabaseのEdge Functionsを使い、サーバーサイドで外部APIと通信する実践的な方法を示します。

また、この記事を読むことで、Supabaseを使ったモダンなアプリケーション開発においてよく求められる「外部サービスとの連携」の基礎知識が身につきます。

記事のターゲット

Supabaseをバックエンドとしてアプリケーション開発をしている、または検討している方
アプリケーション内で外部APIを安全かつ効率的に呼び出す方法を知りたい開発者
SupabaseやEdge Functionsについてこれから学ぼうとしている初心者

Supabaseを使った外部API呼び出しの手順（ステップバイステップ）

🚩 Step 1. Supabase Edge Functionsの準備

Supabase Edge Functionsを利用して、外部APIを呼び出す準備を行います。

npm install supabase --global
supabase login
supabase init
supabase functions new call-external-api

🚩 Step 2. 外部API呼び出しコードの実装

作成された call-external-api フォルダの中にある index.ts を以下のように編集します。

Deno.serve(async (req) => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();

    return new Response(JSON.stringify({ data }), {
      headers: { 'Content-Type': 'application/json' },
      status: 200,
    });
  } catch (error) {
    return new Response(JSON.stringify({ error: error.message }), {
      headers: { 'Content-Type': 'application/json' },
      status: 500,
    });
  }
});

🚩 Step 3. ローカルでのテスト

以下のコマンドで関数をローカルでテストします。

supabase functions serve call-external-api

ブラウザまたはHTTPクライアントで http://localhost:54321/functions/v1/call-external-api にアクセスして動作確認をします。

🚩 Step 4. Supabaseへデプロイ

テスト後、問題がなければ以下のコマンドでデプロイします。

supabase functions deploy call-external-api

🚩 Step 5. アプリケーション側から関数を呼び出す

フロントエンドアプリケーションから関数を呼び出すコード例です。

import { createClient } from '@supabase/supabase-js';

const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY');

async function callExternalAPI() {
  const { data, error } = await supabase.functions.invoke('call-external-api');

  if (error) {
    console.error('エラー:', error);
    return;
  }

  console.log('取得したデータ:', data);
}

以上で、Supabaseを使った外部API呼び出しの設定が完了します。