在 AWS Cloud9 集成开发环境 (IDE) 中预览正在运行的应用程序 - AWS Cloud9
运行应用程序预览运行的应用程序重新加载应用程序预览更改应用程序预览类型在单独的 Web 浏览器标签页中打开应用程序预览切换到不同的预览 URL通过互联网共享运行的应用程序

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

在 AWS Cloud9 集成开发环境 (IDE) 中预览正在运行的应用程序

您可以使用 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 已禁用）”中的故障排除步骤进行操作。

注意

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

例如，假设您的应用程序无法在上述任何端口或 IP 上运行。或者，您的应用程序必须同时在多个端口上运行。例如，您的应用程序必须同时在端口 8080 和 3000 上运行。如果是这样，则应用程序预览标签页可能会显示错误或为空。这是因为环境中的应用程序预览标签页仅适用于上述端口和 IP。此外，该应用程序一次只能使用一个端口。

我们建议不要与其他人共享应用程序预览标签页中的 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 之外向其他人提供正在运行的应用程序预览的说明，请参阅通过互联网共享运行的应用程序。

重新加载应用程序预览

在应用程序预览选项卡上，选择 Refresh（刷新）按钮（圆形箭头）。

注意

该命令不会重新启动服务器。它仅刷新应用程序预览标签页的内容。

更改应用程序预览类型

在应用程序预览标签页上，在预览类型列表中选择以下选项之一：

  • Browser（浏览器）：以 Web 浏览器格式预览输出。

  • Raw Content (UTF-8)（原始内容 (UTF-8)）：尝试以 Unicode 转换格式 8 位 (UTF-8) 格式预览输出（如果适用）。

  • Markdown：尝试以 Markdown 格式（如果适用）预览输出。

在单独的 Web 浏览器标签页中打开应用程序预览

在应用程序预览选项卡上，选择 Pop Out Into New Window（在新的弹出窗口中显示）。

注意

AWS Cloud9 IDE 还必须在同一 Web 浏览器的至少一个其他选项卡中运行。否则，应用程序预览不会在单独的 Web 浏览器标签页中显示。

AWS Cloud9 IDE 还必须在同一 Web 浏览器的至少一个其他选项卡中运行。否则，应用程序预览不会在单独的 Web 浏览器标签页中显示。如果应用程序预览标签页显示错误或空白，请执行 应用程序预览或文件预览通知：“Third-party cookies disabled（第三方 cookie 已禁用）” 中的故障排除步骤。

切换到不同的预览 URL

在应用程序预览标签页上，在地址栏中键入不同 URL 的路径。地址栏位于 Refresh（刷新）按钮和预览类型列表之间。

通过互联网共享运行的应用程序

在预览运行的应用程序后，您可以通过 Internet 为其他人提供该应用程序。

如果 Amazon EC2 实例已连接到您的环境，请执行以下步骤。否则，请查阅您的服务器的文档。

步骤 1：获取实例的 ID 和 IP 地址

在该步骤中，请记下连接到环境的 Amazon EC2 实例的实例 ID 和公有 IP 地址。您需要在后面的步骤中使用实例 ID 以允许传入应用程序请求。然后，与其他人分享该公有 IP 地址，以便他们可以访问运行的应用程序。

  1. 获取 Amazon EC2 实例的 ID。要获取该 ID，请执行下列操作之一：

    • 在 AWS Cloud9 IDE 环境的终端会话中，运行以下命令以获取 Amazon EC2 实例的 ID。

      curl http://169.254.169.254/latest/meta-data/instance-id

      实例 ID 采用以下格式：i-12a3b456c789d0123。记下该实例 ID。

    • 在环境的 IDE 中，在菜单栏上选择您的用户图标，然后选择 Manage EC2 Instance（管理 EC2 实例）。

      选择通过 AWS Cloud9 IDE 管理实例

      在显示的 Amazon EC2 控制台中，记下在 Instance ID（实例 ID）列中显示的实例 ID。实例 ID 采用以下格式：i-12a3b456c789d0123。

  2. 获取 Amazon EC2 实例的公有 IP 地址。要获取该 ID，请执行下列操作之一：

    • 在环境的 IDE 中，在菜单栏上选择 Share（共享）。在 Share this environment（共享此环境）对话框中，记下 Application（应用程序）框中的公有 IP 地址。公有 IP 地址采用以下格式：192.0.2.0。

    • 在环境 IDE 的终端会话中，运行以下命令以获取 Amazon EC2 实例的公有 IP 地址。

      curl http://169.254.169.254/latest/meta-data/public-ipv4

      公有 IP 地址采用以下格式：192.0.2.0。记下该公有 IP 地址。

    • 在环境的 IDE 中，在菜单栏上选择您的用户图标，然后选择 Manage EC2 Instance（管理 EC2 实例）。在显示的 Amazon EC2 控制台中，在 Description（描述）选项卡上，记下 IPv4 Public IP（IPv4 公有 IP）字段中的公有 IP 地址。公有 IP 地址采用以下格式：192.0.2.0。

    注意

    您的应用程序的公有 IP 地址可能会在应用程序的实例重启时发生变化。要防止您的 IP 地址发生变化，请分配弹性 IP 地址。然后，将该地址分配给正在运行的实例。有关说明，请参阅 Amazon EC2 用户指南中的分配弹性 IP 地址和将弹性 IP 地址与正在运行的实例关联起来。分配弹性 IP 地址可能会 AWS 账户 导致您产生费用。有关更多信息，请参阅 Amazon EC2 定价。

