AWS 入門

建立基本 Web 應用程式

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

單元 1:建立 Web 應用程式

在本單元中,您將使用 AWS Amplify 主控台為 Web 應用程式部署靜態資源。

簡介

在本單元中,您將使用 AWS Amplify 主控台為 Web 應用程式部署靜態資源。在後續單元中,您會使用 AWS Lambda 和 Amazon API Gateway 呼叫遠端 RESTful API,將動態功能新增至這些頁面。(REST 意指「表現層狀態轉換」,是建立 Web 服務用的架構模式。API 代表應用程式界面。因此,是由 RESTful API 實作該架構模式。)

您的所有靜態 Web 內容 (包括 HTML、CSS、JavaScript、映像和其他檔案) 將由 AWS Amplify 託管。我們選擇 Amplify 服務是因為它讓託管和部署靜態網站變得容易。您的最終使用者將使用 Amplify 公開的 URL 存取您的網站。

若您因為使用這麼多新事物而緊張,不必擔心! 您現在不會使用其他 AWS 服務,也不需要執行任何 Web 伺服器! (「伺服器」是接受和回應透過網路發出的請求之軟體或硬體裝置,以讓您的網站可用。)

此網站會是極度簡單的 "Hello World" 網頁,我們會在後續的單元中加進更多功能。

對於大部分真正的應用程式,您將使用自訂網域來託管您的網站。「自訂網域」是識別網站的唯一品牌名稱,例如 www.amazon.com。如果您對此感興趣,Amplify 還提供對自訂網域的支援。

您將學到的內容

  • 如何建立 Amplify 應用程式
  • 如何直接將網站檔案上傳到 Amplify
  • 如何使用 Amplify 部署網頁的新版本

主要概念

靜態網站靜態網站有固定的內容,不像動態網站。靜態網站是最基本的網站類型,也最容易建立。只需要建立幾張 HTML 網頁,發佈到 Web 伺服器即可!

Web 託管:提供讓您的網站在網際網路上供人觀看所需的技術/服務。

AWS 區域:AWS 用來放置基礎設施的分立地理區。分散於全世界,以便客戶能為了託管雲端基礎設施,選擇最近的區域。

 完成時間

5 分鐘

 使用的服務

 單元先決條件

實作

  • 使用 Amplify 主控台建立 Web 應用程式
    1. 在電腦上開啟您愛用的文字編輯器。建立新的檔案,貼上以下 HTML 內容:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    
    <body>
        Hello World
    </body>
    </html>

    2.將檔案儲存index.html

    3.僅 ZIP (壓縮) HTML 檔案。

    4.在新的瀏覽器視窗中,登入到 Amplify 主控台。注意:本教學將使用奧勒岡 (us-west-2) 區域。

    5.在 Deploy (部署) 下,按一下橙色的 Get Started (開始使用) 按鈕。

    6.選擇 Deploy without Git provider (不使用 Git 提供者進行部署)。您應該可以在螢幕上看到以下內容:

    full-stack amplify console module one AmplifyAppSetup

    7.按一下橙色的 Continue (繼續) 按鈕。

    8.在 App Name (應用程式名稱) 欄位中,輸入 GettingStarted

    9.對於 Environment (環境),輸入 dev

    10.選擇 Drag and drop (拖放) 方法。您應該可以在螢幕上看到以下內容:

    full-stack amplify console module one AmplifyManualDeploy

    11.按一下 Choose files (選擇檔案) 按鈕。

    12.選擇在步驟 3 中建立的 ZIP 檔案

    13.按一下橙色的 Save and deploy (儲存並部署) 按鈕。

    14.幾秒鐘後,您應該可以看到訊息 Deployment successfully completed (部署成功完成)。

  • 測試您的 Web 應用程式
    1. 按一下 Domain (網域) 下的連結。
    2. 您的 Web 應用程式將加載到新的瀏覽器標籤中,並呈現 "Hello World"。 恭喜您!

應用程式架構

以下是我們的架構目前大致的樣子:

full-stack amplify console arch diagram module 1

因為我們現在只使用 AWS Amplify 主控台,暫且相當精簡。現在,我們有使用者可以與之互動的線上 Web 應用程式。接下來,我們將會建立 Lambda 函數。

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

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

建置無伺服器功能