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

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

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

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

アプリケーションの実行

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

注記

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

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

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

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

この動作をテストするには、server.js のルートのファイル (環境 など) に次のような JavaScript コードを追加できます。このコードは、Node.js を使用してサーバーを実行します。

注記

以下のコードは、 text/html が返されたコンテンツの Content-Type であることを示します。別の形式でコンテンツを返すContent-Typeには、別の を指定します (text/cssCSS ファイルの場合は など)。

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 を押します。

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

8080 でアプリケーションがすでに実行中であり (ポートとして 80818082、または 127.0.0.1 を経由し、IP として localhost0.0.0.0、または 環境 を通じて HTTP を使用します)、対応するアプリケーションコードファイルが AWS Cloud9 IDE で開いてアクティブになっている状態で、メニューバーで以下のいずれかを選択します。

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

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

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

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

の外部で実行中のアプリケーションをプレビューすることを他のユーザーに許可するには、「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 の 環境 が開いており、アプリケーションが同じウェブブラウザで実行されている必要があります。

127.0.0.1 内のアプリケーションプレビュータブまたは localhost 外の別のウェブブラウザタブを使用して、IP (0.0.0.0、IDE、または IDE) に移動しようとすると、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 Cloud9 IDE

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

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

    • IDE の 環境 で、メニューバーの [Share (共有)] を選択します。[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 コンソールの [Description (説明)] タブで、[IPv4 Public IP (IPv4 パブリック IP)] フィールドのパブリック IP アドレスを書き留めます。パブリック IP アドレスは 192.0.2.0 のようになります。

    注記

    インスタンスのパブリック IP アドレスは、インスタンスが再起動されると変更される可能性があります。この IP アドレスが変更されないようにするには、Elastic IP アドレスを割り当てて、そのアドレスを実行中のインスタンスに割り当てます。手順については、の「Elastic IP アドレスhttps://docs.aws.amazon.com/AWSEC2/latest/UserGuide/elastic-ip-addresses-eip.html#using-instance-addressing-eips-allocatingの割り当て」および「Elastic IP アドレスを実行中のインスタンスhttps://docs.aws.amazon.com/AWSEC2/latest/UserGuide/elastic-ip-addresses-eip.html#using-instance-addressing-eips-associatingに関連付ける」を参照してくださいLinux インスタンス用 Amazon EC2 ユーザーガイド。また、Elastic IP アドレスを割り当てると、AWS アカウントに請求が発生する可能性があります。詳細については、「Amazon EC2 料金表」を参照してください。

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

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

注記

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

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

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

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

    1. AWS マネジメントコンソール (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 を使用して実行する必要はありません。別のプロトコルまたはポート上で実行している場合は、このステップでこれを置き換えてください。「」で説明されているように、ポートと IPs で HTTP を使用して実行に戻るIDEまで、 内から実行中のアプリケーションをプレビューすることはできません実行中のアプリケーションのプレビュー

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

  1. 前のステップで開いたままの Amazon EC2 コンソールで、サービスナビゲーションペインの [インスタンス] が展開し (まだ展開していない場合)、[インスタンス] を選択します。

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

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

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

    このステップでは、Amazon VPC アカウントの IAM 管理者ユーザーの認証情報を使用して 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 を使用するには、すでにそれが実行されている場合はアプリケーションを停止してから、アプリケーションを再実行します。

注記

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

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

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

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

注記

インスタンスのパブリック IP アドレスは、インスタンスが再起動されると変更される可能性があります。この IP アドレスが変更されないようにするには、Elastic IP アドレスを割り当てて、そのアドレスを実行中のインスタンスに割り当てます。手順については、の「Elastic IP アドレスhttps://docs.aws.amazon.com/AWSEC2/latest/UserGuide/elastic-ip-addresses-eip.html#using-instance-addressing-eips-allocatingの割り当て」および「Elastic IP アドレスを実行中のインスタンスhttps://docs.aws.amazon.com/AWSEC2/latest/UserGuide/elastic-ip-addresses-eip.html#using-instance-addressing-eips-associatingに関連付ける」を参照してくださいLinux インスタンス用 Amazon EC2 ユーザーガイド。また、Elastic IP アドレスを割り当てると、AWS アカウントに請求が発生する可能性があります。詳細については、「Amazon EC2 料金表」を参照してください。

ポート 80808081、または 8082 経由で HTTP を使用して実行する必要はありません。ただし、「」で説明されているように、ポートと IPs のいずれかで 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 の 環境 が開いており、アプリケーションが同じウェブブラウザで実行されている必要があります。