で実行中のアプリケーションをプレビューする AWS Cloud9 IDE - AWS Cloud9
アプリケーションの実行実行中のアプリケーションのプレビューアプリケーションのプレビューの再ロードアプリケーションプレビュータイプの変更別のウェブブラウザのタブでアプリケーションプレビューを開く別のプレビューに切り替える URL実行中のアプリケーションをインターネット経由で共有する

AWS Cloud9 は、新しいお客様では利用できなくなりました。 AWS Cloud9 の既存のお客様は、通常どおりサービスを引き続き使用できます。詳細はこちら

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

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

AWS Cloud9 統合開発環境 (IDE) を使用して、 内から実行中のアプリケーションをプレビューできますIDE。

アプリケーションの実行

内からアプリケーションをプレビューする前にIDE、アプリケーションが AWS Cloud9 開発環境で実行されている必要があります。次のポートHTTPで を使用する必要があります。

  • 8080

  • 8081

  • 8082

上記のすべてのポートでは、IP アドレスとして 127.0.0.1、localhost、0.0.0.0 のいずれかを使用する必要があります。

注記

ポート 8080、、または 8082 IP アドレス 、8081、127.0.0.1localhostまたは HTTPを使用してアプリケーションを実行する必要はありません0.0.0.0。ただし、そうしない場合、実行中のアプリケーションを 内からプレビューすることはできませんIDE。

注記

プレビューアプリケーションは 内で実行IDEされ、iframe 要素内にロードされます。一部のアプリケーションサーバーは、X-Frame-Options ヘッダーなどの iframe 要素からのリクエストをデフォルトでブロックする場合があります。プレビューアプリケーションがプレビュータブに表示されない場合は、アプリケーションサーバーが iframe のコンテンツの表示を禁止していないことを確認してください。

特定のポートと 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()

環境のルートで、 という名前のファイルに次の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 ファイルを実行します。次に、次のセクションのステップに従ってプレビューします。アプリケーションプレビュータブで、 を の末尾/index.htmlに追加しURL、 を押しますEnter。

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

アプリケーションをプレビューする前に、以下の点を確認してください。

  • アプリケーションは、ポート 8080、8081、または を介してHTTPプロトコルを使用して実行されます8082。

  • 環境内のアプリケーションの IP アドレスは 127.0.0.1、localhost、または 0.0.0.0 である。

  • アプリケーションコードファイルは で開いていてアクティブです AWS Cloud9 IDE。

これらの詳細をすべて確認したら、メニューバーで以下のいずれかのオプションを選択します。

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

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

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

注記

アプリケーションプレビュータブにエラーが表示されるか、何も表示されない場合は、「アプリケーションプレビュータブにエラーが表示される、または空白になる」のトラブルシューティングステップに従ってください。アプリケーションまたはファイルをプレビューしようとしたときに、「ブラウザでサードパーティの Cookie が無効になっているため、プレビュー機能が無効になっています」という通知が表示される場合は、「アプリケーションプレビューまたはファイルプレビュー通知:「サードパーティーの Cookie が無効になっています」」に記載されているトラブルシューティング手順に従ってください。

注記

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

例えば、アプリケーションがIPs、言及されている または のポートのいずれでも実行できないとします。または、アプリケーションをこれらのポートの複数で同時に実行する必要があるとします。例えば、アプリケーションをポート 8080 と 3000 で同時に実行する必要がある場合があります。このような場合、アプリケーションプレビュータブはエラーを表示するか、空白になる可能性があります。これは、環境内のアプリケーションプレビュータブが前述のポートと でのみ機能するためですIPs。アプリケーションは一度に 1 つのポートでのみ動作するためです。

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

127.0.0.1、、または の IP にアクセスしようとする場合localhost、 のアプリケーションプレビュータブIDEを使用するか、 の外部にある別のウェブブラウザタブ0.0.0.0を使用するとIDE、 AWS Cloud9 IDE はデフォルトで、環境に接続されているインスタンスや独自のサーバーではなく、ローカルコンピュータへの移動を試みます。

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

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

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

注記

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

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

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

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

  • 未加工コンテンツ (UTF-8): 該当する場合、出力を Unicode 変換形式 8 ビット (UTF-8) 形式でプレビューしようとします。

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

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

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

注記

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

