AWS Cloud9 の TypeScript サンプル - AWS Cloud9

AWS Cloud9 の TypeScript サンプル

このサンプルでは、AWS Cloud9 開発環境で TypeScript を操作する方法について説明します。

このサンプルを作成すると、AWS アカウントに課金される場合があります。Amazon EC2 や Amazon S3 などのサービスに対して発生する可能性がある料金も含まれます。詳細については、「Amazon EC2 料金表」および「Amazon S3 料金表」を参照してください。

前提条件

このサンプルを使用する前に、設定が次の要件を満たしていることを確認します。

  • 既存の AWS Cloud9 EC2 開発環境が存在している必要があります。このサンプルは、Amazon Linux または Ubuntu Server を実行する Amazon EC2 インスタンスに接続された EC2 環境が既にあることを前提としています。別のタイプの環境またはオペレーティングシステムがある場合、このサンプルの指示を関連ツールを設定する必要がある場合があります。詳細については、「AWS Cloud9 で環境を作成する」を参照してください。

  • 既存の環境に既に AWS Cloud9 IDE が開いています。環境を開くと、AWS Cloud9 によってその環境の IDE がウェブブラウザで開かれます。詳細については、「AWS Cloud9 で環境を開く」を参照してください。

ステップ 1: 必要なツールをインストールする

このステップでは、Node Package Manager(npm) を使用して TypeScript をインストールします。npm をインストールするには、Node Version Manager (nvm) を使用します。nvm がない場合は、このステップでインストールします。

  1. AWS Cloud9 IDE のターミナルセッションで、--version オプションを指定してコマンドライン TypeScript コンパイラーを実行し、TypeScript がインストール済みであるかどうかを確認します。(新しいターミナルセッションを開始するには、メニューバーで、[Window (ウィンドウ)]、[New Terminal (新しいターミナル)]の順に選択します。) 成功すると、出力に TypeScript のバージョン番号が表示されます。TypeScript がインストール済みである場合は、 に進みますステップ 2: コードを追加する

    tsc --version
  2. --version オプションを指定して npm を実行することにより、npm が既にインストールされているかどうかを確認します。成功すると、出力に npm のバージョン番号が表示されます。npm がインストール済みである場合は、この手順のステップ 10 に進み、npm を使用して TypeScript をインストールします。

    npm --version
  3. yum update (Amazon Linux の場合) または apt update (Ubuntu Server の場合) コマンドを実行して、最新のセキュリティ更新プログラムおよびバグ修正がインストールされていることを確認します。

    Amazon Linux の場合:

    sudo yum -y update

    Ubuntu Server の場合:

    sudo apt update
  4. npm をインストールするには、まず、次のコマンドを実行して Node Version Manager (nvm) をダウンロードします(nvm は、Node.js のバージョンをインストールして管理するために役立つシンプルな Bash シェルスクリプトです。詳細は、GitHub ウェブサイトの Node Version Manager を参照してください)。

    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
  5. nvm の使用を開始するには、ターミナルセッションを閉じてもう一度起動するか、~/.bashrc nvm をロードするコマンドを含む ファイルを入手してください。

    . ~/.bashrc
  6. --version オプションを指定して nvm を実行することにより、nvm がインストールされていることを確認します。

    nvm --version
  7. 最新バージョンの Node.js をインストールするには、nvm コマンドを実行します (npm は Node.js に含まれています)。

    nvm install node
  8. Node.js がインストール済みであることを確認するために、--version オプションを指定してコマンドラインバージョンの Node.js を実行します。

    node --version
  9. --version オプションを指定して npm を実行することにより、npm がインストールされていることを確認します。

    npm --version
  10. -g オプションをで npm を実行して、TypeScript ファイルをインストールします。これにより、TypeScript がグローバルパッケージとして 環境にインストールされます。

    npm install -g typescript
  11. --version オプションを指定してコマンドライン TypeScript コンパイラーを実行し、TypeScript がインストール済みであることを確認します。

    tsc --version

