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

新規のお客様への AWS Cloud9 の提供は終了しました。AWS Cloud9 の既存のお客様は、通常どおりサービスを引き続き使用できます。詳細はこちら

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

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

アプリケーションの実行

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

  • 8080

  • 8081

  • 8082

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

注記

IP アドレスとして 127.0.0.1localhost、または 0.0.0.0 を使用し、ポート 80808081、または 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 を押します。

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

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

  • アプリケーションはポート 80808081、または 8082 を経由して HTTP プロトコルを使用して実行している。

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

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

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

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

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

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

注記

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

注記

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

例えば、アプリケーションが前述のポートや 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 は、デフォルトで、環境に接続されたインスタンスや独自のサーバーに移動しようとせずに、ローカルコンピュータに移動しようとします。

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