完全無料のDeta Cloudを利用して画像ファイルのアップロード/ダウンロードサイトを作ってみた

# はじめに

Node-RED実行環境としてHerokuの代替え先を探している時に見つけた完全無料のDeta Cloud。

![10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/f61e2072-f46b-66c9-d538-9bed805eeac6.jpeg)

Node-RED実行環境としては利用できなかったが、画像ファイルのアップロード/ダウンロードサイトを作ってみた。

https://qiita.com/kitazaki/items/970a10cbd1059c89aca5

## Deta Cloudとは

完全無料で以下の3つのサービスが提供されている。

- Deta Base: NoSQLデータベース (保存容量は無制限)
- Deta Micros: PythonまたはNode.jsの実行環境 (AWS API Gateway + Lambdaが利用されている)
- Deta Drive: 保存容量は10GB

## 画像のアップロード/ダウンロード

Data MicrosとDeta Driveを使用して画像ファイルのアップロード/ダウンロードサイトを作ってみた。
ほぼドキュメント(チュートリアル)の内容を組み合わせるだけで実装できた。

https://docs.deta.sh/docs/home

1点だけ、画像ファイル＝バイナリファイルをダウンロードするために環境変数の設定が必要だった。

https://docs.deta.sh/docs/common_issues/#nodejs-micros-cannot-serve-binary-files

# 手順

## 1.アカウントの作成

![スクリーンショット 2022-09-19 0.51.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/41a85925-a8b2-792d-6264-f5843e514943.png)

デフォルトのプロジェクトを作成する。
リージョンは「Asia(Singapore)」を選択した。(「Auto」を選択すれば自動で近いリージョンが選択される。)

![11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/252a9bea-db22-dceb-0665-02a784e5d342.jpeg)

## 2.Deta CLIツールのインストール

macOSを例に説明する。

```bash
$ curl -fsSL https://get.deta.dev/cli.sh | sh
```

ホームディレクトリ配下($HOME/.deta/bin)にdetaコマンドがインストールされるので、detaコマンドを使えるように環境変数のPATHに追加する。

## 3.CLIからDeta Cloudへログインする

```bash
$ deta login
```

ブラウザが開くので、Deta Cloudへログインする。
コマンドを実行してSafariが起動した場合はサポートしていないので、ChromeまたはFirefoxでログインする。
ログインが成功すると、$HOME/.deta/tokensにアクセストークンが保存され、detaコマンドが使えるようになる。

## 4.Project Keyの作成

左側のメニューから「Project Key」を選択する。

![13-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/3d661142-9160-b49d-cc1e-54eae631c78b.jpeg)

「Create Key」を選択する。

![13-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/f480e91f-6240-f63a-927a-385cec1e86b1.png)

「Project Key」の情報を保存する。(Deta Driveの操作で必要になります。)

![14-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/d6cf5e1c-73c7-c14b-3c44-d9c09553a22b.png)

## 5.Deta SDKを使用してDeta Driveへ画像ファイルをアップロードする

適当なディレクトリを作成し、画像ファイル(test.jpg)を保存する。
Deta SDKを使用してDeta Driveへ画像ファイルをアップロードする。

```bash
$ mkdir deta && cd deta
$ npm init -y
$ npm install deta
```

index.jsファイルを作成する。("Project Key"の部分に手順4.で作成した値を設定する)

```javascript:index.js
const { Deta } = require("deta");

// Project Keyを設定する
const deta = Deta("Project Key");

// Deta Driveのディレクトリを設定する
const photos = deta.Drive("images");

// test.jpgファイルをアップロードする
photos.put("test.jpg", {path: "./test.jpg"});
```

index.jsを実行すると、Deta Driveのimagesディレクトリにtest.jpgファイルが作成される。

```bash
$ node index.js
```

![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/d8bede6d-7d13-f206-68ea-10ac3e39d485.png)

## 6.画像ファイルをDeta Driveへアップロード/ダウンロードするプログラムを作成する

ドキュメント(チュートリアル)のNode Tutorialを参考にプログラムを作成する。

https://docs.deta.sh/docs/drive/node_tutorial

適当なディレクトリを作成し、Deta SDKをインストールする。

