AWS Cloud9
ユーザーガイド

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

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

アプリケーションの実行

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

注記

ポート 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 (最新情報に更新)] ボタン (円状の矢印) を選択します。

注記

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

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

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

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

  • [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 (共有)] を選択します。[Share this environment (この環境を共有)] ダイアログボックスで、[Application (アプリケーション)] ボックスのパブリック 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 コンソールの [Description (説明)] タブで、[IPv4 Public IP (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. インスタンスの [説明] タブで、[セキュリティグループ] の横のセキュリティグループリンクをクリックします。

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

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

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

  7. [ポート範囲] に「8080」、「8081」、または「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. インスタンスの [説明] タブで [サブネット 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. [Add another rule] を選択します。

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

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

  13. [ポート範囲] に「8080」、「8081」、または「8082」と入力します。

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

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

ステップ 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 が開いており、アプリケーションが同じウェブブラウザで実行されている必要があります。