Node.jsを使用してファイルをオブジェクトストレージにアップロードする方法
序章
オブジェクトストレージは、オーディオ、画像、テキスト、PDF、その他の種類の非構造化データなどの静的アセットを保存および提供するための一般的でスケーラブルな方法です。 クラウドプロバイダーは、動的なアプリケーションファイルとデータベースを保存するために使用される従来のローカルストレージまたはブロックストレージに加えて、オブジェクトストレージを提供します。 読む
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ファイルを作成します。 以下のコードをファイルに貼り付けます。
{
"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
.
...
<h1>Something went wrong!</h1>
<p>File was not uploaded successfully.</p>
...
に成功メッセージを書く body
の success.html
.
...
<h1>Success!</h1>
<p>File uploaded successfully.</p>
...
の index.html
、HTMLを作成します form
と multipart/form-data
. 簡単なファイルアップロードで構成されます input
と送信ボタン。
...
<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を追加します。
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
.
// Load dependencies
const aws = require('aws-sdk');
const express = require('express');
const multer = require('multer');
const multerS3 = require('multer-s3');
const app = express();
私たちのフロントエンドはにあります public
ディレクトリなので、その構成を依存関係の下に設定します。
...
// Views in public directory
app.use(express.static('public'));
ルーティングします index.html
, success.html
、 と error.html
サーバーのルートを基準にしています。
...
// 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
が使用されますが、使用可能な任意のポートに設定できます。
...
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
、上にスクロールして戻り、定数宣言の下に次のコードを貼り付けます。
...
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からファイルにアクセスできなくなります。
...
// 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()
ファイルの最後にあるメソッド。
...
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
.
// 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の概要を参照してください。