LoginSignup
7
9

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-09-18

はじめに

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

10.jpg

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.アカウントの作成

スクリーンショット 2022-09-19 0.51.31.png

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

11.jpg

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」を選択する。

13-1.jpg

「Create Key」を選択する。

13-2.png

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

14-1.png

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

20.png

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;

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

コードの補足説明

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

app.listen(3000);

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

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

$ node index.js

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

スクリーンショット 2022-09-19 1.37.03.png

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

スクリーンショット 2022-09-19 1.38.21.png

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

スクリーンショット 2022-09-19 1.41.07.png

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

スクリーンショット 2022-09-19 1.48.41.png

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

8.Deta Microsへデプロイする

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

$ deta new

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

$ deta deploy

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

13-2.jpg

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

スクリーンショット 2022-09-19 1.54.36.png

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

$ deta visor enable

スクリーンショット 2022-09-19 1.54.06.png

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

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

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

.env
BINARY_CONTENT_TYPES=image/*,font/*
$ deta update -e .env

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

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

スクリーンショット 2022-09-19 1.57.30.png

スクリーンショット 2022-09-19 2.03.38.png

7
9
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
9