在中預覽執行中的應用程式 AWS Cloud9 IDE

您可以使用 AWS Cloud9 整合式開發環境（IDE）從內預覽執行中的應用程式IDE。

執行應用程式

您必須先在 AWS Cloud9 開發環境中執行應用程式IDE，才能從中預覽應用程式。它必須透過HTTP下列連接埠使用：

8080
8081
8082

上述所有連接埠都必須使用 127.0.0.1 localhost、或的 IP 地址0.0.0.0。

注意

您不需要HTTP透過連接埠 8080、或 8082 IP 地址為 8081、 127.0.0.1localhost或來執行應用程式0.0.0.0。但是，如果您未這樣做，則無法從內預覽正在執行的應用程式IDE。

注意

預覽應用程式會在內執行，IDE並載入 iframe 元素內。某些應用程式伺服器預設可能會封鎖來自 iframe 元素的請求，例如 X-Frame-Options 標頭。如果您的預覽應用程式未顯示在預覽標籤中，請確定您的應用程式伺服器未禁止在 iframe 中顯示內容。

若要編寫程式碼於特定的連接埠和 IP 地址執行應用程式，請參閱應用程式的說明文件。

若要執行應用程式，請參閱執行您的程式碼。

若要測試此行為，請將下列 JavaScript 程式碼新增至您環境根server.js中名為的檔案。此程式碼使用名為 Node.js 的檔案來執行伺服器。

注意

在下列範例中，text/html 是傳回內容的 Content-Type。若要以不同格式傳回內容，請指定不同的 Content-Type。例如，您可以text/css為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輸出，server.js請使用 Node.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」，請遵循中的疑難排解步驟應用程式預覽或檔案預覽通知：「Third-party cookies disabled」(已停用第三方 Cookie)。

注意

如果應用程式並未執行，應用程式預覽標籤會顯示錯誤。若要解決此問題，請再次執行或重新啟動應用程式，然後從選單列選擇命令。

例如，假設您的應用程式無法在任何連接埠或IPs提及的連接埠上執行。或者，您的應用程式必須同時在一個以上的連接埠上執行。例如，您的應用程式必須同時在連接埠 8080 和 3000 上執行。如果是這種情況，則應用程式預覽標籤可能會顯示錯誤或可能空白。這是因為環境中的應用程式預覽索引標籤僅適用於上述連接埠和 IPs。此外，應用程式一次只能使用一個連接埠。

我們不建議在應用程式預覽索引標籤URL中與他人共用。（ URL的格式如下：https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/。在此格式中， 12a34567b8cd9012345ef67abcd890e1 是指派給環境的 AWS Cloud9 ID。 us-east-2是環境 AWS 區域的 ID。）這只有在IDE環境的開啟，且應用程式正在相同的 Web 瀏覽器中執行時，URL才會運作。

如果您嘗試0.0.0.0使用中的應用程式預覽索引標籤localhost，或在外部的個別 Web 瀏覽器索引標籤中存取 127.0.0.1、 IDE或的 IPIDE，依預設， AWS Cloud9 IDE會嘗試前往您的本機電腦，而不是連線至環境的執行個體或您自己的伺服器。

如需如何在之外為其他人提供執行中應用程式的預覽說明IDE，請參閱透過網際網路共用執行中的應用程式。

您的瀏覽器已停用或無法使用 Javascript。

您必須啟用 Javascript，才能使用 AWS 文件。請參閱您的瀏覽器說明頁以取得說明。

文件慣用形式

預覽檔案

重新載入應用程式預覽

在 中預覽執行中的應用程式 AWS Cloud9 IDE

執行應用程式

注意

注意

注意

預覽執行中的應用程式

注意

注意

在中預覽執行中的應用程式 AWS Cloud9 IDE