Node.jsを使用してファイルをオブジェクトストレージにアップロードする方法

序章

オブジェクトストレージは、オーディオ、画像、テキスト、PDF、その他の種類の非構造化データなどの静的アセットを保存および提供するための一般的でスケーラブルな方法です。クラウドプロバイダーは、動的なアプリケーションファイルとデータベースを保存するために使用される従来のローカルストレージまたはブロックストレージに加えて、オブジェクトストレージを提供します。読むオブジェクトストレージとブロックストレージユースケースと2つの違いについて学びます。

Spaces は、DigitalOceanが提供するシンプルなオブジェクトストレージサービスです。コントロールパネルを介して保存されたファイルにログインおよびアップロード、管理、および削除できることに加えて、コマンドラインおよびSpacesAPIを介してDigitalOceanSpaceにアクセスすることもできます。

このチュートリアルでは、ユーザーがWebサイトのフロントエンドでフォームを送信することにより、DigitalOceanSpaceにファイルをアップロードできるようにするNode.jsアプリケーションを作成します。

前提条件

このチュートリアルに従うには、次のものが必要です。

DigitalOcean Spaceと、アカウントへのアクセスキーおよびシークレットアクセスキー。 DigitalOceanスペースとAPIキーを作成する方法を読んで、DigitalOceanアカウントを起動して実行し、スペースを作成し、APIキーとシークレットを設定します。
コンピューターにインストールされているNode.jsとnpm。 Node.js Downloads にアクセスして、オペレーティングシステムに適したバージョンをインストールできます。

これで、DigitalOceanアカウント、アクセスキー付きのスペース、およびNode.jsとnpmがコンピューターにインストールされているはずです。

クレデンシャルファイルにアクセスキーを追加する

DigitalOceanSpacesはAmazonSimple Storage Service（S3） APIと互換性があり、Node.jsのAWS SDKforJavaScriptを使用して作成したSpaceに接続します。

最初のステップは、 credentials ファイルを作成し、DigitalOceanSpaceの作成時に取得したアクセスキーとシークレットアクセスキーを配置することです。このファイルは、MacおよびLinuxの場合は〜/ .aws / credentials に、Windowsの場合は C：\ Users \ USERNAME \ .aws \credentialsにあります。以前にAWSクレデンシャルを保存したことがある場合は、複数のクレデンシャルセットの保持についてお読みください。

コマンドプロンプトを開き、 Users ディレクトリにいることを確認し、管理者のsudoユーザーにアクセスできることを確認し、を使用して.awsディレクトリを作成します]内部のcredentialsファイル。

sudo mkdir .aws && touch .aws/credentials

ファイルを開き、次のコードを中に貼り付けて、your_access_keyとyour_secret_keyをそれぞれのキーに置き換えます。

資格情報

[default]
aws_access_key_id=your_access_key
aws_secret_access_key=your_secret_key

これで、AWS SDKを介したSpacesへのアクセスが認証され、アプリケーションの作成に進むことができます。

Node.jsの依存関係をインストールする

まず、Node.jsアプリケーションを配置するディレクトリを作成し、そのディレクトリに移動します。このデモンストレーションでは、sitesディレクトリのspaces-node-appにプロジェクトを作成します。

mkdir sites/spaces-node-app && cd sites/spaces-node-app

プロジェクトの新しいpackage.jsonファイルを作成します。以下のコードをファイルに貼り付けます。

package.json

{
  "name": "spaces-node-app",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "license": "MIT"
}

これは、アプリケーションの名前、バージョン番号、およびライセンスをリストした基本的なpackage.jsonファイルです。 scriptsフィールドでは、node server.jsの代わりにnpm startと入力して、Node.jsサーバーを実行できます。

npm installコマンドを使用してすべての依存関係をインストールし、その後にプロジェクト内の4つの依存関係の名前を続けます。

npm install aws-sdk express multer multer-s3

このコマンドを実行した後、package.jsonファイルを更新する必要があります。これらの依存関係は、DigitalOcean Spaces APIへの接続、Webサーバーの作成、およびファイルのアップロードの処理に役立ちます。

aws-sdk — AWS SDK for JavaScriptを使用すると、JavaScriptAPIを介してS3にアクセスできます。
express — Expressは、サーバーを迅速かつ効率的にセットアップできるようにするWebフレームワークです。
multer — Multerは、ファイルのアップロードを処理するミドルウェアです。
multer-s3 — Multer S3は、ファイルのアップロードをS3オブジェクトストレージ（この場合はDigitalOcean Spaces）に拡張します。

