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

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

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

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

アプリケーションの実行

IDE 内からアプリケーションをプレビューするには、まず、アプリケーションがAWS Cloud9ポート経由でHTTPを使用する開発環境8080,8081, または8082のIPで127.0.0.1,localhost, または0.0.0.0

注記

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

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

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

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

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

注記

以下のコードは、text/htmlである。Content-Type返されたコンテンツの。別のパラメータを指定してくださいContent-Typeを使用して別の形式でコンテンツを返すようにする (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'.

または、のような名前のファイルに次の Python コードを追加できます。server.py環境のルートにあります。このコードは、次のように 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()

次に、のような名前のファイルに次の HTML コードを追加します。index.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 を押します。

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

アプリケーションがすでにHTTP経由でポートを使用して実行されている場合8080,8081, または8082のIPで127.0.0.1,localhost, または0.0.0.0で起動し、対応するアプリケーションコードファイルをAWS Cloud9IDE で、メニューバーで以下のいずれかを選択します。

  • [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の ID。AWS Cloud9が環境に割り当て、us-east-2の IDAWS環境のリージョンです。この URL を使用するには、環境の IDE が開いており、アプリケーションが同じウェブブラウザで実行されている必要があります。

のIPに行こうとしたら127.0.0.1,localhost, または0.0.0.0は、IDE のアプリケーションプレビュータブを使用するか、IDE 以外の別の Web ブラウザタブを使用してAWS Cloud9IDEでは、環境に接続されているインスタンスまたは独自のサーバーに移動しようとせずに、ローカルコンピュータに移動しようとします。

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

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

注記

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

アプリケーションのプレビューの種類を変更する

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

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

  • 生のコンテンツ (UTF-8): Unicode Transformation Format 8-bit (UTF-8) 形式で出力をプレビューします (該当する場合)。

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

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

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

注記

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      表示される Amazon EC2 コンソールで、[] に表示されるインスタンス 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 でメニューバーのユーザーアイコンを選択し、[] を選択します。EC2 インスタンスの管理。表示される Amazon EC2 コンソールで、説明タブで、[] パブリック IP アドレスをメモします。IPv4 パブリック IPfield。パブリック IP アドレスは 192.0.2.0 のようになります。

    注記

    インスタンスのパブリック IP アドレスは、インスタンスが再起動されると変更される可能性があります。この IP アドレスが変更されないようにするには、Elastic IP アドレスを割り当てて、そのアドレスを実行中のインスタンスに割り当てます。手順については、以下を参照してください。Elastic IP アドレスの割り当ておよびElastic IP アドレスを実行中のインスタンスに関連付ける()Linux インスタンス用 Amazon EC2 ユーザーガイド。また、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 でメニューバーのユーザーアイコンを選択し、[] を選択します。EC2 インスタンスの管理。次に、この手順のステップ 3 にスキップします。

  2. 選択した場合EC2 インスタンスの管理またはこの手順の他のステップでエラーが表示された場合は、IAM 管理者ユーザーの認証情報を使用して Amazon EC2 コンソールにサインインすることをお勧めします。AWSアカウントにログインして、次の手順を完了します。これを実行できない場合は、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] を選択します。

  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] を選択します。

    このステップでは、IAM 管理者ユーザーの認証情報を使用して Amazon VPC コンソールにサインインすることをお勧めします。AWSアカウント. これを実行できない場合は、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. [ルール #] で、ルールの番号を入力します (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 アドレスを割り当てて、そのアドレスを実行中のインスタンスに割り当てます。手順については、以下を参照してください。Elastic IP アドレスの割り当ておよびElastic IP アドレスを実行中のインスタンスに関連付ける()Linux インスタンス用 Amazon EC2 ユーザーガイド。また、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の ID。AWS Cloud9が環境に割り当て、us-east-2の IDAWS環境のリージョンです。この URL を使用するには、環境の IDE が開いており、アプリケーションが同じウェブブラウザで実行されている必要があります。