ステップ 2: コードを追加する

  1. AWS Cloud9 IDE に hello.ts という名前のファイルを作成します。(メニューバーでファイルを作成するには、ファイルNew File (新しいファイル)を選択します。 ファイルを保存するには、ファイル保存を選択します。)

  2. IDE のターミナルで、hello.ts ファイルと同じディレクトリから npm を実行して @types/node ライブラリをインストールします。

    npm install @types/node

    これにより、node_modules/@types/node ファイルと同じディレクトリに hello.ts フォルダが追加されます。この新しいフォルダには、Node.js の型定義が入ります。これらの定義は、この手順の後半で console.log ファイルに追加する process.argv プロパティと hello.ts プロパティで使用するために TypeScript で必要になります。

  3. 次のコードを hello.ts ファイルに追加します。

    console.log('Hello, World!'); console.log('The sum of 2 and 3 is 5.'); const sum: number = parseInt(process.argv[2], 10) + parseInt(process.argv[3], 10); console.log('The sum of ' + process.argv[2] + ' and ' + process.argv[3] + ' is ' + sum + '.');

ステップ 3: コードを実行する

  1. ターミナルで、hello.ts ファイルと同じディレクトリから TypeScript コンパイラーを実行します。含める hello.ts ファイルと追加のライブラリを指定します。

    tsc hello.ts --lib es6

    TypeScript は、hello.ts ファイルと一連の ECMAScript 6 (ES6) ライブラリファイルを使用して、hello.ts ファイル内の TypeScript コードを、hello.js というファイル内の同等の JavaScript コードに変換します。

  2. [Environment (環境)] ウィンドウで、hello.js ファイルを開きます。

  3. メニューバーで、[Run (実行)]、[Run Configurations (実行設定)]、[New Run Configuration (新しい実行設定)]の順に選択します。

  4. [New] - Id]e ([新規] - アイドル)] タブで、[Runner: Auto (ランナー: 自動)] を選択し、[Node.js] を選択します。

  5. Command (コマンド)] に「hello.js 5 9」と入力します。このコードで、5process.argv[2] を表し、9process.argv[3] を表します (process.argv[0] はランタイム (node) の名前、process.argv[1] はファイル (hello.js) の名前です)。

  6. [Run (実行)] を選択して、出力を比較します。完了したら、[Stop (停止)] を選択します。

    Hello, World! The sum of 2 and 3 is 5. The sum of 5 and 9 is 14.

            AWS Cloud9 IDE でコードを実行した場合の Node.js output
注記

IDE で新しい実行構成を作成する代わりに、ターミナルからコマンド node hello.js 5 9 を実行してこのコードを実行することもできます。

ステップ 4: AWS SDK for JavaScript をインストールして設定する

このサンプルを強化して AWS SDK for JavaScript in Node.js を使用し、Amazon S3 バケットを作成して利用可能なバケットをリストし、その後作成したばかりのバケットを削除します。

このステップでは、AWSSDK for JavaScript in Node.js Node.js をインストールして設定します。SDK では、Amazon S3 などの JavaScript コードからの AWSサービスを JavaScript コードから簡単に操作できます。AWS SDK for JavaScript in Node.js をインストールしたあと、環境に認証情報管理をセットアップする必要があります。これらの認証情報は、SDK が AWS のサービスとやり取りするために必要です。

AWS SDK for JavaScript in Node.js をインストールするには

ステップ 3: コードを実行する」の hello.js ファイルと同じディレクトリから、AWS Cloud9 IDE のターミナルセッションで、npm を実行し、AWS SDK for JavaScript in Node.js をインストールします。

npm install aws-sdk

このコマンドは、ステップ 3: コードを実行する からnode_modules フォルダにいくつかのフォルダを追加します。これらのフォルダには、AWS SDK for JavaScript in Node.js のソースコードと依存関係が含まれています。詳細については、AWS SDK for JavaScript デベロッパーガイドの「SDK for JavaScript のインストール」を参照してください。

環境で認証情報管理を設定するには

AWS SDK for JavaScript in Node.js を使用して AWS のサービスを呼び出すたびに、呼び出しに一連の認証情報を指定する必要があります。これらの認証情報は AWS SDK for JavaScript in Node.js にその呼び出しを行う適切な許可があるかどうかを判別します。認証情報に適切なアクセス権限がない場合は、呼び出しは失敗します。

このステップでは、環境内に認証情報を保存します。これを行うには、AWS Cloud9 の環境から AWS のサービスを呼び出す の手順を実行してから、このトピックに戻ります。

詳細については、AWS SDK for JavaScript デベロッパーガイドの「Setting Credentials in Node.js (Noda.jp に認証情報を設定)」を参照してください。

ステップ 5: AWS SDK コードを追加する