プロジェクトの場所と依存関係を設定したので、サーバービューとフロントエンドビューを設定できます。

ノート： npm install saves dependencies to the package.json file by default in current versions of Node. If you are running an older version of Node, you will have to add the --save flag to your npm install command to ensure that package.json gets updated.

アプリケーションのフロントエンドを作成する

まず、アプリケーションのパブリックビュー用のファイルを作成しましょう。これは、ユーザーがフロントエンドに表示するものです。 index.html、success.html、およびerror.htmlを使用して、プロジェクトにpublicディレクトリを作成します。これらの3つのファイルはすべて、bodyの内容が異なる、以下のHTMLスケルトンを持ちます。各ファイルに次のコードを記述します。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>DigitalOcean Spaces Tutorial</title>

  <link rel="stylesheet" href="./style.css">
</head>

<body>

  <!-- contents will go here -->

</body>

</html>

error.htmlのbodyにエラーメッセージを書き込んでください。

error.html

...

<h1>Something went wrong!</h1>
<p>File was not uploaded successfully.</p>

...

success.htmlのbodyに成功メッセージを書き込んでください。

success.html

...

<h1>Success!</h1>
<p>File uploaded successfully.</p>

...

index.htmlでは、multipart/form-dataを使用してHTMLformを作成します。シンプルなファイルアップロードinputと送信ボタンで構成されます。

index.html

...

<h1>DigitalOcean Spaces Tutorial</h1>

<p>Please select a file and submit the form to upload an asset to your DigitalOcean Space.</p>

<form method="post" enctype="multipart/form-data" action="/upload">
  <label for="file">Upload a file</label>
  <input type="file" name="upload">
  <input type="submit" class="button">
</form>

...

最後に、style.cssを作成し、アプリケーションを読みやすくするのに十分なCSSを追加しましょう。

style.css

html {
  font-family: sans-serif;
  line-height: 1.5;
  color: #333;
}

body {
  margin: 0 auto;
  max-width: 500px;
}

label,
input {
  display: block;
  margin: 5px 0;
}

これらの3つのファイルを使用して、小さなアプリケーションのメインページを構成するアップロードフォームがあり、ユーザーの成功ページとエラーページがあります。

ExpressServer環境をセットアップする

アプリケーションのフロントエンド用にすべてのファイルを作成しましたが、現在、サーバーをセットアップしたり、それらを表示する方法はありません。 ExpressWebフレームワークを使用してノードサーバーをセットアップします。

プロジェクトのルートディレクトリに、server.jsファイルを作成します。上部に、require()を使用して4つの依存関係をロードします。 expressのappインスタンスを介してアプリケーションをルーティングします。

server.js

// Load dependencies
const aws = require('aws-sdk');
const express = require('express');
const multer = require('multer');
const multerS3 = require('multer-s3');

const app = express();

フロントエンドはpublicディレクトリにあるため、その構成を依存関係の下に設定します。

server.js

...

// Views in public directory
app.use(express.static('public'));

サーバーのルートを基準にして、index.html、success.html、およびerror.htmlをルーティングします。

server.js

...

// Main, error and success views
app.get('/', function (request, response) {
  response.sendFile(__dirname + '/public/index.html');
});

app.get("/success", function (request, response) {
  response.sendFile(__dirname + '/public/success.html');
});

app.get("/error", function (request, response) {
  response.sendFile(__dirname + '/public/error.html');
});

最後に、リッスンするポートをサーバーに通知します。この例では、3001が使用されていますが、使用可能な任意のポートに設定できます。

server.js

...

app.listen(3001, function () {
  console.log('Server listening on port 3001.');
});

server.jsを保存して、サーバーを起動します。これを行うには、node server.jsを実行するか、package.jsonで設定したショートカットであるnpm startを使用します。

npm start

Output> node server.js

Server listening on port 3001.

http://localhost:3001に移動すると、index.htmlがサーバーのルートに設定されているため、アップロードフォームが表示されます。

http://localhost:3001/successおよびhttp://localhost:3001/errorに移動して、これらのページが正しくルーティングされていることを確認することもできます。

Multerを使用してスペースにファイルをアップロードする

サーバー環境が正常に稼働しているので、最後のステップは、フォームをMulterおよびMulter S3と統合して、Spacesにファイルをアップロードすることです。

new aws.S3()を使用してAmazonS3クライアントに接続できます。 DigitalOcean Spacesで使用するには、新しいエンドポイントを設定して、正しい場所にアップロードされるようにする必要があります。執筆時点では、nyc3はスペースで使用できる唯一のリージョンです。

