在 IDE 中预览正在运行的 AWS Cloud9 应用程序 - AWS Cloud9
运行应用程序预览运行的应用程序

AWS Cloud9 不再向新客户提供。 AWS Cloud9 的现有客户可以继续正常使用该服务。了解更多

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

在 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 地址上运行您的应用程序，请参阅您的应用程序文档。

要运行您的应用程序，请参阅运行代码。

要测试此行为，请将以下 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 的文件中。

<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 文件。然后请按照下一节中的步骤预览它。在应用程序预览标签页上，将 /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 (预览运行的应用程序)

这些选项之一在环境中打开应用程序预览标签页，然后在标签页上显示应用程序的输出。

注意

如果应用程序预览标签页显示错误或空白，请执行 应用程序预览选项卡显示错误或空白 中的故障排除步骤。如果您在尝试预览应用程序或文件时收到以下通知：“预览功能已禁用，因为您的浏览器禁用了第三方 cookie”，请按照应用程序预览或文件预览通知：“Third-party cookies disabled（第三方 cookie 已禁用）”中的故障排除步骤进行操作。

注意

如果该应用程序尚未运行，将会在应用程序预览标签页上显示错误。要解决此问题，请运行或重新启动该应用程序，然后再次选择菜单栏命令。

例如，假设您的应用程序无法在任何端口或 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 之外向其他人提供正在运行的应用程序预览的说明，请参阅通过互联网共享运行的应用程序。