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

投稿日: 2019-11-08 2022-10-15
タグ: Development, DigitalOcean, javascript, Node.js, Object Storage, Solutions

序章

オブジェクトストレージは、オーディオ、画像、テキスト、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 ユーザーに入力し、credentialsファイルを含む.awsディレクトリを作成します。

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 アプリケーションの名前、バージョン番号、およびライセンスをリストしたファイル。 The scripts フィールドに入力すると、Node.jsサーバーを実行できます npm start それ以外の node server.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 依存関係をに保存します package.json Nodeの現在のバージョンではデフォルトでファイル。古いバージョンのNodeを実行している場合は、を追加する必要があります --save あなたにフラグを立てる npm install 次のことを確認するコマンド package.json 更新されます。

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

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

<!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>

エラーメッセージを body の error.html.

error.html

...

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

...

に成功メッセージを書く body の success.html.

success.html

...

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

...

の index.html、HTMLを作成します form と multipart/form-data. 簡単なファイルアップロードで構成されます 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 ファイル。上部に、4つの依存関係をロードします require(). アプリケーションをルーティングします app のインスタンス express.

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、または npm start、設定したショートカット package.json.

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 Spacesで利用できる唯一のリージョンです。

の 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);

The 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の概要を参照してください。

getdocs

13036