server.jsで、一番上までスクロールして戻り、定数宣言の下に次のコードを貼り付けます。

server.js

...
const app = express();

// Set S3 endpoint to DigitalOcean Spaces
const spacesEndpoint = new aws.Endpoint('nyc3.digitaloceanspaces.com');
const s3 = new aws.S3({
  endpoint: spacesEndpoint
});

multer-s3 ドキュメントの例を使用して、upload関数を作成し、bucketプロパティを一意のスペース名に設定します。 aclをpublic-readに設定すると、ファイルに一般の人がアクセスできるようになります。これを空白のままにすると、デフォルトでプライベートになり、Webからファイルにアクセスできなくなります。

server.js

...

// Change bucket property to your Space name
const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: 'your-space-here',
    acl: 'public-read',
    key: function (request, file, cb) {
      console.log(file);
      cb(null, file.originalname);
    }
  })
}).array('upload', 1);

upload機能が完了しました。最後のステップは、アップロードフォームをコードに接続してファイルを送信し、それに応じてユーザーをルーティングすることです。 server.jsの一番下までスクロールし、このコードをファイルの最後にあるapp.listen()メソッドのすぐ上に貼り付けます。

server.js

...
app.post('/upload', function (request, response, next) {
  upload(request, response, function (error) {
    if (error) {
      console.log(error);
      return response.redirect("/error");
    }
    console.log('File uploaded successfully.');
    response.redirect("/success");
  });
});

ユーザーが[送信]をクリックすると、POSTリクエストは/uploadに送られます。ノードはこのPOSTをリッスンしており、upload()関数を呼び出します。エラーが見つかった場合、条件ステートメントはユーザーを/errorページにリダイレクトします。正常に通過すると、ユーザーは/successページにリダイレクトされ、ファイルがスペースにアップロードされます。

これがserver.jsのコード全体です。

server.js

// Load dependencies
const aws = require('aws-sdk');
const express = require('express');
const multer = require('multer');
const multerS3 = require('multer-s3');

const app = express();

// Set S3 endpoint to DigitalOcean Spaces
const spacesEndpoint = new aws.Endpoint('nyc3.digitaloceanspaces.com');
const s3 = new aws.S3({
  endpoint: spacesEndpoint
});

// Change bucket property to your Space name
const upload = multer({
  storage: multerS3({
    s3: s3,
    bucket: 'your-space-here',
    acl: 'public-read',
    key: function (request, file, cb) {
      console.log(file);
      cb(null, file.originalname);
    }
  })
}).array('upload', 1);

// Views in public directory
app.use(express.static('public'));

// Main, error and success views
app.get('/', function (request, response) {
  response.sendFile(__dirname + '/public/index.html');
});

app.get("/success", function (request, response) {
  response.sendFile(__dirname + '/public/success.html');
});

app.get("/error", function (request, response) {
  response.sendFile(__dirname + '/public/error.html');
});

app.post('/upload', function (request, response, next) {
  upload(request, response, function (error) {
    if (error) {
      console.log(error);
      return response.redirect("/error");
    }
    console.log('File uploaded successfully.');
    response.redirect("/success");
  });
});

app.listen(3001, function () {
  console.log('Server listening on port 3001.');
});

コマンドプロンプトでCONTROL+ Cと入力してノードサーバーを停止し、再起動して新しい変更が適用されていることを確認します。

npm start

プロジェクトのルートに移動し、ファイルを選択して、フォームを送信します。すべてが適切に設定されている場合は、成功ページにリダイレクトされ、DigitalOceanSpaceで公開ファイルを利用できるようになります。

アップロードしたファイルがtest.txtであるとすると、ファイルのURLはhttps://your-space-here.nyc3.digitaloceanspaces.com/test.txtになります。

トランザクションが失敗する一般的な理由は、間違ったクレデンシャル、間違った場所にあるクレデンシャルファイル、または間違ったバケット名です。

結論

おめでとうございます。静的アセットをオブジェクトストレージにアップロードするようにNode.jsとExpressアプリケーションを設定しました。

ここでプロジェクトをリミックスすることで、このDigitalOceanSpacesNodeアプリのコードを試すことができます。

このタイプのアプリケーションを本番環境に移行するには、認証などの追加の予防措置を講じる必要がありますが、これは、WebアプリをDigitalOceanSpacesで機能させるための良い出発点です。オブジェクトストレージの詳細については、DigitalOceanSpacesの概要を参照してください。