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 中预览正在运行的应用程序。
## 运行应用程序
必须先在 AWS Cloud9 开发环境中运行应用程序，然后才能在 IDE 中预览应用程序。它必须通过以下端口使用 HTTP：
+ `8080`
+ `8081`
+ `8082`
以上所有端口都必须使用 IP 地址 `127.0.0.1`、`localhost` 或 `0.0.0.0`。
**注意**
您无需使用 HTTP 通过端口 `8080`、`8081` 或 `8082`，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` 文件。然后请按照下一节中的步骤预览它。在应用程序预览标签页上，将 `/index.html` 添加到 URL 末尾，然后按 `Enter`。
## 预览运行的应用程序
在预览您的应用程序之前，请确认以下事项：
+ 您的应用程序使用 HTTP 协议通过端口 `8080`、`8081` 或 `8082` 运行。
+ 您的应用程序在环境中的 IP 地址是 `127.0.0.1`、`localhost` 或 `0.0.0.0`。
+ 您的应用程序代码文件已在 AWS Cloud9 IDE 中打开并处于活动状态。
确认所有这些详细信息后，从菜单栏中选择以下选项之一：
+ **Preview (预览)、Preview Running Application (预览运行的应用程序)**
+ **Tools (工具)、Preview (预览)、Preview Running Application (预览运行的应用程序)**
这些选项之一在环境中打开应用程序预览标签页，然后在标签页上显示应用程序的输出。
**注意**
如果应用程序预览标签页显示错误或空白，请执行 [应用程序预览选项卡显示错误或空白](troubleshooting.md#troubleshooting-app-preview) 中的故障排除步骤。如果您在尝试预览应用程序或文件时收到以下通知：*“预览功能已禁用，因为您的浏览器禁用了第三方 cookie”*，请按照[应用程序预览或文件预览通知：“Third-party cookies disabled（第三方 cookie 已禁用）”](troubleshooting.md#troubleshooting-preview)中的故障排除步骤进行操作。
**注意**
如果该应用程序尚未运行，将会在应用程序预览标签页上显示错误。要解决此问题，请运行或重新启动该应用程序，然后再次选择菜单栏命令。
例如，假设您的应用程序无法在任何端口或 IPs提及的任何端口上运行。或者，您的应用程序必须同时在多个端口上运行。例如，您的应用程序必须同时在端口 `8080` 和 `3000` 上运行。如果是这样，则应用程序预览标签页可能会显示错误或为空。这是因为环境中的应用程序预览选项卡仅适用于前面的端口和 IPs。此外，该应用程序一次只能使用一个端口。
我们建议不要与其他人共享应用程序预览标签页中的 URL。(网址采用以下格式:`https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/`. 在这种格式中，`12a34567b8cd9012345ef67abcd890e1`是 AWS Cloud9 分配给环境的 ID。 `us-east-2`是环境 AWS 区域 的 ID。） 仅当环境的 IDE 处于打开状态并且应用程序正在同一个 Web 浏览器中运行时，此 URL 才有用。
如果您尝试使用 IDE 中的应用程序预览选项卡或`0.0.0.0`在 IDE 之外的单独的 Web 浏览器选项卡中访问、或的 IP，则默认情况下， AWS Cloud9 IDE 会尝试访问您的本地计算机，而不是连接到环境的实例或您自己的服务器。`127.0.0.1` `localhost`
有关如何在 IDE 之外向其他人提供正在运行的应用程序预览的说明，请参阅[通过互联网共享运行的应用程序](app-preview-share.md)。