AWS Cloud9 不再提供給新客戶。 AWS Cloud9 的現有客戶可以繼續正常使用該服務。[進一步了解](https://aws.amazon.com/blogs/devops/how-to-migrate-from-aws-cloud9-to-aws-ide-toolkits-or-aws-cloudshell/)
本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
# 在 IDE AWS Cloud9 中預覽執行中的應用程式
您可以使用 AWS Cloud9 整合式開發環境 (IDE) 從 IDE 內預覽執行中的應用程式。
## 執行應用程式
在您可以從 IDE 中預覽應用程式之前，您的應用程式必須在 AWS Cloud9 開發環境中執行。它必須透過下列連接埠使用 HTTP：
+ `8080`
+ `8081`
+ `8082`
上述所有連接埠都必須使用 `127.0.0.1` `localhost`、 或 的 IP 地址`0.0.0.0`。
**注意**
執行應用程式無需透過連接埠 `8080`、`8081` 或 `8082` 使用 HTTP 並搭配 IP 地址 `127.0.0.1`、`localhost` 或 `0.0.0.0`。然而，如果您不這樣做，將無法從 IDE 內預覽執行中的應用程式。
**注意**
預覽應用程式會在 IDE 中執行，並載入 iframe 元素中。根據預設，某些應用程式伺服器可能會封鎖來自 iframe 元素的要求，例如 X-Frame-Options 標頭。如果您的預覽應用程式未顯示在預覽標籤中，請確定您的應用程式伺服器未禁止在 iframe 中顯示內容。
若要編寫程式碼於特定的連接埠和 IP 地址執行應用程式，請參閱應用程式的說明文件。
若要執行應用程式，請參閱[執行您的程式碼](build-run-debug.md#build-run-debug-run)。
若要測試運作情形，您可將以下 JavaScript 程式碼加入至環境的根目錄內名為 `server.js` 的檔案。此程式碼使用名為 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'.
```
在環境的根目錄內，您可將以下 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` 的檔案。
```
Hello Home Page
Hello, World!
```
若要由應用程式預覽標籤上查看此檔案的 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`。
+ 您的應用程式程式碼檔案已在 IDE AWS Cloud9 中開啟並處於作用中狀態。
確認所有詳細資訊後，請從選單列選擇下列其中一個選項：
+ **Preview、Preview Running Application (預覽、預覽執行中的應用程式)**
+ **Tools、Preview、Preview Running Application** (工具、預覽、預覽執行中的應用程式)
這些選項中的任何一個會在環境中開啟應用程式預覽標籤，然後於該標籤上顯示應用程式的輸出。
**注意**
如果應用程式預覽標籤顯示錯誤或空白，請在 [應用程式預覽標籤顯示錯誤或一片空白](troubleshooting.md#troubleshooting-app-preview) 中嘗試下列故障診斷步驟。如果您嘗試預覽應用程式或檔案時，收到以下通知*：「預覽功能已停用，因為您的瀏覽器已停用第三方 Cookie」*，請遵循中的疑難排解步驟[應用程式預覽或檔案預覽通知：「Third-party cookies disabled」(已停用第三方 Cookie)](troubleshooting.md#troubleshooting-preview)。
**注意**
如果應用程式並未執行，應用程式預覽標籤會顯示錯誤。若要解決此問題，請再次執行或重新啟動應用程式，然後從選單列選擇命令。
例如，假設您的應用程式無法在提及的任何連接埠或 IP 上執行。或者，您的應用程式必須同時在一個以上的連接埠上執行。例如，您的應用程式必須同時在連接埠 `8080` 和 `3000` 上執行。如果是這種情況，則應用程式預覽標籤可能會顯示錯誤或可能空白。這是因為環境中的應用程式預覽標籤只能搭配上述連接埠和 IP 運作。此外，應用程式一次只能使用一個連接埠。
建議您不要向其他人透露應用程式預覽標籤上的 URL (URL 的格式如下：`https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/`。 在此格式中， `12a34567b8cd9012345ef67abcd890e1` 是指派給環境的 AWS Cloud9 ID。 `us-east-2`是環境 AWS 區域 的 ID。) 此 URL 僅限於環境的 IDE 已開啟且應用程式由同一個 Web 瀏覽器執行時才有效。
如果您嘗試`0.0.0.0`使用 IDE 中的應用程式預覽索引標籤或在 IDE 外部的個別 Web 瀏覽器索引標籤來存取 `127.0.0.1`、 `localhost`或 的 IP， AWS Cloud9 IDE 預設會嘗試前往您的本機電腦，而不是連接至環境的執行個體或您自己的伺服器。
如需如何在 IDE 之外向其他人提供執行中應用程式預覽的指示，請參閱[透過網際網路共用執行中的應用程式](app-preview-share.md)。