### 目次

1. はじめに
2. 必要なツールとライブラリ
3. 環境構築
   - 3.1 Supabase プロジェクトのセットアップ
   - 3.2 必要なライブラリのインストール
4. コード実装
   - 4.1 ファイルの受信と保存の実装
5. デプロイとテスト
   - 5.1 Supabase Edge Functions のデプロイ
   - 5.2 ファイルアップロードのテスト
6. まとめ

---

## 1. はじめに

Supabaseは、オープンソースのFirebase代替プロジェクトで、データベースや認証管理、ストレージなどを統合的に提供します。Supabase Edge Functionsは、サーバーレスの環境でバックエンドロジックを実行できる機能です。本記事では、Supabase Edge Functionsを使ってファイルを受信し、Supabase Storageに保存する方法について解説します。

## 2. 必要なツールとライブラリ

- Supabase CLI
- Node.js 環境
- Supabase SDK

## 3. 環境構築

### 3.1 Supabase プロジェクトのセットアップ

Supabaseの公式サイトで新しいプロジェクトを作成し、APIキーを取得します。プロジェクトIDとAPIキーは後で使用します。

### 3.2 必要なライブラリのインストール

Supabase CLIをインストールします。Node.jsをインストール済みであることを確認してください。

![img](/mosaic-code.jpg)

Supabaseプロジェクト内に移動し、SupabaseのCLIコマンドを使用して初期化します。

![img](/mosaic-code.jpg)

## 4. コード実装

### 4.1 ファイルの受信と保存の実装

以下のコードは、Supabase Edge Functionsを使用してファイルを受信し、Supabase Storageに保存するためのものです。

![img](/mosaic-code.jpg)

### 解説

- `express-fileupload`を使用してファイルの受信を行います。
- SupabaseのストレージAPIを通じてファイルをアップロードする機能を実装しています。

## 5. デプロイとテスト

### 5.1 Supabase Edge Functions のデプロイ

Supabase CLIを使用してEdge Functionsをデプロイします。

![img](/mosaic-code.jpg)

### 5.2 ファイルアップロードのテスト

ローカルホストでサーバーを起動し、HTTPリクエストを送信してファイルをアップロードし、プロジェクトストレージに正常に保存されているか確認します。

![img](/mosaic-code.jpg)

## 6. まとめ

本記事では、Supabase Edge Functionsを利用してファイルを受信し、Supabase Storageに保存する方法を説明しました。この方法を応用すれば、さまざまなファイル操作をサーバーレス環境で実行できるようになります。ぜひ試してみてください。 [cv:issue_marketplace_engineer]

### 目次

1. はじめに
2. 必要なツールとライブラリ
3. 環境構築
   - 3.1 Supabase プロジェクトのセットアップ
   - 3.2 必要なライブラリのインストール
4. コード実装
   - 4.1 ファイルの受信と保存の実装
5. デプロイとテスト
   - 5.1 Supabase Edge Functions のデプロイ
   - 5.2 ファイルアップロードのテスト
6. まとめ

---

## 1. はじめに

Supabaseは、オープンソースのFirebase代替プロジェクトで、データベースや認証管理、ストレージなどを統合的に提供します。Supabase Edge Functionsは、サーバーレスの環境でバックエンドロジックを実行できる機能です。本記事では、Supabase Edge Functionsを使ってファイルを受信し、Supabase Storageに保存する方法について解説します。

## 2. 必要なツールとライブラリ

- Supabase CLI
- Node.js 環境
- Supabase SDK

## 3. 環境構築

### 3.1 Supabase プロジェクトのセットアップ

Supabaseの公式サイトで新しいプロジェクトを作成し、APIキーを取得します。プロジェクトIDとAPIキーは後で使用します。

### 3.2 必要なライブラリのインストール

Supabase CLIをインストールします。Node.jsをインストール済みであることを確認してください。

```bash
npm install -g supabase
```

Supabaseプロジェクト内に移動し、SupabaseのCLIコマンドを使用して初期化します。

```bash
supabase init
```

## 4. コード実装

### 4.1 ファイルの受信と保存の実装

以下のコードは、Supabase Edge Functionsを使用してファイルを受信し、Supabase Storageに保存するためのものです。

```javascript
const { createClient } = require('@supabase/supabase-js')
const express = require('express')
const fileUpload = require('express-fileupload')

const supabaseUrl = 'https://your-project-id.supabase.co'
const supabaseKey = 'your-anon-key'
const supabase = createClient(supabaseUrl, supabaseKey)

const app = express()

app.use(fileUpload())

app.post('/upload', async (req, res) => {
  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(400).send('No files were uploaded.')
  }

  let sampleFile = req.files.sampleFile
  const { data, error } = await supabase.storage
    .from('uploads')
    .upload(`files/${sampleFile.name}`, sampleFile.data)

  if (error) {
    return res.status(500).send(error.message)
  }

  res.send('File uploaded!')
})

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000')
})
```

### 解説

- `express-fileupload`を使用してファイルの受信を行います。
- SupabaseのストレージAPIを通じてファイルをアップロードする機能を実装しています。

## 5. デプロイとテスト

### 5.1 Supabase Edge Functions のデプロイ

Supabase CLIを使用してEdge Functionsをデプロイします。

```bash
supabase functions deploy upload
```

### 5.2 ファイルアップロードのテスト

ローカルホストでサーバーを起動し、HTTPリクエストを送信してファイルをアップロードし、プロジェクトストレージに正常に保存されているか確認します。

```bash
curl -F 'sampleFile=@/path/to/your/file' http://localhost:3000/upload
```

## 6. まとめ

本記事では、Supabase Edge Functionsを利用してファイルを受信し、Supabase Storageに保存する方法を説明しました。この方法を応用すれば、さまざまなファイル操作をサーバーレス環境で実行できるようになります。ぜひ試してみてください。 

目次

続きを読むには単価診断を受けてください（30秒）