```bash
$ mkdir deta-image-server && cd deta-image-server
$ npm init -y
$ npm install deta
```
チュートリアルに従って、必要なNodeモジュール(ライブラリ)をインストールする。

```bash
$ npm install express express-fileupload 
```

index.jsファイルを作成する。

```javascript:index.js
const { Deta } = require("deta");
const express = require("express");
const upload = require("express-fileupload");

const app = express();

app.use(upload());

// Project Keyを設定する
const deta = Deta("Project Key");

const drive = deta.Drive("images");

app.get('/', (req, res) => {
    res.send(`
    <form action="/upload" enctype="multipart/form-data" method="post">
      <input type="file" name="file">
      <input type="submit" value="Upload">
    </form>`);
});

app.post("/upload", async (req, res) => {
    const name = req.files.file.name;
    const contents = req.files.file.data;
    const img = await drive.put(name, {data: contents});
    res.send(img);
});

app.get("/download/:name", async (req, res) => {
    const name = req.params.name;
    const img = await drive.get(name);
    const buffer = await img.arrayBuffer();
    res.type(name);
    res.send(Buffer.from(buffer));
}); 

app.listen(3000);
module.exports = app;
```

コードはGitHubにも置きます。

https://github.com/kitazaki/deta-image-server

### コードの補足説明

local実行では必要ですが、deta deployでは不要です。

```javascript
app.listen(3000);
```

## 7.ローカル環境で画像ファイルのアップロード/ダウンロードを確認する。

nodeコマンドでindex.jsを実行する。

```bash
$ node index.js
```

ブラウザから http://localhost:3000 へアクセスする。

![スクリーンショット 2022-09-19 1.37.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/19e67805-f6b8-6c12-af54-23b120e7a38a.png)

画像ファイルを選択して、Uploadボタンを押します。
アップロードが完了するとアップロードした画像ファイル名が表示されます。

![スクリーンショット 2022-09-19 1.38.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/9927f8bd-ec14-9bd9-8ae6-5d52304b8d17.png)

アップロードした画像ファイルを確認(ダウンロード)する場合は、http://localhost:3000/download/画像ファイル名 へアクセスします。

![スクリーンショット 2022-09-19 1.41.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/e8fabb7e-6da9-e7fb-4f00-0f22bef7991f.png)

ダッシュボード上でもアップロードした画像ファイルを確認できます。

![スクリーンショット 2022-09-19 1.48.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/99855532-aa53-4001-1f4e-e0cd89d0037b.png)

nodeコマンドを停止する場合は、「Ctrl+C」を押します。

## 8.Deta Microsへデプロイする

初めてデプロイする場合は、「deta new」コマンドを実行します。

```bash
$ deta new
```

index.jsファイルを編集し、2回目以降にデプロイする場合は「deta deploy」コマンドを実行します。

```bash
$ deta deploy
```

ダッシュボード上でデプロイされたインスタンスを確認できます。

![13-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/0635a3de-de04-c5ac-1173-195e7325ed8f.jpeg)

インスタンスを選択すると、アクセス先のURLを確認できます。

![スクリーンショット 2022-09-19 1.54.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/64e257b7-d05a-3384-c53d-de6418b04f02.png)

Visorタブでログを確認する場合は、detaコマンドでVisor機能を有効にする必要があります。

```bash
$ deta visor enable
```

![スクリーンショット 2022-09-19 1.54.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/154351ff-e2f7-244e-e40c-6f69b0a8ec84.png)

## 9.環境変数を設定する。

画像ファイル＝バイナリファイルのアップロードは問題ありませんが、ダウンロードする場合は環境変数の設定が必要です。

https://docs.deta.sh/docs/common_issues/#nodejs-micros-cannot-serve-binary-files

.envファイルを作成します。

```text:.env
BINARY_CONTENT_TYPES=image/*,font/*
```

```bash
$ deta update -e .env
```

## 10.デプロイされたサイトを確認する

手順8.で確認したアクセス先のURLをブラウザで確認します。

![スクリーンショット 2022-09-19 1.57.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/8ca34f3d-2a37-49b0-4f93-f070f4f3e9fa.png)

![スクリーンショット 2022-09-19 2.03.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/99c3031c-ee51-5656-3644-f1dfef7213b5.png)