また、 AWS Cloud9 IDEは、同じウェブブラウザ内の少なくとも 1 つの他のタブで実行されている必要があります。そうでない場合、アプリケーションのプレビューは別のウェブブラウザタブに表示されません。アプリケーションプレビュータブにエラーが表示されるか、何も表示されない場合は、「アプリケーションプレビューまたはファイルプレビュー通知:「サードパーティーの Cookie が無効になっています」」のトラブルシューティングステップに従ってください。

別のプレビューに切り替える 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の で、メニューバーでユーザーアイコンを選択し、EC2インスタンスの管理 を選択します。

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

      表示される Amazon EC2コンソールで、インスタンス 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パブリック IP アドレスを書き留めます。パブリック IP アドレスの形式は 192.0.2.0 です。

    注記

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

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

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

注記

ポート 8080、、8081または HTTP経由で を使用して実行する必要はありません8082。これを行わない場合、実行中のアプリケーションを 内からプレビューすることはできませんIDE。詳細については、「実行中のアプリケーションのプレビュー」を参照してください。別のプロトコルやポートで実行している場合は、このステップで置き換えてください。

セキュリティをさらに強化するには、インスタンスVPCが使用できる のサブネットのネットワークアクセスコントロールリスト (ACL) を設定します。セキュリティグループとネットワーク の詳細についてはACLs、以下を参照してください。

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

  2. EC2 インスタンスの管理またはこの手順の他のステップを選択すると、エラーが返される場合は、 の管理者の認証情報を使用して Amazon EC2コンソールにサインインします AWS アカウント。次に、以下の手順を実行します。これを実行できない場合は、 AWS アカウント 管理者にお問い合わせください。

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

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

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

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

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

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

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

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

  6. タイプ で、カスタムTCPルール を選択します。

  7. [Port Range] (ポート範囲) に、8080、8081、または 8082 と入力します。

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

    注記

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

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

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

Amazon コンソールEC2と Amazon VPCコンソールを使用して、環境に接続されている Amazon EC2インスタンスのサブネットを設定します。次に、ポート 8080、8081、または 8082 経由で受信HTTPリクエストを許可します。

注記

ポート 8080、、8081または HTTPで を実行する必要はありません8082。ただし、そうでない場合は、 内から実行中のアプリケーションをプレビューすることはできませんIDE。詳細については、「実行中のアプリケーションのプレビュー」を参照してください。別のプロトコルやポートで実行している場合は、このステップで置き換えてください。

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

  1. Amazon EC2コンソールのサービスナビゲーションペインで、まだ展開されていない場合はインスタンスを展開し、インスタンス を選択します。

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

  3. インスタンスの [説明] タブで [サブネット ID] の値を書き留めます。サブネット ID の形式は subnet-1fab8aEX です。

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

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

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

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

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

  8. ネットワーク のリストでACLs、ネットワーク を選択しますACL。（ネットワーク は 1 つだけです）ACL。

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

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

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

  12. タイプ で、カスタムTCPルール を選択します。

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

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

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

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

アプリケーションの実行後、アプリケーションの を指定することで、アプリケーションを他のユーザーと共有できますURL。そのためには、先ほどメモしておいたパブリック IP アドレスが必要になります。アプリケーションのフル を書き込むにはURL、アプリケーションのパブリック IP アドレスを正しいプロトコルで起動してください。次に、アプリケーションポートがアプリケーションで使用するプロトコルのデフォルトポートでない場合は、ポート番号情報を追加します。アプリケーション の例を次に示しますURL。ポート 8080 HTTP以上http://192.0.2.0:8080/index.htmlを使用する。

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

注記

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

ポート 8080、、8081または HTTPを使用してアプリケーションを実行する必要はありません8082。ただし、そうでない場合は、 内から実行中のアプリケーションをプレビューすることはできませんIDE。詳細については、「実行中のアプリケーションのプレビュー」を参照してください。

例えば、リクエストされたプロトコルまたはポート経由のトラフィックをブロックVPNする から発信されたリクエストを例にとります。その後、アプリケーションの へのアクセスリクエストが失敗URLする可能性があります。リクエストは、要求されたプロトコルやポート経由のトラフィックを許可する別のネットワークから行う必要があります。詳細については、ネットワーク管理者にお問い合わせください。

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