AWS Cloud9統合開発環境 (IDE)で実行中のアプリケーションをプレビュー - AWS Cloud9

AWS Cloud9統合開発環境 (IDE)で実行中のアプリケーションをプレビュー

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

アプリケーションの実行

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

注記

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

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

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

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

注記

以下のコードは、text/html が返されるコンテンツの Content-Type であることを示します。別の形式で、コンテンツを返すため、別の Content-Type を指定してください(CSS ファイルであれば、text/cssなど)。

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'.

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

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

次に、環境ルートの 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 を押します。

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

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

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

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

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

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

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

注記

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

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

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

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

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

アプリケーションプレビュータブで、[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 インスタンスが環境に接続されている場合は、次のステップを実行します。それ以外の場合は、サーバーのドキュメントを参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    注記

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

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

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

注記

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

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

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

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

    1. AWS Management Console (https://console.aws.amazon.com/) にサインインします (まだサインインしていない場合)。

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

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

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

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

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

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

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

  6. Type (タイプ)]で[Custom TCP Rule (カスタム TCP ルール)]を選択します。

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

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

    注記

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

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

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

このステップでは、Amazon EC2 とAmazon Virtual Private Cloud (Amazon VPC) のコンソールを使用して、環境に接続されている 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: 実行中のアプリケーションの URL を共有する に進みます。それ以外の場合は、[編集] を選択します。

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

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

  12. Type (タイプ)]で[Custom TCP Rule (カスタム TCP ルール)]を選択します。

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

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

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

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

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

この結果、ウェブブラウザタブにエラーが表示されない、または何も表示されない場合は、「」のトラブルシューティングステップを試してください実行中のアプリケーションを IDE の外部で表示できない

注記

インスタンスのパブリック IP アドレスは、インスタンスが再起動されると変更される可能性があります。この IP アドレスが変更されないようにするには、Elastic IP アドレスを割り当てて、そのアドレスを実行中のインスタンスに割り当てます。手順については、『Linux インスタンス用 Amazon EC2 ユーザーガイド』の「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 が環境に割り当てる ID、us-east-2 は環境のAWSリージョンの ID です)。この URL を使用するには、環境の IDE が開いており、アプリケーションが同じウェブブラウザで実行されている必要があります。