Object Storage Service:インストール

前提条件

• 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にアップグレードするには、アップグレードドキュメントをご参照ください。

• GitHub

• API操作

• 変更ログ

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にインポートする必要があります。

  <!-- Import online -->
  <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.1.min.js"></script>      
  <!-- Import locally -->
  <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({
      // Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Specify the temporary AccessKey pair obtained from STS. The AccessKey pair consists of an AccessKey ID and an AccessKey secret. 
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',
      // Specify the security token obtained from STS. 
      stsToken: 'yourSecurityToken',
      refreshSTSToken: async () => {
      // Obtain temporary access credentials from STS. 
        const info = await fetch('your_sts_server');
        return {
          accessKeyId: info.accessKeyId,
          accessKeySecret: info.accessKeySecret,
          stsToken: info.stsToken
        }
      },
      // Set the time interval of refreshing temporary access credentials. Unit: milliseconds. 
      refreshSTSTokenInterval: 300000,
      // Specify the name of the bucket. 
      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({
      // Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Specify the temporary AccessKey pair obtained from STS. The AccessKey pair consists of an AccessKey ID and an AccessKey secret. 
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',
      // Specify the security token obtained from STS. 
      stsToken: 'yourSecurityToken',
      refreshSTSToken: async () => {
      // Obtain temporary access credentials from the STS that you set up. 
        const info = await fetch('your_sts_server');
        return {
          accessKeyId: info.accessKeyId,
          accessKeySecret: info.accessKeySecret,
          stsToken: info.stsToken
        }
      },
      // Set the time interval at which to refresh the temporary access credentials. Unit: milliseconds. 
      refreshSTSTokenInterval: 300000,
      // Specify the name of the bucket. 
      bucket: 'examplebucket'
  });

使用モード

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

// Create an OSSClient instance. 
const client = new OSS(...);

async function put () {
  try {
    // object specifies the name of the uploaded object. 
    // file specifies the name of the file that you want to upload from the browser. Files of the HTML5 and Blob types are supported. 
    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();                    

// Create an OSSClient instance. 
const client = new OSS(...);

// object specifies the name of the uploaded object. 
// file specifies the name of the file that you want to upload from the browser. Files of the HTML5 and Blob types are supported. 
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);
});