步骤 2：为实例设置安全组

在此步骤中，在 Amazon EC2 控制台上，为连接到环境的实例设置 Amazon EC2 安全组。将其设置为允许通过端口 8080、8081 或 8082 传入 HTTP 请求。

注意

您无需通过端口 8080、8081 或 8082 使用 HTTP 运行。如果您不这样做，将无法从 IDE 中预览运行的应用程序。有关更多信息，请参阅 预览运行的应用程序。如果在不同的协议或端口上运行，请在该步骤中替换为该协议或端口。

要提供额外的安全层，请为实例可使用的 VPC 中的子网设置网络访问控制列表 (ACL)。有关安全组和网络 ACL 的更多信息，请参阅以下内容：

  1. 在环境的 IDE 中，在菜单栏上选择您的用户图标，然后选择 Manage EC2 Instance（管理 EC2 实例）。然后，跳到本过程的步骤 3。

  2. 如果选择 Manage EC2 Instance（管理 EC2 实例）或者该过程中的其他步骤返回错误，请使用您的 AWS 账户中管理员的凭证登录到 Amazon EC2 控制台。然后按照以下说明进行操作。如果您无法执行此操作，请咨询您的 AWS 账户 管理员。

    1. 如果你尚未登录，请登录 https://console.aws.amazon.com/。 AWS Management Console

    2. 打开 Amazon EC2 控制台。为此，请在导航栏中选择 Services（服务）。然后选择 EC2。

    3. 在导航栏中，选择您的环境所在 AWS 区域 的位置。

    4. 如果显示 EC2 控制面板，请选择 Running Instances（正在运行的实例）。否则，在服务导航窗格中展开 Instances（实例）（如果尚未展开），然后选择 Instances（实例）。

    5. 在实例列表中，选择 Instance ID（实例 ID）与您之前记下的实例 ID 相匹配的实例。

  3. 在实例的 Description（描述）选项卡中，选择 Security groups（安全组）旁边的安全组链接。

  4. 在显示安全组的情况下，查看 Inbound（入站）选项卡。如果有一个规则，其中 Type（类型）设置为 Custom Tcp Rule（自定义 TCP 规则），Port Range（端口范围）设置为 8080、8081 或 8082，请选择 Cancel（取消），然后向前跳到步骤 3：为实例设置子网。否则，请选择 Edit（编辑）。

  5. 在 Edit inbound rules（编辑入站规则）对话框中，选择 Add Rule（添加规则）。

  6. 对于 Type（类型），选择 Custom TCP Rule（自定义 TCP 规则）。

  7. 对于 Port Range（端口范围），输入 8080、8081 或 8082。

  8. 对于 Source（源），请选择 Anywhere（任何位置）。

    注意

    通过对 Source（源）选择 Anywhere（任何位置），则允许来自任何 IP 地址的传入请求。要将其限定为特定 IP 地址，请选择 Custom（自定义），然后输入 IP 地址范围。或者，请选择 My IP（我的 IP）将请求限制为仅来自您的 IP 地址。

  9. 选择 Save（保存）。

步骤 3：为实例设置子网

使用 Amazon EC2 和 Amazon VPC 控制台为连接到环境的 Amazon EC2 实例设置子网。然后，允许通过端口 8080、8081 或 8082 传入 HTTP 请求。

注意

您无需通过端口 8080、8081 或 8082 使用 HTTP 运行。不过，如果您不这样做，将无法从 IDE 中预览运行的应用程序。有关更多信息，请参阅 预览运行的应用程序。如果在不同的协议或端口上运行，请在该步骤中替换为该协议或端口。

