AWS Cloud9
ユーザーガイド

AWS Cloud9 Integrated Development Environment (IDE) で実行中のアプリケーションをプレビューする

IDE 内から AWS Cloud9 IDE を使用して実行中のアプリケーションをプレビューすることができます。

アプリケーションの実行

IDE 内からアプリケーションをプレビューするには、まずポート 80808081、または 8082 を経由して、IP 127.0.0.1localhost、または 0.0.0.0 で HTTP を使用して、AWS Cloud9 development environment で実行している必要があります

注記

ポート 80808081、または 8082 を経由して IP 127.0.0.1localhost、または 0.0.0.0 で HTTP を使用して実行する必要はありません。ただし、IDE から実行中のアプリケーションをプレビューすることはできません。

IP 0.0.0.0 で実行すると、誰でも実行中のアプリケーションにアクセスできる可能性があります。この問題に対処する方法については、以下を参照してください。

特定のポートと IP でアプリケーションを実行するコードを記述するには、アプリケーションのマニュアルを参照してください。

アプリケーションを実行するには、「コードの実行」を参照してください。

この動作をテストするには、たとえば、environment のルートの server.js のような名前のファイルに次の JavaScript コードを追加します。このコードは、次のように Node.js を使用してサーバーを実行します。

var http = require('http'); var fs = require('fs'); var url = require('url'); http.createServer( function (request, response) { var pathname = url.parse(request.url).pathname; console.log("Trying to find '" + pathname.substr(1) + "'..."); fs.readFile(pathname.substr(1), function (err, data) { if (err) { response.writeHead(404, {'Content-Type': 'text/html'}); response.write("ERROR: Cannot find '" + pathname.substr(1) + "'."); console.log("ERROR: Cannot find '" + pathname.substr(1) + "'."); } else { console.log("Found '" + pathname.substr(1) + "'."); response.writeHead(200, {'Content-Type': 'text/html'}); response.write(data.toString()); } response.end(); }); }).listen(8080, 'localhost'); // Or 8081 or 8082 instead of 8080. Or '127.0.0.1' instead of 'localhost'.

または、environment のルートの server.py のような名前のファイルに次の Python コードを追加します。このコードは、次のように Python を使用してサーバーを実行します。

import os import SimpleHTTPServer import SocketServer ip = 'localhost' # Or '127.0.0.1' instead of 'localhost'. port = '8080' # Or '8081' or '8082' instead of '8080'. Handler = SimpleHTTPServer.SimpleHTTPRequestHandler httpd = SocketServer.TCPServer((ip, int(port)), Handler) httpd.serve_forever()

次に、environment のルートの index.html のような名前のファイルに次の HTML コードを追加します。

<html> <head> <title>Hello Home Page</title> </head> <body> <p style="font-family:Arial;color:blue">Hello, World!</p> </body> </html>

アプリケーションプレビュータブでこのファイルの HTML 出力を確認するには、Node.js で server.js を実行するか、Python で server.py ファイルを実行します。次に、以下の手順の指示に従ってプレビューします。[アプリケーションのプレビュー] タブで、URL の末尾に /index.html を追加して、Enter を押します。

実行中のアプリケーションのプレビュー

アプリケーションがすでに実行されている状態で、environment でポート 80808081、または 8082 を経由し、IP 127.0.0.1localhost、または 0.0.0.0 で HTTP を使用し、対応するアプリケーションコードファイルを AWS Cloud9 IDE で開いてアクティブにして、メニューバーで次のいずれかを選択します。

  • [Preview, Preview Running Application (プレビュー、実行中のアプリケーションのプレビュー)]

  • [Tools, Preview, Preview Running Application (ツール、プレビュー、実行中のアプリケーションのプレビュー)]

これにより、environment 内にアプリケーションプレビュータブが開き、アプリケーションの出力がタブに表示されます。

アプリケーションプレビュータブにエラーが表示されるか空白の場合、「アプリケーションプレビュータブにエラーが表示される、または空白になる」にある以下のトラブルシューティングステップを試してください。

