[angular＋ngrx]署名付きURLを使用してS3にマルチパートアップロードを行うサンプルコード
こんにちは、皆さん。優秀なエンジニアです。
今回は、Angularとngrxを使って、S3に署名付きURLを使用してマルチパートアップロードを行う方法についてご紹介します。
S3は、Amazon Web Services（AWS）のオブジェクトストレージサービスであり、多くの企業や開発者にとって重要な役割を果たしています。S3を使うことで、ファイルの保存や取得、バックアップなどを簡単に行うことができます。
また、署名付きURLを使用することで、セキュリティを高めることができます。署名付きURLは、特定のアクション（たとえば、アップロードやダウンロード）に期限を設定し、認証なしでアクセスできなくするためのものです。
それでは、実際にコードを書いてみましょう。
まず、Angularのプロジェクトを作成し、ngrxをインストールします。
```
ng new s3-upload-example
cd s3-upload-example
npm install @ngrx/store
```
次に、必要なライブラリをインストールします。
```
npm install aws-sdk uuid
```
aws-sdkは、AWSのJavaScript用の公式SDKです。uuidは、一意のIDを生成するために使用します。
次に、`src/app/s3.service.ts`というファイルを作成し、以下のようなコードを書きます。
```typescript
import { Injectable } from '@angular/core';
import { v4 as uuid } from 'uuid';
import { environment } from 'src/environments/environment';
import * as AWS from 'aws-sdk';
@Injectable({
providedIn: 'root'
})
export class S3Service {
private s3: AWS.S3;
constructor() {
AWS.config.update({
accessKeyId: environment.accessKeyId,
secretAccessKey: environment.secretAccessKey,
region: environment.region
});
this.s3 = new AWS.S3({ signatureVersion: 'v4' });
}
public async generateSignedUrl(key: string): Promise<string> {
const params = {
Bucket: environment.bucket,
Key: key,
Expires: 60 * 5 // 5分間有効なURLを生成する
};
const url = await this.s3.getSignedUrlPromise('putObject', params);
return url;
}
}
```
このサービスは、環境変数からAWSの接続情報を読み込み、S3オブジェクトを作成します。`generateSignedUrl`メソッドは、指定したキーに対する署名付きURLを生成します。
さらに、`src/app/upload.component.ts`というファイルを作成し、以下のようなコードを書きます。
```typescript
import { Component } from '@angular/core';
import { S3Service } from './s3.service';
@Component({
selector: 'app-upload',
templateUrl: './upload.component.html',
styleUrls: ['./upload.component.css']
})
export class UploadComponent {
public file: File;
public signedUrl: string;
constructor(private s3Service: S3Service) { }
public async onFileSelected(event: any) {
this.file = event.target.files[0];
const key = uuid(); // ランダムなキーを生成
this.signedUrl = await this.s3Service.generateSignedUrl(key);
}
public async onUpload() {
const xhr = new XMLHttpRequest();
xhr.open('PUT', this.signedUrl, true);
xhr.send(this.file);
}
}
```
このコンポーネントでは、ファイルの選択とアップロードの動作を制御します。`onFileSelected`メソッドでファイルが選択されると、生成されたランダムなキーを使って署名付きURLを取得します。そして、`onUpload`メソッドで実際にアップロードを行います。
最後に、`src/app/upload.component.html`というファイルを作成し、以下のようなコードを書きます。
```html
<input type="file" (change)="onFileSelected($event)">
<button (click)="onUpload()" [disabled]="!file || !signedUrl">Upload</button>
```
このコードでは、ファイルの選択とアップロードボタンの表示を行っています。
これで、署名付きURLを使用してS3にマルチパートアップロードを行う準備が整いました。Angularとngrxを使って、簡単にS3へのアップロードを実装することができます。
是非、このサンプルコードを参考にして、開発の効率化を図ってください。
以上が、[angular＋ngrx]署名付きURLを使用してS3にマルチパートアップロードを行うサンプルコードに関するブログ記事の内容でした。
お楽しみください！
優秀なエンジニアでした。
