執行應用程式預覽執行中的應用程式重新載入應用程式預覽變更應用程式預覽類型另由其他 Web 瀏覽器標籤開啟應用程式預覽切換到另一個預覽 URL 透過網際網路共用執行中的應用程式

在 AWS Cloud9 整合式開發環境 (IDE) 中預覽執行中的應用程式

您可以使用 AWS Cloud9 IDE 從 IDE 中預覽執行中的應用程式。

主題

執行應用程式
預覽執行中的應用程式
重新載入應用程式預覽
變更應用程式預覽類型
另由其他 Web 瀏覽器標籤開啟應用程式預覽
切換到另一個預覽 URL
透過網際網路共用執行中的應用程式

執行應用程式

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

8080
8081
8082

上述所有連接埠都必須使用127.0.0.1localhost、或的 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 地址執行應用程式，請參閱應用程式的說明文件。

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

若要測試此行為，請將下列 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 檔案。接著，請執行下一節中的步驟來預覽。在應用程式預覽標籤上，於 URL 末尾處加入 /index.html，然後按 Enter。

預覽執行中的應用程式

預覽您的應用程式之前，請先確認以下項目：

您的應用程式透過連接埠 8080、8081 或 8082 使用 HTTP 通訊協定來執行。
您的應用程式在環境中的 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 區域識別碼。) 此 URL 僅限於環境的 IDE 已開啟且應用程式由同一個 Web 瀏覽器執行時才有效。

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

如需如何在 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 (重新整理) 按鈕與預覽類型清單之間。

預覽執行中的應用程式之後，您可以透過網際網路供予其他人存取該應用程式。

若已有 Amazon EC2 執行個體連接到您的環境，請執行以下步驟。否則，請參閱您的伺服器所附說明文件。

在此步驟中，請針對已連接到環境的 Amazon EC2 執行個體記下執行個體 ID 及公有 IP 地址。後續步驟將需要憑此執行個體 ID 以允許傳入應用程式請求。接著，將公有 IP 地址給予其他人，使對方能夠存取執行中的應用程式。

取得 Amazon EC2 執行個體的 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 執行個體)。
  
  Amazon EC2 主控台出現後，記下 Instance ID (執行個體 ID) 欄內所顯示的執行個體 ID。執行個體 ID 的格式如下：i-12a3b456c789d0123。
取得 Amazon EC2 執行個體的公有 IP 地址。為此，請執行以下其中一項操作：
- 在環境的 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 定價。

在此步驟中，您將使用 Amazon EC2 主控台為連接到環境的執行個體設定 Amazon EC2 安全群組。將其設定為允許透過連接埠 8080、8081 或 8082 傳入的 HTTP 要求。

注意

您不需要透過連接埠 8080、8081 或 8082 使用 HTTP 來執行。如果您不這樣做，將無法從 IDE 內預覽執行中的應用程式。如需詳細資訊，請參閱預覽執行中的應用程式。否則，如果您是使用其他通訊協定或連接埠執行，請在此步驟中替換它。

如要獲得多一層的安全保障，請為 VPC 中可供執行個體使用的子網路設定一份網路存取控制清單 (ACL)。如需安全群組與網路 ACL 的詳細資訊，請參閱以下內容：

步驟 3：為執行個體設定子網路
Amazon VPC 使用者指南中的安全性
Amazon VPC 使用者指南中的VPC 的安全群組
Amazon VPC 使用者指南中的網路 ACL

在環境的 IDE 中，從選單列選擇您的使用者圖示，然後選擇 Manage EC2 Instance (管理 EC2 執行個體)。接著跳至本程序的步驟 3。
如果選擇 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 Dashboard (EC2 儀表板) 時，選擇 Running Instances (運作中的執行個體)。否則，若服務導覽窗格中仍未展開 Instances (執行個體)，請將其展開後再選擇 Instances (執行個體)。
5. 從執行個體清單中，選取 Instance ID (執行個體 ID) 與您稍早記下的執行個體 ID 相符的執行個體。
在執行個體的 Description (說明) 標籤上，選擇 Security groups (安全群組) 旁的安全群組連結。
安全群組顯示後，查看 Inbound (傳入) 標籤。若當中已有規則，其 Type (類型) 設為 Custom TCP Rule (自訂 TCP 規則) 且 Port Range (連接埠範圍) 設為 8080、8081 或 8082，請選擇 Cancel (取消)，然後跳至步驟 3：為執行個體設定子網路。否則選擇 Edit (編輯)。
在 Edit inbound rules (編輯傳入規則) 對話方塊中，選擇 Add Rule (新增規則)。
針對 Type (類型)，選擇 Custom TCP Rule (自訂 TCP 規則)。
針對 Port Range (連接埠範圍)，輸入 8080、8081 或 8082。
針對 Source (來源)，選擇 Anywhere (隨處)。

注意
Source (來源) 選擇 Anywhere (隨處) 時，將允許來自任何 IP 地址的傳入請求。若要將此限制為特定 IP 地址，請選擇 Custom (自訂)，然後輸入 IP 地址範圍。或者，選擇 My IP (我的 IP)，將請求限制為僅來自您的 IP 地址。
選擇儲存。