他のユーザーが IDE の外で実行中のアプリケーションをプレビューできるようにするには、「実行中のアプリケーションをインターネット経由で共有する」を参照してください。

注記

アプリケーションがまだ実行されていない場合は、アプリケーションプレビュータブにエラーが表示されます。アプリケーションを実行または再起動し、メニューバーのコマンドを再度選択します。

前述のいずれのポートまたは IP 上でもアプリケーションを実行できない場合、またはアプリケーションを同時に複数のポートで実行する必要がある場合 (たとえば、アプリケーションは80803000 のポートで同時に実行する必要があります)、アプリケーションプレビュータブにエラーが表示されるか、または空白になる場合があります。これは、environment 内のアプリケーションプレビュータブが先行するポートと IP でのみ機能し、一度に 1 つのポートでのみ機能するためです。

アプリケーションプレビュータブで URL を他のユーザーと共有することはお勧めしません(URL は https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/ 形式で表示されます。12a34567b8cd9012345ef67abcd890e1 は AWS Cloud9 が environment に割り当てる ID、us-east-2 は environment の AWS リージョンの ID です)。この URL を使用するには、environment の IDE が開いており、アプリケーションが同じウェブブラウザで実行されている必要があります。

IDE のアプリケーションプレビュータブを使用して、または IDE 外の別個のウェブブラウザで、IP 127.0.0.1localhost、または 0.0.0.0 に移動しようとした場合、AWS Cloud9 IDE は、environment に接続されたインスタンスや独自のサーバーに移動しようとする代わりに、デフォルトの組み込み動作としてローカルコンピュータに移動します。

アプリケーションのプレビューの再ロード

アプリケーションプレビュータブで、[Refresh (最新情報に更新)] ボタン (円状の矢印) を選択します。

注記

このコマンドではサーバーを再起動されません。アプリケーションプレビュータブの内容が更新されるだけです。

アプリケーションプレビュータイプの変更

アプリケーションプレビュータブのプレビュータイプリストで、次のいずれかを選択します。

  • [ブラウザ]: ウェブブラウザ形式で出力をプレビューします。

  • [Raw Content (UTF-8) (未加工コンテンツ (UTF-8))]: Unicode Transformation Format 8-bit (UTF-8) 形式で出力をプレビューします (該当する場合)。

  • [Markdown]: Markdown 形式で出力をプレビューします (該当する場合)。

別のウェブブラウザのタブでアプリケーションプレビューを開く

アプリケーションプレビュータブで、[Pop Out Into New Window (新しいウィンドウで開く)] をクリックします。

注記

アプリケーションのプレビューは、AWS Cloud9 IDE が同じウェブブラウザの少なくとも 1 つの他のタブでも実行されていない限り、別のウェブブラウザタブに表示されません。

別のプレビュー URL に切り替える

アプリケーションプレビュータブで、アドレスバーに別の URL を入力します。アドレスバーは [Refresh (最新の情報に更新)] ボタンとプレビュータイプリストの間にあります。

実行中のアプリケーションをインターネット経由で共有する

実行中のアプリケーションをプレビューした後、インターネット経由で他の人が利用できるようにすることができます。

これを行うには、Amazon EC2 インスタンスが environment に接続されている場合は、次の手順を実行します。それ以外の場合は、サーバーのドキュメントを参照してください。

ステップ 1: インスタンスの ID と IP アドレスを取得する