该步骤介绍如何为实例可使用的 Amazon VPC 中的子网设置网络 ACL。这不是必须执行的，但建议执行。设置网络 ACL 可增加额外的安全层。有关网络 ACL 的更多信息，请参阅以下内容：

  1. 在 Amazon EC2 控制台的服务导航窗格中，展开 Instances（实例）（如果尚未展开），然后选择 Instances（实例）。

  2. 在实例列表中，选择 Instance ID（实例 ID）与您之前记下的实例 ID 相匹配的实例。

  3. 在实例的 Description（描述） 选项卡中，记下 Subnet ID（子网 ID）值。子网 ID 采用以下格式：subnet-1fab8aEX。

  4. 打开 Amazon VPC 控制台。为此，请在 AWS 导航栏中选择 “服务”，然后选择 VPC。

    对于此步骤，建议使用您的 AWS 账户中管理员的凭证登录到 Amazon VPC 控制台。如果您无法执行此操作，请咨询您的 AWS 账户 管理员。

  5. 如果显示 VPC Dashboard（VPC 控制面板），请选择 Subnet（子网）。否则，在服务导航窗格中，选择 Subnets（子网）。

  6. 在子网列表中，选择 Subnet ID（子网 ID）值与您之前记下的子网 ID 相匹配的子网。

  7. 在 Summary（摘要）选项卡上，选择 Network ACL（网络 ACL）旁边的网络 ACL 链接。

  8. 在网络 ACL 列表中，选择网络 ACL。（只有一个网络 ACL。）

  9. 查看网络 ACL 的 Inbound Rules（入站规则）选项卡。如果已有一个规则，其中 Type（类型）设置为 HTTP* (8080)、HTTP* (8081) 或 HTTP* (8082)，请向前跳到 步骤 4：共享运行的应用程序 URL。否则，请选择 Edit（编辑）。

  10. 选择 Add another rule（添加其他规则）。

  11. 对于 Rule #（规则号），请输入该规则的编号（例如 200）。

  12. 对于 Type（类型），选择 Custom TCP Rule（自定义 TCP 规则）。

  13. 对于 Port Range（端口范围），请键入 8080、8081 或 8082。

  14. 对于 Source（源），请键入允许发送传入请求的 IP 地址范围。例如，要允许来自任何 IP 地址的传入请求，请输入 0.0.0.0/0。

  15. 在将 Allow/Deny（允许/拒绝）设置为 ALLOW（允许） 的情况下，选择 Save（保存）。

步骤 4：共享运行的应用程序 URL

应用程序运行后，您可以通过提供应用程序的 URL 与其他人共享您的应用程序。为此，您需要之前提到的公有 IP 地址。要编写应用程序的完整 URL，请确保使用正确的协议启动应用程序的公有 IP 地址。接下来，如果您的应用程序端口不是它所用协议的默认端口，请添加端口号信息。以下是一个示例应用程序 URL：http://192.0.2.0:8080/index.html 通过端口 8080 使用 HTTP。

如果出现的 Web 浏览器标签页显示错误或空白，请执行无法显示在 IDE 以外运行的应用程序中的故障排除步骤。

注意

您的应用程序的公有 IP 地址可能会在应用程序的实例重启时发生变化。要禁止更改该 IP 地址，请分配弹性 IP 地址，然后将该地址分配给正在运行的实例。有关说明，请参阅 Amazon EC2 用户指南中的分配弹性 IP 地址和将弹性 IP 地址与正在运行的实例关联起来。分配弹性 IP 地址可能会 AWS 账户 导致您产生费用。有关更多信息，请参阅 Amazon EC2 定价。

您无需使用 HTTP 通过端口 8080、8081 或 8082 运行应用程序。不过，如果您不这样做，将无法从 IDE 中预览运行的应用程序。有关更多信息，请参阅 预览运行的应用程序。

例如，假设来自 VPN 的请求会阻止通过请求的协议或端口的流量。然后，那些访问您的应用程序 URL 的请求可能会失败。必须从允许通过请求的协议和端口传输流量的不同网络发出请求。有关更多信息，请与您的网络管理员联系。

建议不要与其他人共享 IDE 的应用程序预览标签页中的 URL。(此网址采用以下格式:https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/. 在这种格式中，12a34567b8cd9012345ef67abcd890e1是 AWS Cloud9 分配给环境的 ID。 us-east-2是环境 AWS 区域 的 ID。） 仅当环境的 IDE 处于打开状态并且应用程序正在同一个 Web 浏览器中运行时，此 URL 才有用。