OSS SDK for Browser.jsをインストールして使用する - Object Storage Service

OSS SDK for Browser.jsを使用すると、Object Storage Service (OSS) のリソースをプログラムで管理できます。たとえば、バケットの管理、オブジェクトのアップロード、オブジェクトのダウンロード、画像の処理などを行うことができます。このトピックでは、OSS SDK for Browser.jsをインストールして使用する方法について説明します。

前提条件

OSSにアクセスするために、Resource Access Management (RAM) ユーザーまたは一時的なアクセス資格情報がSecurity Token Service (STS) で作成されます。
Alibaba CloudアカウントのAccessKeyペアには、すべてのAPI操作に対する権限があります。したがって、セキュリティのためにAlibaba Cloudのベストプラクティスに従うことを推奨します。サービスをサーバーにデプロイする場合、RAMユーザーまたは一時的なアクセス資格情報を使用して、API操作を呼び出したり、ルーチンのO&Mを実行したりできます。サービスをクライアントにデプロイする場合は、一時的なアクセス資格情報を使用してAPI操作を呼び出します。詳細については、「概要」をご参照ください。
クロスオリジンリソース共有 (CORS) ルールが設定されています。
ブラウザを使用してOSSにアクセスするには、次の要件に基づいてCORSルールを設定します。
- ソース: 完全なオリジンURL (例: https://www.aliyun.com) を指定するか、アスタリスク (*) ワイルドカード文字 (例: https:// * .aliyun.com) を含むURLを指定します。
- 許可されたメソッド: 要件に基づいてメソッドを選択します。たとえば、[PUT] を選択してマルチパートアップロードを実行し、[DELETE] を選択してオブジェクトを削除します。
- 許可されたヘッダー: 値を * に設定します。
- 公開ヘッダー: 値をETag、x-oss-request-id、およびx-oss-version-idに設定します。
詳細については、「CORS の設定」をご参照ください。

使用上の注意

OSS SDK for Browser.jsは、BrowserifyとBabelを使用して、ブラウザのコードを生成およびコンパイルします。ただし, ブラウザ环境の制限により, 次の机能はブラウザではサポートされていません。

ストリーミングアップロード: ブラウザでチャンク化されたエンコーディングを設定できません。ストリーミングアップロードの代わりにマルチパートアップロードを使用することを推奨します。
ローカルファイル管理: ローカルファイルシステムはブラウザで管理できません。署名付きURLを使用してオブジェクトをダウンロードすることを推奨します。
OSSは、オリジン間のバケット関連のリクエストをサポートしていません。 OSSコンソールでバケット関連の操作を実行することを推奨します。

OSS SDK for Browser.jsをダウンロードする

Alibaba Cloud公式サイトのドキュメントのデモは、OSS SDK for Browser.js V6.xに基づいています。以前のバージョンのOSS SDK for Browser.jsを使用している場合は、GitHubにアクセスして、V5.xの開発者ガイドをご覧ください。 OSS SDK for Browser.jsをV6.xにアップグレードするには、アップグレードドキュメントをご参照ください。

OSS SDK for Browser.jsのインストール

OSS SDK for Browser.jsは、次のブラウザをサポートしています。
- Internet Explorer V10以降
- Edge
- Google Chrome、Firefox、およびSafariのメジャーバージョン
- メジャーバージョンのAndroid、iOS、およびWindows Phoneのデフォルトのブラウザ

インストール方法

次のいずれかの方法を使用して、OSS SDK for Browser.jsをインストールできます。

ブラウザを使用したOSS SDK for browser. jsのインポート

重要

一部のブラウザは、約束のネイティブサポートを提供しません。この場合、promiseライブラリをインポートする必要があります。たとえば、promise-polyfillをInternet Explorer 10および11にインポートする必要があります。

<!-- オンラインでインポート->
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.1.min.js"></script>
<!-- ローカルにインポート->
<script src="./aliyun-oss-sdk-6.18.1.min.js"></script>

説明

SDKをオンラインでインポートする場合、速度はAlibaba Cloud CDNサーバーの安定性に依存します。 SDKをローカルに、または独自の実装を使用してインポートすることを推奨します。
サンプルプログラムのローカルリソースからSDKをインポートする場合は、サンプルプログラムのパスを基準としたローカルリソースのパスにsrcを設定します。
この例では、OSS SDK 6.18.1が使用されています。その他のバージョンについては、『GitHub』をご参照ください。

次のコードは、OSSオブジェクトの使用方法の例を示しています。

重要

ほとんどの場合、ブラウザではOSS SDK for Browser.jsが使用されます。 AccessKeyペアが公開されないように、STSから取得した一時的なアクセス資格情報を使用してOSSにアクセスすることを推奨します。

一時的なアクセス資格情報は、AccessKeyペアとセキュリティトークンで構成されます。 AccessKey ペアは、AccessKey ID と AccessKey Secret で構成されます。 AssumeRole操作を呼び出すか、さまざまなプログラミング言語のSTS SDKを使用して、一時的なアクセス資格情報を取得できます。詳細については、「STSが提供する一時的な資格情報を使用したOSSへのアクセス」をご参照ください。

<script type="text/Browser.jsscript">
  const client = new OSS({
    // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
    リージョン: 'yourRegion' 、
    // STSから取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
    accessKeyId: 'yourAccessKeyId' 、
    accessKeySecret: 'yourAccessKeySecret' 、
    // STSから取得したセキュリティトークンを指定します。 
    stsToken: 'yourSecurityToken' 、
    refreshSTSToken: async () => {
    // STSから一時的なアクセス資格情報を取得します。 
      const info = await fetch('your_sts_server ');
      return {
        accessKeyId: info.accessKeyId、
        accessKeySecret: info.accessKeySecret、
        stsToken: info.stsToken
      }
    },
    // 一時的なアクセス資格情報を更新する時間間隔を設定します。 単位：ミリ秒。 
    リフレッシュSTokenInterval: 300000、
    // バケットの名前を指定します。 
    bucket: 'examplebucket'
  });
</script>

npmを使用してOSS SDK for Browser.jsのパッケージをインストールする

npm install ali-oss

インストールが完了したら、インポートを使用するか、OSS SDK for Browser.jsを使用する構文を要求できます。ブラウザは、require構文のネイティブサポートを提供しません。そのため、開発環境ではwebpackやbrowserifyなどのパッケージングツールを使用する必要があります。

const OSS = require('ali-OSS ');

const client = new OSS({
    // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
    リージョン: 'yourRegion' 、
    // STSから取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
    accessKeyId: 'yourAccessKeyId' 、
    accessKeySecret: 'yourAccessKeySecret' 、
    // STSから取得したセキュリティトークンを指定します。 
    stsToken: 'yourSecurityToken' 、
    refreshSTSToken: async () => {
    // 設定したSTSから一時的なアクセス資格情報を取得します。 
      const info = await fetch('your_sts_server ');
      return {
        accessKeyId: info.accessKeyId、
        accessKeySecret: info.accessKeySecret、
        stsToken: info.stsToken
      }
    },
    // 一時的なアクセス資格情報を更新する時間間隔を設定します。 単位：ミリ秒。 
    リフレッシュSTokenInterval: 300000、
    // バケットの名前を指定します。 
    bucket: 'examplebucket'
});

使用上の注意

OSS SDK for Browser.jsを使用する場合は、同期モードまたは非同期モードを使用できます。同期モードまたは非同期モードを使用する場合、new OSS() を使用してOSSクライアントを作成します。

同期モード

JavaScript ES7で定義されているasync/awaitメソッドは、非同期操作を同期するために使用されます。

次のコードは、同期モードでオブジェクトをアップロードする方法の例を示しています。

// OSSClientインスタンスを作成します。 
const client = new OSS(...);

async関数put () {
  try {
    // objectは、アップロードされたオブジェクトの名前を指定します。 
    // fileは、ブラウザからアップロードするファイルの名前を指定します。 HTML5およびBlobタイプのファイルがサポートされています。 
    const r1 = await client.put('object', file);
    console.log('put success: % j', r1);
    const r2 = await client.get('object');
    console.log('get success: % j', r2);
  } catch (e) {
    console.error('error: % j', e);
  }
}

put();

非同期モード

非同期操作は、コールバックと同様の方法で実行されます。 API操作は、リクエストのPromiseオブジェクトを返します。 then() メソッドは返された結果を処理するために使用され、catch() メソッドはエラーを処理するために使用されます。

次のコードは、非同期モードでオブジェクトをアップロードする方法の例を示しています。

// OSSClientインスタンスを作成します。 
const client = new OSS(...);

// objectは、アップロードされたオブジェクトの名前を指定します。 
// fileは、ブラウザからアップロードするファイルの名前を指定します。 HTML5およびBlobタイプのファイルがサポートされています。 
client.put('object', file).then(function (r1) {
  console.log('put success: % j', r1);
  return client.get('object');
}).then(function (r2) {
  console.log('get success: % j', r2);
}).catch (関数 (err) {
  console.error('error: % j', err);
});