このステップでは、environment に接続された Amazon EC2 インスタンスのインスタンス ID およびパブリック IP アドレスを記録します。着信アプリケーションリクエストを許可するには、後のステップでインスタンス ID が必要になります。次に、パブリック IP アドレスを他のユーザーに与えて、実行中のアプリケーションにアクセスできるようにします。

  1. Amazon EC2 インスタンスの ID を取得します。これを取得するには、次のいずれかを実行します。

    • environment の AWS Cloud9 IDE ターミナルセッションで、次のコマンドを実行して Amazon EC2 インスタンスの ID を取得します。

      curl http://169.254.169.254/latest/meta-data/instance-id

      インスタンスの ID は i-12a3b456c789d0123 のようになります。このインスタンス ID を書き留めます。

    • environment の IDE でメニューバーのユーザーアイコンを選択し、[Manage EC2 Instance (EC2 インスタンスの管理)] を選択します。

      AWS Cloud9 IDE からインスタンスを管理することを選択する

      表示される Amazon EC2 コンソールで、[Instance ID (インスタンス ID)] 列に表示されるインスタンス ID を書き留めます。インスタンスの ID は i-12a3b456c789d0123 のようになります。

  2. Amazon EC2 インスタンスのパブリック IP アドレスを取得します。これを取得するには、次のいずれかを実行します。

    • environment の IDE で、メニューバーの [共有] を選択します。[Share this environment (この環境を共有)] ダイアログボックスで、[アプリケーション] ボックスのパブリック IP アドレスを書き留めます。パブリック IP アドレスは 192.0.2.0 のようになります。

    • environment の IDE のターミナルセッションで、次のコマンドを実行して Amazon EC2 インスタンスのパブリック IP アドレスを取得します。

      curl http://169.254.169.254/latest/meta-data/public-ipv4

      パブリック IP アドレスは 192.0.2.0 のようになります。このパブリック IP アドレスをメモします。

    • environment の IDE でメニューバーのユーザーアイコンを選択し、[Manage EC2 Instance (EC2 インスタンスの管理)] を選択します。表示される Amazon EC2 コンソールの [説明] タブで、[IPv4 パブリック IP] フィールドのパブリック IP アドレスを書き留めます。パブリック IP アドレスは 192.0.2.0 のようになります。

    注記

    インスタンスのパブリック IP アドレスは、インスタンスが再起動されると変更される可能性があります。この IP アドレスが変更されないようにするには、Elastic IP アドレスを割り当てて、そのアドレスを実行中のインスタンスに割り当てます。手順については、『Amazon EC2 User Guide for Linux Instances』の「Elastic IP アドレスの割り当て」および「Elastic IP アドレスを実行中のインスタンスに関連付ける」を参照してください。また、Elastic IP アドレスを割り当てると、AWS アカウントに請求が発生する可能性があります。詳細については、Amazon EC2 料金表を参照してください。

ステップ 2: インスタンスのセキュリティグループを設定する

このステップでは、Amazon EC2 コンソールを使用して environment に接続されているインスタンスの Amazon EC2 セキュリティグループを設定し、ポート 8080、8081、または 8082 を経由して HTTP リクエストの受信を許可します。

注記

ポート 80808081、または 8082 経由で HTTP を使用して実行する必要はありません。別のプロトコルまたはポート上で実行している場合は、このステップでこれを置き換えてください。「実行中のアプリケーションのプレビュー」で説明されているように、ポートと IP のいずれかで HTTP を使用して実行に戻るまで、IDE 内から実行中のアプリケーションをプレビューすることはできません。