このステップでは、今度は Amazon S3 を操作してバケットを作成し、利用できるバケットのリストを表示した後、作成したバケットを削除するコードをいくつか追加します。このコードは後で実行します。

  1. AWS Cloud9 IDE で、前のステップの hello.js ファイルと同じディレクトリに、s3.ts という名前のファイルを作成します。

  2. AWS Cloud9 IDE のターミナルから、s3.ts ファイルと同じディレクトリで Amazon S3 オペレーションを非同期的に呼び出すコードを有効にします。そのために、 npm を 2 回実行し、TypeScript 用と JavaScript 用の非同期ライブラリをインストールします。

    npm install @types/async # For TypeScript. npm install async # For JavaScript.
  3. 次のコードを s3.ts ファイルに追加します。

    import * as async from 'async'; import * as AWS from 'aws-sdk'; if (process.argv.length < 4) { console.log('Usage: node s3.js <the bucket name> <the AWS Region to use>\n' + 'Example: node s3.js my-test-bucket us-east-2'); process.exit(1); } const AWS = require('aws-sdk'); // To set the AWS credentials and AWS Region. const async = require('async'); // To call AWS operations asynchronously. const s3: AWS.S3 = new AWS.S3({apiVersion: '2006-03-01'}); const bucket_name: string = process.argv[2]; const region: string = process.argv[3]; AWS.config.update({ region: region }); const create_bucket_params: any = { Bucket: bucket_name, CreateBucketConfiguration: { LocationConstraint: region } }; const delete_bucket_params: any = { Bucket: bucket_name }; // List all of your available buckets in this AWS Region. function listMyBuckets(callback): void { s3.listBuckets(function(err, data) { if (err) { } else { console.log("My buckets now are:\n"); for (let i: number = 0; i < data.Buckets.length; i++) { console.log(data.Buckets[i].Name); } } callback(err); }); } // Create a bucket in this AWS Region. function createMyBucket(callback): void { console.log("\nCreating a bucket named '" + bucket_name + "'...\n"); s3.createBucket(create_bucket_params, function(err, data) { if (err) { console.log(err.code + ": " + err.message); } callback(err); }); } // Delete the bucket you just created. function deleteMyBucket(callback): void { console.log("\nDeleting the bucket named '" + bucket_name + "'...\n"); s3.deleteBucket(delete_bucket_params, function(err, data) { if (err) { console.log(err.code + ": " + err.message); } callback(err); }); } // Call the AWS operations in the following order. async.series([ listMyBuckets, createMyBucket, listMyBuckets, deleteMyBucket, listMyBuckets ]);

ステップ 6: AWS SDK コードを実行する

  1. ターミナルで、s3.ts ファイルと同じディレクトリから TypeScript コンパイラーを実行します。含める s3.ts ファイルと追加のライブラリを指定します。

    tsc s3.ts --lib es6

    TypeScript は、s3.ts ファイル、AWS SDK for JavaScript in Node.js、非同期ライブラリ、ECMAScript 6 (ES6) ライブラリファイルのセットを使用して、s3.ts ファイル内の TypeScript コードを、s3.js という名のファイル内の同等の JavaScript コードに変換します。

  2. [Environment (環境)] ウィンドウで、s3.js ファイルを開きます。

  3. メニューバーで、[Run (実行)]、[Run Configurations (実行設定)]、[New Run Configuration (新しい実行設定)]の順に選択します。

  4. [New] - Id]e ([新規] - アイドル)] タブで、[Runner: Auto (ランナー: 自動)] を選択し、[Node.js] を選択します。

  5. [コマンド] に「s3.js YOUR_BUCKET_NAME THE_AWS_REGION 」と入力します。ここで YOUR_BUCKET_NAME は作成して削除するバケットの名前、 THE_AWS_REGION はバケットを作成する先の AWS リージョンの ID です。たとえば、米国東部 (オハイオ) リージョンの場合は、us-east-2 を使用します。その他の ID については、Amazon Web Services 全般リファレンスAmazon Simple Storage Service (Amazon S3)を参照してください。

    注記

    Amazon S3 バケット名は AWS アカウント内で一意であるだけでなく、 AWS で一意である必要があります。

  6. [Run (実行)] を選択して、出力を比較します。完了したら、[Stop (停止)] を選択します。

    My buckets now are: Creating a new bucket named 'my-test-bucket'... My buckets now are: my-test-bucket Deleting the bucket named 'my-test-bucket'... My buckets now are:

ステップ 7: クリーンアップ

このサンプルを使用し終わった後 AWS アカウントで料金が継続的に発生するのを防ぐには、環境を削除する必要があります。手順については、AWS Cloud9 で環境を削除する を参照してください。