More than 1 year has passed since last update.

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

Last updated at 2022-09-30Posted at 2022-09-18

はじめに

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

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

Deta Cloudとは

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

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

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

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

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

手順

1.アカウントの作成

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

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

macOSを例に説明する。

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

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

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

$ deta login

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

4.Project Keyの作成

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

「Create Key」を選択する。

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

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

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

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

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

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ファイルが作成される。

$ node index.js

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

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

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

$ mkdir deta-image-server && cd deta-image-server
$ npm init -y
$ npm install deta

チュートリアルに従って、必要なNodeモジュール(ライブラリ)をインストールする。

$ npm install express express-fileupload

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

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;