追加のセキュリティレイヤーを設定することも可能ですが、ネットワークアクセスコントロールリスト (ACL) は、サブネットの Virtual Private Cloud (VPC) 内でインスタンスを使用することができます。セキュリティグループとネットワーク ACL の詳細については、以下を参照してください。

  1. environment の IDE でメニューバーのユーザーアイコンを選択し、[Manage EC2 Instance (EC2 インスタンスの管理)] を選択します。次に、この手順のステップ 3 にスキップします。

  2. [Manage EC2 Instance (EC2 インスタンスの管理)] またはその他のステップでエラーが表示される場合は、AWS アカウントの IAM 管理者ユーザーの認証情報を使用して Amazon EC2 コンソールにサインインしてから、次の手順を実行することをお勧めします。これを実行できない場合は、AWS アカウントの管理者に確認してください。

    1. AWS マネジメントコンソールにサインインして、まだサインインしていない場合、https://console.aws.amazon.com

    2. Amazon EC2 コンソールを開きます。これを行うには、AWS ナビゲーションバーで、[サービス] を選択します。次に、[EC2] を選択します。

    3. AWS ナビゲーションバーで、environment が存在する AWS リージョンを選択します。

    4. [EC2 ダッシュボード] が表示されている場合は、[実行中のインスタンス] を選択します。表示されていない場合、サービスナビゲーションペインで [インスタンス] が展開されていない場合は、それを展開してから [インスタンス] を選択します。

    5. インスタンスのリストで、[インスタンス ID] が前にメモしたインスタンス ID と一致するインスタンスを選択します。

  3. インスタンスの [Description (説明)] タブで、[セキュリティグループ] の横のセキュリティグループリンクをクリックします。

  4. セキュリティグループを表示した状態で、[インバウンド] タブを確認します。[タイプ] が [Custom TCP Rule (カスタム TCP ルール)]、[ポート範囲] が [8080]、[8081] または [8082] に設定されているルールがすでに存在する場合は、[キャンセル] を選択して、「ステップ 3: インスタンスのサブネットをセットアップする」にスキップします。それ以外の場合は、[編集] を選択します。

  5. [Edit inbound rules (インバウンドのルールの編集)] ダイアログボックスで、[Add Rule (ルールの追加)] をクリックします。

  6. [Type] で [Custom TCP Rule] を選択します。

  7. [ポート範囲] で 80808081、または 8082 と入力します。

  8. [ソース] では、[任意の場所] を選択します。

    注記

    [ソース] で [任意の場所] を選択すると、任意の IP アドレスから送信されるリクエストを許可します。これを特定の IP アドレスに制限するには、[カスタム] を選択し、IP アドレス範囲を入力するか、[マイ IP] を選択して自分の IP アドレスからのリクエストのみに制限します。

  9. [Save] を選択します。

ステップ 3: インスタンスのサブネットをセットアップする

このステップでは、Amazon EC2 および Amazon Virtual Private Cloud (Amazon VPC) コンソールを使用して、environment に接続されている Amazon EC2 インスタンスのサブネットを設定し、ポート 8080、8081、または 8082 を経由して HTTP リクエストを受信できるようにします。

注記

ポート 80808081、または 8082 経由で HTTP を使用して実行する必要はありません。別のプロトコルまたはポート上で実行している場合は、このステップでこれを置き換えてください。「実行中のアプリケーションのプレビュー」で説明されているように、ポートと IP で HTTP を使用して実行に戻るまで、IDE 内から実行中のアプリケーションをプレビューすることはできません。

