前書き

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

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

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

前提条件

このチュートリアルを進めるには、次のものが必要です。

  • DigitalOcean Spaceと、アカウントへのアクセスキーおよびシークレットアクセスキー。 DigitalOceanスペースとAPIキーを作成する方法を読んで、 DigitalOceanアカウント、スペースを作成し、APIキーとシークレットを設定します。

  • Node.jsとnpmがコンピューターにインストールされています。 Node.js Downloadsにアクセスして、オペレーティングシステムに適切なバージョンをインストールできます。

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

クレデンシャルファイルへのアクセスキーの追加

DigitalOcean Spacesはhttps://aws.amazon.com/s3/[Amazon Simple Storage Service(S3)] APIと互換性があり、https://aws.amazon.com/sdk-for-nodeを使用します-js / [Node.jsのJavaScript用AWS SDK]で、作成したスペースに接続します。

最初のステップは、* credentials ファイルを作成して、DigitalOcean Spaceを作成したときに取得したアクセスキーとシークレットアクセスキーを配置することです。 ファイルは、MacおよびLinuxでは +〜/ .aws / credentials + に、Windowsでは + C:\ Users \ USERNAME \ .aws \ credentials + *にあります。 以前にAWS認証情報を保存している場合は、https://aws.amazon.com/blogs/security/a-new-and-standardized-way-to-manage-credentials-in-the-aws-sdks/について読むことができます[詳細なガイダンスについては、複数の資格情報を保持する]。

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

sudo mkdir .aws && touch .aws/credentials

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

資格情報

[default]
aws_access_key_id=
aws_secret_access_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サーバーを実行できます。

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

npm install aws-sdk express multer multer-s3

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

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

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

まず、アプリケーションのパブリックビュー用のファイルを作成しましょう。 これは、ユーザーがフロントエンドで見るものです。 プロジェクトに* 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>

+ 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 `でHTMLの ` form `を作成します。 シンプルなファイルアップロード ` 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つのファイルを使用して、小さなアプリケーションのメインページを構成するアップロードフォームがあり、ユーザー用の成功ページとエラーページがあります。

Express Server環境をセットアップする

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

プロジェクトのルートディレクトリで、 `+ server.js `ファイルを作成します。 上部で、4つの依存関係を ` require()`でロードします。 アプリケーションを ` 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 +`がサーバーのルートに設定されているため、アップロードフォームが表示されます。

image:https://assets.digitalocean.com/articles/eng_javascript/nodejs-spaces/upload-form.png [DigitalOcean Spaces Node.jsアップロードフォーム]

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

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

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

`+ new aws.S3()`を使用してAmazon S3クライアントに接続できます。 DigitalOcean Spacesで使用するには、新しいエンドポイントを設定して、正しい場所に確実にアップロードする必要があります。 この記事の執筆時点では、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 i`に設定すると、ファイルが一般公開されます。これを空白のままにすると、デフォルトでプライベートになり、Webからファイルにアクセスできなくなります。

server.js

...

// Change bucket property to your Space name
const upload = multer({
 storage: multerS3({
   s3: s3,
   bucket: '',
   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 +`ページにリダイレクトされ、ファイルがSpaceにアップロードされます。

以下に、 `+ 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: '',
   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

プロジェクトのルートに移動し、ファイルを選択して、フォームを送信します。 すべてが適切に設定されていれば、成功ページにリダイレクトされ、DigitalOcean Spaceで公開ファイルが利用可能になります。

image:https://assets.digitalocean.com/articles/eng_javascript/nodejs-spaces/nodejs-spaces-success.png [アップロード後の成功確認ページ]

アップロードしたファイルが「+ test.txt 」であると仮定すると、ファイルのURLは「 https://。nyc3.digitaloceanspaces.com / test.txt + `になります。

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

結論

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

https://glitch.com/edit/#!/spaces-node-app?path=README.md:1:0 [プロジェクトのリミックス]で、このDigitalOcean Spaces Node Appのコードをいじることができます。

この種のアプリケーションを運用環境に入れるには、認証などの追加の予防措置を講じる必要がありますが、これはDigitalOcean SpacesでWebアプリを機能させる良い出発点です。 オブジェクトストレージの詳細については、https://www.digitalocean.com/community/tutorials/an-introduction-to-digitalocean-spaces [DigitalOcean Spacesの概要]を参照してください。