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

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

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

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

アプリケーションの実行

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

  • 8080

  • 8081

  • 8082

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

注記

IP アドレスとして 127.0.0.1、localhost、または 0.0.0.0 を使用し、ポート 8080、8081、または 8082 を経由して HTTP でアプリケーションを実行することは必須ではありません。ただし、そうしないと、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()

環境のルートで、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、8081、または 8082 を経由して HTTP プロトコルを使用して実行している。

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

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

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

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

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

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

注記

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

注記

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

例えば、アプリケーションが前述のポートや IP のいずれでも実行できないとします。または、アプリケーションをこれらのポートの複数で同時に実行する必要があるとします。例えば、アプリケーションをポート 8080 と 3000 で同時に実行する必要がある場合があります。このような場合、アプリケーションプレビュータブはエラーを表示するか、空白になる可能性があります。これは、環境内のアプリケーションプレビュータブは前述のポートと 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 外の別のウェブブラウザタブでアプリケーションプレビュータブ0.0.0.0を使用して127.0.0.1、、localhost、または の IP にアクセスしようとすると、 AWS Cloud9 IDE はデフォルトで、環境に接続されているインスタンスまたは独自のサーバーではなく、ローカルコンピュータへの送信を試みます。

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 つのタブでも実行されている必要があります。そうでない場合、アプリケーションのプレビューは別のウェブブラウザタブに表示されません。

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 でメニューバーのユーザーアイコンを選択し、[Manage EC2 Instance (EC2 インスタンスの管理)] を選択します。

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

      表示される 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 アドレスを割り当てます。次に、そのアドレスを実行中のインスタンスに割り当てます。手順については、「Amazon EC2 ユーザーガイド」の「Elastic IP アドレスの割り当て」および「Elastic IP アドレスと実行中のインスタンスの関連付け」を参照してください。 Amazon EC2 Elastic IP アドレスを割り当てると、 AWS アカウント に料金が発生する可能性があります。詳細については、「Amazon EC2 の料金表」を参照してください。

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

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

注記

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

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

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

  2. この手順で「EC2 インスタンスを管理する」ステップや他のステップを選択したときにエラーが表示された場合は、 AWS アカウントの管理者の認証情報を使用して Amazon EC2 コンソールにサインインします。次に、以下の手順を実行します。これを実行できない場合は、 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. セキュリティグループを表示した状態で、[インバウンド] タブを確認します。[タイプ] が [カスタム TCP ルール]、[ポート範囲] が [8080]、[8081]、または [8082] に設定されているルールが既に存在する場合は、[キャンセル] を選択して、「ステップ 3: インスタンスのサブネットをセットアップする」にスキップします。それ以外の場合は、[編集] を選択します。

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

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

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

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

    注記

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

  9. [保存] を選択します。

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

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

注記

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

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

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

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

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

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

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

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

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

  7. [Summary] (概要) タブで、[Network ACL] (ネットワーク ACL) の横にあるネットワーク ACL のリンクを選択します。

  8. ネットワーク ACL の一覧で、ネットワーク ACL を選択します (ネットワーク ACL は 1 つしかありません)。

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

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

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

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

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

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

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

ステップ 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 アドレスと実行中のインスタンスの関連付け」を参照してください。 Amazon EC2 Elastic IP アドレスを割り当てると、 AWS アカウント に料金が発生する可能性があります。詳細については、「Amazon EC2 の料金」を参照してください。

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

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

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