このステップでは、インスタンスが使用できる Amazon VPC 内のサブネットに対してネットワーク ACL を設定する方法について説明します。このステップは必須ではありません。ただし、セキュリティグループを使用するだけの場合と比べて、セキュリティレイヤーが追加されます。ネットワーク ACL の詳細については、以下を参照してください。

  1. 前のステップから Amazon EC2 コンソールが既に開いている状態で、サービスナビゲーションペインで、[インスタンス] が展開されていない場合は展開して、[インスタンス] を選択します。

  2. インスタンスのリストで、[インスタンス ID] が前にメモしたインスタンス ID と一致するインスタンスを選択します。

  3. インスタンスの [Description (説明)] タブで [サブネット ID] の値を書き留めます。subnet-1fab8aEX に似たものになるはずです。

  4. Amazon VPC コンソールを開きます。これを行うには、AWS ナビゲーションバーで、[サービス] を選択します。次に、[VPC] を選択します。

    このステップでは、AWS アカウントの IAM 管理者ユーザーの認証情報を使用して Amazon VPC コンソールにサインインすることをお勧めします。これを実行できない場合は、AWS アカウントの管理者に確認してください。

  5. [VPC ダッシュボード] が表示されている場合は、[サブネット] を選択します。それ以外の場合は、サービスナビゲーションペインで [サブネット] を選択します。

  6. サブネットのリストで、[サブネット ID] が前にメモしたサブネット値と一致するサブネットを選択します。

  7. [概要] タブで、[ネットワーク ACL] の横にあるネットワーク ACL のリンクを選択します。

  8. ネットワーク ACL の一覧で、ネットワーク ACL を選択します(ネットワーク ACL は 1 つしかありません)。

  9. [インバウンドのルール] タブで、ネットワーク ACL を確認します。[タイプ] が [HTTP* (8080)]、[HTTP* (8081)]、または [HTTP* (8082)] に設定されているルールがすでに存在する場合は、「ステップ 4: 実行中のアプリケーションの IP を変更する」にスキップします。それ以外の場合は、[編集] を選択します。

  10. [別のルールの追加] を選択します。

  11. [Rule # (実行 #)] では、ルールの番号を入力します (200 など)。

  12. [Type] で [Custom TCP Rule] を選択します。

  13. [ポート範囲] で 80808081、または 8082 と入力します。

  14. [Source (ソース)] には、受信リクエストを許可する IP アドレスの範囲を入力します。たとえば、任意の IP アドレスからのリクエストを許可するには、「0.0.0.0/0」と入力します。

  15. [Allow/Deny (許可/拒否)] を [ALLOW (許可)] に設定して、[保存] を選択します。

ステップ 4: 実行中のアプリケーションの IP を変更する

コードで、使用する IP 127.0.0.1localhost、または 0.0.0.0 から切り替えて、このセクションの前のステップで指定した IP アドレスを使用します。これらの新しい IP を使用するには、すでにそれが実行されている場合はアプリケーションを停止してから、アプリケーションを再実行します。

注記

実行中のアプリケーションのプレビュー」で説明されているように、ポートと IP のいずれかで HTTP を使用して実行に戻るまで、IDE 内から実行中のアプリケーションをプレビューすることはできません。

ステップ 5: 実行中のアプリケーションの URL を共有する

アプリケーションが動作している状態で、以前にメモしたパブリック IP アドレスを他のユーザーに知らせます。必ず正しいプロトコルで URL を開始し、そのプロトコルのデフォルトでない場合はポート番号を追加してください (たとえば、ポート 8080 で HTTP を使用する場合は http://192.0.2.0:8080/index.html)。

この結果表示されるウェブブラウザタブにエラーが表示されるか、タブが空白の場合、「実行中のアプリケーションを IDE の外部で表示できない」で以下のトラブルシューティングタブを試します。

注記

インスタンスのパブリック IP アドレスは、インスタンスが再起動されると変更される可能性があります。この IP アドレスが変更されないようにするには、Elastic IP アドレスを割り当てて、そのアドレスを実行中のインスタンスに割り当てます。手順については、『Amazon EC2 User Guide for Linux Instances』の「Elastic IP アドレスの割り当て」および「Elastic IP アドレスを実行中のインスタンスに関連付ける」を参照してください。また、Elastic IP アドレスを割り当てると、AWS アカウントに請求が発生する可能性があります。詳細については、Amazon EC2 料金表を参照してください。

ポート 80808081、または 8082 経由で HTTP を使用して実行する必要はありません。ただし、「実行中のアプリケーションのプレビュー」で説明されているように、ポートと IP のいずれかで HTTP を使用して実行に戻るまで、IDE 内から実行中のアプリケーションをプレビューすることはできません。

ユーザーが前の URL にリクエストを行い、そのリクエストが要求されたプロトコルまたはポート上のトラフィックをブロックする仮想プライベートネットワーク (VPN) から送信される場合、それらのリクエストは失敗する可能性があります。これらのユーザーは、リクエストされたプロトコルとポートでトラフィックを許可する別のネットワークを使用する必要があります。詳細については、ネットワーク管理者に問い合わせてください。

IDE のアプリケーションプレビュータブで URL を他のユーザーと共有することはお勧めしません(URL は https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/ 形式で表示されます。12a34567b8cd9012345ef67abcd890e1 は AWS Cloud9 が environment に割り当てる ID、us-east-2 は environment の AWS リージョンの ID です)。この URL を使用するには、environment の IDE が開いており、アプリケーションが同じウェブブラウザで実行されている必要があります。