使用 Amazon EC2 和 Amazon VPC 主控台，為連接環境的 Amazon EC2 執行個體設定子網路。接著，允許透過連接埠 8080、8081 或 8082 傳入的 HTTP 要求。

注意

您不需要透過連接埠 8080、8081 或 8082 使用 HTTP 來執行。然而，如果您不這樣做，將無法從 IDE 內預覽執行中的應用程式。如需詳細資訊，請參閱預覽執行中的應用程式。否則，如果您是使用其他通訊協定或連接埠執行，請在此步驟中替換它。

此步驟說明如何為 Amazon VPC 中可供執行個體使用的子網路設定網路 ACL。此步驟非必要，但仍建議執行。設定網路 ACL 可增加一層額外的安全性。如需網路 ACL 的詳細資訊，請參閱以下內容：

Amazon VPC 使用者指南中的安全性
Amazon VPC 使用者指南中的網路 ACL

在 Amazon EC2 主控台上，若服務導覽窗格中仍未展開 Instances (執行個體)，請將其展開後再選擇 Instances (執行個體)。
從執行個體清單中，選取 Instance ID (執行個體 ID) 與您稍早記下的執行個體 ID 相符的執行個體。
在執行個體的 Description (說明) 標籤上，記下 Subnet ID (子網路 ID) 的值。子網路 ID 的格式如下：subnet-1fab8aEX。
開啟 Amazon VPC 主控台。為此，請在 AWS 導航欄中選擇「服務」，然後選擇「VPC」。

針對此步驟，建議您使用 AWS 帳戶中管理員的憑證登入 Amazon VPC 主控台。如果您無法這麼做，請洽詢您的 AWS 帳戶系統管理員。
出現 VPC Dashboard (VPC 儀表板) 時，選擇 Subnets (子網路)。否則，從服務導覽窗格中選擇 Subnets (子網路)。
從子網路清單中，選取 Subnet ID (子網路 ID) 與您稍早記下的值相符的子網路。
在 Summary (摘要) 標籤上，選擇 Network ACL (網路 ACL) 旁的網路 ACL 連結。
從網路 ACL 清單中選取網路 ACL (只會有一份網路 ACL)。
查看網路 ACL 的 Inbound Rules (傳入規則) 標籤。若當中有一項規則，其 Type (類型) 設為 HTTP* (8080)、HTTP* (8081) 或 HTTP* (8082)，請直接跳到步驟 4：共用執行中應用程式的 URL。否則選擇 Edit (編輯)。
選擇 Add another rule (新增其他規則)。
在 Rule # (規則 #) 中輸入規則的編號 (例如 200)。
針對 Type (類型)，選擇 Custom TCP Rule (自訂 TCP 規則)。
在 Port Range (連接埠範圍) 中輸入 8080、8081 或 8082。
對於 Source (來源)，輸入要允許傳入請求的 IP 地址範圍。例如，輸入 0.0.0.0/0 將允許來自任何 IP 地址的傳入請求。
在 Allow / Deny (允許/拒絕) 設為 ALLOW (允許) 的情況下，選擇 Save (儲存)。

應用程式執行後，您可以透過提供應用程式的 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 定價。

您不需要透過連接埠 8080、8081 或 8082 使用 HTTP 來執行應用程式。然而，如果您不這樣做，將無法從 IDE 內預覽執行中的應用程式。如需詳細資訊，請參閱預覽執行中的應用程式。

例如，假設來自 VPN 的要求會封鎖所要求通訊協定或連接埠上的流量。然後，那些存取應用程式 URL 的請求可能會失敗。必須換成允許透過請求的通訊協定及連接埠傳送流量的其他網路。如需詳細資訊，請洽詢您的網路管理員。

建議您不要向其他人透露 IDE 應用程式預覽標籤上的 URL。(此 URL 的格式如下：https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/. 在此格式中，12a34567b8cd9012345ef67abcd890e1是指 AWS Cloud9 派給環境的 ID。 us-east-2是環境的 AWS 區域識別碼。) 此 URL 僅限於環境的 IDE 已開啟且應用程式由同一個 Web 瀏覽器執行時才有效。

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

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

文件慣用形式

預覽檔案

使用檔案修訂

在 AWS Cloud9 整合式開發環境 (IDE) 中預覽執行中的應用程式

主題

執行應用程式

注意

注意

注意

預覽執行中的應用程式

注意

注意

重新載入應用程式預覽

注意

變更應用程式預覽類型

另由其他 Web 瀏覽器標籤開啟應用程式預覽

注意

切換到另一個預覽 URL

透過網際網路共用執行中的應用程式

主題

步驟 1：取得執行個體的 ID 及 IP 地址

注意

步驟 2：為執行個體設定安全群組

注意

注意

步驟 3：為執行個體設定子網路

注意

步驟 4：共用執行中應用程式的 URL

注意