www.dextsolution.com
DEXTUPLOAD
X5
menu toggle製品の説明 > NCP Object Storageファイルアップロード

NCP Object Storageファイルアップロード

DEXTUploadX5はNCP(NAVER CLOUD PLATFORM) Object Storageサービスを利用してファイルをアップロードする機能を提供します。

DEXTUploadX5製品がNCP Object Storageのバケットにファイルをアップロードするためには、異なるソース間の通信を許可する必要があるため、バケットにCORS設定をする必要があります。 マルチパートアップロード機能を使用するためには、必ずPUTリクエストメソッドとETag応答ヘッダを許可する必要があり、動作時にはAllowedOriginsプロパティを'*'値で設定しないように注意しなければなりません。

# CORS configuration
{
	"CORSRules": [
		{
			"AllowedHeaders": ["*"],
			"AllowedMethods": ["HEAD", "GET", "PUT", "POST", "DELETE"],
			"AllowedOrigins": ["*"],
			"ExposeHeaders": ["ETag"]
		}
	]
}
DEXTUploadX5とブラウザAWS SDKを使ってアップロードする方法

DEXTUploadX5はNCP Object Storageサービスにファイルを直接アップロードするために内部的にAWS SDKを使います。SDKを使ってアップロードをするためには'リージョン、バケット、アクセスキー、秘密アクセスキー'情報が必要です。以下はその情報を設定するコードです。

// NCPOS方式で設定します。	
dx.setUploadMode("NCPOS");
// 設定オブジェクトの type 属性を 「NON-SECRET」 に設定した後、残りの値を設定します。
dx.setNCPOSUploadConfig({
    type: "NON-SECRET",
    accessKeyId: "ABCD...1234",
    secretAccessKey: "ABCD...1234",
    region: "ap-northeast-2",
    bucket: "abc-bucket"
});

バケットにアップロードされるファイルはキー(key)で区別します。一般的にキー値はファイル名を使いますが、同じ名前のファイル同士が上書きされる問題を解決するために、キー値をもっと具体化する必要があります。 本製品は基本的にキー値をファイル名で使用し、ファイル名以外の形式でキーを設定するためには、makeKeyプロパティにキーを生成する関数を設定すればよいです。

dx.setNCPOSUploadConfig({
    ...
    // キー: コンポーネント名 / ファイル名 
    makeKey: item => `${item.controlId}/${item.name}`
});

* Object Storageはキー値に'/'文字を入れると、まるでフォルダ構造を持ってるかのようにファイルを区別することができます。

NCP Object Storageサービスでファイルをアップロードするのは、アップロード方式をNCPOSに設定することと、setNCPOSUploadConfigを使用して設定を行うだけで、その他の機能はOROFまたはEXTSモードを使用する方法と同じです。

Presigned URLを使ってアップロードする

AWS SDKを使用してブラウザから直接S3サービスにファイルをアップロードする方法は、セキュリティ上の理由から推奨されません。'アクセスキー、秘密アクセスキー'のような情報は外部に公開されてはいけない情報なので、公開された場所での使用は危険です。AWSの認証情報を公開せずにアップロードするためには、バックエンドで事前に署名されたアドレス(presigned url)を生成し、そのアドレスを使ってファイルをアップロードする方法があります。署名されたアドレスは一定時間だけ有効で、アップロードのための権限が内包されている。以下はその情報を設定するコードです。

// NCPOS方式で設定します。	
dx.setUploadMode("NCPOS");
// 設定オブジェクトの type 属性を 「SECRET」 に設定するか、省略します。
dx.setNCPOSUploadConfig({
    //type: "SECRET",
    initURL: "https://domain/path/awss3-upload-init",
    signedURL: "https://domain/path/awss3-upload-geturl",
    completeURL: "https://domain/path/awss3-upload-complete" 
});

initURL、signedURL、completeURLアドレスがすることは下記の通りで、直接実装する必要があります。

  • initURL: アップロード初期化
  • signedURL: Presigned URL生成
  • completeURL: アップロード完了処理

プラットフォームに適したAWS SDKを利用してサーバー側でアップロード過程に必要な段階を実装すると、資格証明書などの情報を公開せず、ファイルアップロード過程だけをDEXTUploadX5が処理するようにすることができます。

Java Web Application環境で使用可能な例が提供されるので、提供された例を参考にして実装するようにします。

  • JavaそしてMavenを使う環境の場合、AWS SDKを取得する方法

    <dependency>
        <groupId>software.amazon.awssdk</groupId>
        <artifactId>s3</artifactId>
        <version>2.x.x</version>
    </dependency>
  • JavaそしてGradleを使ってる環境の場合AWS SDKを取得する方法

    implementation 'software.amazon.awssdk:s3:2.x.x'
特徴
  • DEXTUploadX5はNCP Object Storageサービスでサポートするマルチパートアップロード方式を使用するため、大容量ファイルのアップロードが可能です。
  • ブラウザAWS SDKを使用する場合、ファイルのアップロードを開始する際に、SDKをダウンロードする時間が追加で存在する場合があります。
  • NCP Object Storageでファイルをアップロードする場合、プログレスウィンドウに表示される進行状況が他のアップロード方式に比べて不自然な場合があります。
  • メタデータもアップロードされます。ただし、値はBASE64でエンコードされます。