AWS 入門

建立基本 Web 應用程式

部署 Web 應用程式,以 API 和資料庫新增互動性

單元 5:新增互動性至您的網站

在本單元中,您將修改靜態網站,以叫用 API 和顯示自訂輸入文字。

簡介

在本單元中,我們會更新在第一單元建立的靜態網站,以叫用在第三單元建立的 REST API。如此可新增根據您所輸入,顯示文字的能力。

您將學到的內容

  • 從 HTML 網頁呼叫 API Gateway API
  • 上傳新版檔案到 S3

主要概念

公用讀取存取以檔案連結授予任何人對該檔案的存取權。

叫用 API傳送事件到 API,以觸發特定行為。

 完成時間

5 分鐘

實作

  • 更新儲存在 S3 中的 HTML 檔案
    • 開啟您在第一單元建立的 index.html 檔案。
    • 使用以下內容取代現有的程式碼:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <!-- Add some CSS to change client UI -->
        <style>
        body {
            background-color: #232F3E;
            }
        label, button {
            color: #FF9900;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-left: 40px;
            }
         input {
            color: #232F3E;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-left: 20px;
            }
        </style>
        <script>
            // define the callAPI function that takes a first name and last name as parameters
            var callAPI = (firstName,lastName)=>{
                // instantiate a headers object
                var myHeaders = new Headers();
                // add content type header to object
                myHeaders.append("Content-Type", "application/json");
                // using built in JSON utility package turn object to string and store in a variable
                var raw = JSON.stringify({"firstName":firstName,"lastName":lastName});
                // create a JSON object with parameters for API call and store in a variable
                var requestOptions = {
                    method: 'POST',
                    headers: myHeaders,
                    body: raw,
                    redirect: 'follow'
                };
                // make API call with parameters and use promises to get response
                fetch("YOUR-API-INVOKE-URL", requestOptions)
                .then(response => response.text())
                .then(result => alert(JSON.parse(result).body))
                .catch(error => console.log('error', error));
            }
        </script>
    </head>
    <body>
        <form>
            <label>First Name :</label>
            <input type="text" id="fName">
            <label>Last Name :</label>
            <input type="text" id="lName">
            <!-- set button onClick method to call function we defined passing input values as parameters -->
            <button type="button" onclick="callAPI(document.getElementById('fName').value,document.getElementById('lName').value)">Call API</button>
        </form>
    </body>
    </html>

    3.確定在字行 41 加入 API 叫用 URL (來自第三單元)。注意:若手上沒有 API 的 URL,可從 API Gateway 主控台取得;作法是按一下 API,接著按階段

    4.儲存檔案。

    5.開啟 S3 主控台

    6.按一下在第一單元建立的儲存貯體。

    7.按一下藍色的「上傳」按鈕。

    8.按一下藍色的「新增檔案」按鈕。

    9.選取更新後的 index.html 檔案。

    10.按一下藍色的「下一步」按鈕。

    11.從「管理公用許可」下拉式清單,選取:「將公用讀取權授予此物件」。

    Full Stack tutorial GrantPublicRead

    12.按一下左側的「上傳」按鈕。

  • 測試更新後的 Web 用戶端
    1. 按一下 index.html
    2. 找到螢幕底端的物件 URL,對它按一下
    3. 更新後的 Web 應用程式就會載入至瀏覽器中。
    4. 填入名稱 (依您喜好) 再按一下「呼叫 API」按鈕。
    5. 這時會顯示訊息,開頭為 "Hello from Lambda",接著是您填入的文字。
    6. 恭喜,現在您已經有在 S3 託管的運作中網站,能經由 API Gateway 呼叫 Lambda 函式!

應用程式架構

現在全部單元都已完成,以下是您所建立的架構:

Full Stack tutorial Module Five app arch

我們設定的所有 AWS 服務都能安全地彼此通訊。當使用者在我們的 HTML 用戶端上按一下按鈕,就能呼叫 API,觸發我們的 Lambda 函式。我們的 Lambda 函式會寫入資料庫,經由 API Gateway 傳回訊息到我們的用戶端。所有許可皆由 IAM 管理。

這個單元對您是否有幫助?

感謝您
請告訴我們您喜歡的部分。
抱歉,讓您失望
是有內容過時、令人困擾,或不準確嗎? 請提供意見回饋,協助我們改進此教學課程。

恭喜您!

您已成功在 AWS 上建立 Web 應用程式! 絕佳的下一步是:深入探究無伺服器和資料庫,繼續增進您對 AWS 雲端的知識。