AWS 入門

建立基本 Web 應用程式

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

單元 1:建立靜態網站

在本單元中,您將使用 Amazon S3 建立及託管靜態網站。

簡介

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

鑒於本單元的目的,您將使用 Amazon S3 提供的網站端點 URL。其形式如下:

http://{your-bucket-name}.s3-website.{region}.amazonaws.com

您的所有靜態 Web 內容 (包括 HTML、CSS、JavaScript、映像和其他檔案) 將存放在 Amazon S3 中。我們之所以選擇 S3 服務,是因其提供物件儲存功能,讓我們能直接從中儲存和擷取檔案。您的最終使用者可使用 S3 顯露的物件 URL,輕鬆存取您的網站。

若您因為使用這麼多新事物而緊張,不必擔心! 您在此單元中不會用到任何其他 AWS 服務,也不必執行任何 Web 伺服器 (「伺服器」是接受及回應透過網路所提出請求的軟體或硬體裝置) 即可將您的網站提供使用。

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

對於大部分真正的應用程式,您將使用自訂網域來託管您的網站。(「自訂網域」是識別網站的唯一品牌名稱,例如 www.amazon.com。雖然超出此單元的範圍,若您有興趣使用自己的網域,可依照此指南中的指示進行)。

您將學到的內容

  • 建立 S3 儲存貯體
    • 資料是當做物件存放在稱為「儲存貯體」的資源中
  • 上傳檔案至 S3 儲存貯體
  • 瀏覽至 S3 主控台以編輯「儲存貯體」和「物件」設定
  • 變更 S3 儲存貯體中的安全等級,並使其中的物件成為公用
  • 啟用 S3 儲存貯體上的 Web 託管
    • 「Web 託管」提供讓您的網站在網際網路上供人觀看所需的技術/服務

主要概念

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

資源您可使用的實體 (例如,Amazon S3 儲存貯體)。

物件儲存電腦資料儲存架構,將資料作為物件管理,反之其他儲存架構則將資料儲存為檔案或區塊。

S3 物件含有資料和中繼資料的資源 (描述其他資料並提供相關資訊的一組資料),並與識別該資源的唯一金鑰相關。

S3 儲存貯體用來將儲存的多個物件分組的資源。必需使用全域唯一名稱。

S3 物件 URLS3 服務為儲存在其中的物件所提供,可從 Web 存取的唯一位址。

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

 完成時間

10 分鐘

 單元先決條件

實作

  • 建立公用存取的儲存貯體
    1. 使用您的 AWS 登入資料,登入 Amazon S3 主控台
    2. 按一下橘色的「建立儲存貯體」按鈕。
    3. 為您的儲存貯體命名。所有 Amazon S3 儲存貯體,無論建立時所用的帳戶為何,都共用同一個命名空間;所以此名稱必需為全域唯一
    4. 選取您想將儲存貯體放置到的區域。在此教學中,請選與您最接近的那一個。
    5. 取消選取封鎖所有公用存取」。 因為我們要託管網站,所有希望人們能夠存取。
    6. 選取「封鎖透過新公用儲存貯體或存取點政策所授與,對儲存貯體和物件的公用存取」旁的核取方塊。
    7. 選取「封鎖透過任何公用儲存貯體或存取點政策,對儲存貯體和物件的公用和跨帳戶存取」旁的核取方塊。
    8. 選取此核取方塊以認可此儲存貯體的內容可成為公用。因為這個儲存貯體的內容可能成為公用,所以我們不會儲存任何私有資訊在其中。這應該像是這個樣子:
    Full Stack tutorial bucket settings

    9.按一下橘色的「建立儲存貯體」按鈕。

    10.您應該可以看見螢幕頂部有個綠色方塊,內有訊息寫著「已成功建立儲存貯體」。

  • 設定儲存貯體以託管網站
    1. 在下方的清單中找到您的新儲存貯體,對它按一下。
    2. 按一下灰色的「屬性」標籤。
    3. 按一下「靜態網站託管」方塊。
    4. 按一下「使用此儲存貯體來託管網站」選項按鈕。
    5. 在「索引文件」之下輸入 "index.html"
    6. 在「錯誤文件」之下輸入 "error.html"。 這應該像是這個樣子:  
    Full Stack tutorial bucket hosting

    7.按一下藍色的「儲存」按鈕。

    8.按一下灰色的「概觀」標籤。

    9.維持瀏覽器開啟,在電腦上開啟您愛用的文字編輯器。建立新的檔案,將以下 HTML 貼進去...

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    
    <body>
        Hello World
    </body>
    </html>

    10.將檔案儲存為 index.html

    11.建立第二個文字檔,將以下內容貼進去...

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Error Page</title>
    </head>
    
    <body>
        Error Page
    </body>
    </html>

    12.將第二個檔案儲存為 error.html

    13.回到瀏覽器。

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

    15.選取 index.htmlerror.html 檔案以上傳。 

    Full Stack tutorial upload-html

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

    17.從「管理公用許可」下拉式功能表,選取:「將公用讀取權授予此物件」。 我們需要這麼做好讓任何人都能使用其瀏覽器開啟此網站,包括我們自己以進行測試。

    Full Stack tutorial GrantPublicRead

    18.按一下左側藍色的「上傳」按鈕。

  • 測試您的靜態網站
    1. 按一下清單中的 index.html
    2. 按一下「物件 URL」之下的連結。
    3. 應可載入新的瀏覽器標籤,並呈現非常基本的 "Hello World" 網頁。
    4. 恭喜,您已完成靜態網站的託管!

應用程式架構

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

Full Stack tutorial Module One app arch

因為我們現在只使用 S3 服務,暫且相當精簡。我們已確認使用者能成功存取我們儲存在 S3 的 Web 應用程式。接下來,我們將會建立 AWS Lambda 函式。

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

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

建置無伺服器功能