Object Storage Service:OSS Browser.js SDK のインストール

前提条件

• RAM ユーザーまたは STS を使用したアクセス

  Alibaba Cloud アカウントの AccessKey ペアは、すべての API への完全なアクセス権を付与します。セキュリティのベストプラクティスとして、AccessKey ペアを直接使用しないことを強く推奨します。サーバーサイドアプリケーションの場合は、API アクセスおよび日常的な操作に RAM ユーザーまたは STS を使用できます。クライアントサイドアプリケーションの場合は、API アクセスに STS を使用する必要があります。詳細については、「アクセス制御」をご参照ください。

• クロスオリジンリソース共有 (CORS) の設定

  ブラウザから直接 OSS にアクセスする場合は、次のようにバケットの CORS ルールを設定する必要があります。

  • [ソース]：https://www.aliyun.com などの正確なドメイン名、または https://*.aliyun.com のようにワイルドカード文字 (*) を含むドメイン名を指定します。

  • [許可されたメソッド]：ユースケースに基づいてメソッドを選択します。たとえば、マルチパートアップロードには PUT を選択し、オブジェクトを削除するには DELETE を選択します。

  • [許可されたヘッダー]：* に設定します。

  • [公開ヘッダー]：ユースケースに基づいてヘッダーを設定します。たとえば、ETag、x-oss-request-id、および x-oss-version-id を公開する必要がある場合があります。

  

  詳細については、「CORS の設定」をご参照ください。

制限事項

OSS Browser.js SDK は、Browserify と Babel を使用してブラウザ互換コードを生成します。ブラウザ環境の制限により、次の機能はサポートされていません。

• ストリーミングアップロード：ブラウザではチャンクエンコーディングを設定できません。代わりにマルチパートアップロードを使用してください。

• ローカルファイル操作：ブラウザからローカルファイルシステムに直接アクセスすることはできません。オブジェクトをダウンロードするには、署名付き URL を使用してください。

• OSS は、バケット関連のクロスオリジンリクエストをサポートしていません。バケット関連の操作は、コンソールで実行してください。

SDK のダウンロード

公式ドキュメントの例は、SDK v6.x に基づいています。6.x より前のバージョンについては、「5.x 開発ドキュメント」をご参照ください。6.x にアップグレードするには、「アップグレードガイド」をご参照ください。

• GitHub リポジトリ

• API 操作

• ChangeLog

SDK のインストール

• 対応ブラウザ

  • Internet Explorer 10 以降

  • Edge

  • Chrome、Firefox、Safari の主要バージョン

  • Android、iOS、Windows Phone の主要バージョンのデフォルトブラウザ

• インストール方法

  OSS Browser.js SDK は、次のいずれかの方法でインストールできます。

  ブラウザでのインポート

  重要

  Internet Explorer 10 や 11 などの一部のブラウザは、Promise をネイティブにサポートしていません。promise-polyfill などの Promise ポリフィルライブラリを含める必要があります。

  <!-- CDN からインポート -->
  <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.20.0.min.js"></script>      
  <!-- ローカルファイルからインポート -->
  <script src="./aliyun-oss-sdk-6.20.0.min.js"></script>

  説明

  • CDN からのインポートは、CDN サーバーの安定性に依存します。ローカルファイルからのインポートまたは自分でビルドすることを推奨します。

  • ローカルファイルからインポートする場合は、src 属性をファイルの相対パスに設定します。

  • このトピックでは、バージョン 6.20.0 を例として使用しています。その他のバージョンについては、「ali-oss」をご参照ください。

  コード内で OSS オブジェクトを使用します。

  重要

  OSS Browser.js SDK は通常、ブラウザ環境で実行されます。Alibaba Cloud アカウントの AccessKey ペア (AccessKey ID と AccessKey Secret) の漏洩を避けるため、OSS 操作には一時的なアクセス認証情報を使用することを強く推奨します。

  一時的なアクセス認証情報には、一時的な AccessKey ペア (AccessKey ID と AccessKey Secret) とセキュリティトークンが含まれます。一時的なアクセス認証情報は、STS の AssumeRole API を呼び出すか、さまざまなプログラミング言語の STS SDK を使用することで取得できます。STS サービスの構築方法については、「STS が提供する一時的なアクセス認証情報を使用した OSS へのアクセス」をご参照ください。

  <script type="text/Browser.jsscript">
    const client = new OSS({
      // region をバケットが存在するリージョンに設定します。たとえば、バケットが China (Hangzhou) リージョンにある場合は、region を oss-cn-hangzhou に設定します。
      region: 'yourRegion',
      // V4 署名を有効にします。
      authorizationV4: true,
      // STS から取得した一時的な AccessKey ペア (AccessKey ID と AccessKey Secret)。
      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
        }
      },
      // 一時的なアクセス認証情報を更新する間隔 (ミリ秒単位)。
      refreshSTSTokenInterval: 300000,
      // バケット名。
      bucket: 'examplebucket'
    });
  </script>                           

  npm を使用したインストール

  npm install ali-oss

  インストール後、import または require を使用してパッケージをインポートできます。ブラウザは require モジュール形式をネイティブにサポートしていないため、開発環境で webpack や browserify などのバンドラーを使用する必要があります。

  const OSS = require('ali-oss');
  
  const client = new OSS({
      // region をバケットが存在するリージョンに設定します。たとえば、バケットが China (Hangzhou) リージョンにある場合は、region を oss-cn-hangzhou に設定します。
      region: 'yourRegion',
      // V4 署名を有効にします。
      authorizationV4: true,
      // STS から取得した一時的な AccessKey ペア (AccessKey ID と AccessKey Secret)。
      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
        }
      },
      // 一時的なアクセス認証情報を更新する間隔 (ミリ秒単位)。
      refreshSTSTokenInterval: 300000,
      // バケット名。
      bucket: 'examplebucket'
  });

使用モード

OSS Browser.js SDK は、同期および非同期プログラミングモデルをサポートしています。どちらのモデルでも、new OSS() を使用してクライアントインスタンスを作成します。

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

async function put () {
  try {
    // OSS にアップロードするオブジェクトの名前。
    // ブラウザからアップロードするファイル。HTML5 File または 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();                    

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

// OSS にアップロードするオブジェクトの名前。
// ブラウザからアップロードするファイル。HTML5 File または 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(function (err) {
  console.error('error: %j', err);
});