AWS 上的專案

建立現代 Web 應用程式

部署 Web 應用程式、連接資料庫,以及分析使用者行為

單元 1:建置靜態網站

在此單元中,您將在 Amazon S3 上託管靜態網站,並設定雲端式 IDE 即 AWS Cloud9。 

概觀

在此單元中,我們將在 Amazon S3 (Simple Storage Service) 上託管我們的 Mythical Mysfit 網站的靜態內容 (html、js、css 和媒體內容等)。S3 是一種高耐用性、高度可用且價格低廉的物件儲存服務,可以直接透過 HTTP 為儲存的物件提供服務。這對於直接為網際網路上網站的 Web 瀏覽器提供靜態 Web 內容非常有用。

在開始將我們的 mysfits 存放在 S3 中之前,讓我們先為您設定 AWS Cloud9。Cloud9 是一種雲端整合開發環境 (IDE),您只需要一個瀏覽器便能撰寫、執行和偵錯程式碼。 

架構圖

建立靜態網站

實作說明

  • A:登入 AWS 主控台

    若要開始,請登入 AWS 主控台以取得您將在此研討會中使用的 AWS 帳戶。

    B:選取區域

    您可以在支援此應用程式中使用的所有服務的任何 AWS 區域中部署此 Web 應用程式。請參閱區域表,以查看哪些區域具有支援的服務。支援的區域包括:

    • us-east-1 (維吉尼亞北部)
    • us-east-2 (俄亥俄)
    • us-west-2 (奧勒岡)
    • eu-west-1 (愛爾蘭)

    從 AWS 管理主控台右上角的下拉式清單中選取區域

  • A:建立新的 AWS Cloud9 環境

    在 AWS 主控台首頁的服務搜尋列中鍵入 Cloud9,然後選取它:

    建立 lex 機器人

    (按一下以縮放)

    在 Cloud9 首頁上按一下建立環境

    建立 lex 機器人

    (按一下以縮放)

    建立 lex 機器人

    命名您的環境 MythicalMysfitsIDE 並提供您想要的任何描述,然後按一下下一步

    建立 lex 機器人

    (按一下以縮放)

    建立 lex 機器人

    將「環境」設定保留為預設值,然後按一下下一步

    建立 lex 機器人

    (按一下以縮放)

    建立 lex 機器人

    按一下建立環境

    建立 lex 機器人

    (按一下以縮放)

    建立 lex 機器人

    在為您完成建立 IDE 後,您將會看到看起來像下圖內容的歡迎畫面:

    建立 lex 機器人

    (按一下以縮放)

    建立 lex 機器人
    B:複製 Mythical Mysfits 研討會儲存庫

    在下方面板中,您將看到終端機命令列開啟且可以立即使用。在終端機中執行以下 git 命令,以複製完成本教學所需的程式碼:

    git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git

    在複製儲存庫之後,您會看到您的專案總管現在包含複製的檔案:

    複製的檔案

    (按一下以縮放)

    複製的檔案

    在終端機中,切換目錄為新複製的儲存庫目錄:

    cd aws-modern-application-workshop
  • A:建立 S3 儲存貯體並根據網站託管進行設定

    接下來,我們將透過 AWS CLI 在 Amazon S3 中建立託管靜態網站所需的基礎設施元件。

    首先,您將建立 S3 儲存貯體,並使用您自己的獨特儲存貯體名稱取代下面的名稱 (mythical-mysfits-bucket-name)。 注意:請查看儲存貯體名稱的需求複製您選擇的名稱,並進行儲存供以後使用,因為在此研討會期間其他數個地方將使用它:

    aws s3 mb s3://REPLACE_ME_BUCKET_NAME

    現在我們已建立儲存貯體,接下來需要設定一些組態選項,以讓儲存貯體用於靜態網站託管。此組態允許使用為儲存貯體註冊的公有 DNS 名稱請求儲存貯體中的物件,以及向選取的網站首頁 (大部分情況下為 index.html) 直接現場請求 DNS 名稱的基本路徑:

    aws s3 website s3://REPLACE_ME_BUCKET_NAME --index-document index.html
    B:更新 S3 儲存貯體政策

    依預設,在 Amazon S3 中建立的所有儲存貯體都完全私有。為用作公有網站,我們需要建立 S3 儲存貯體政策以指示此新的儲存貯體內存放的物件可供任何人公開存取。儲存貯體政策以 JSON 文件表示,這些文件定義允許 (或不允許) 不同主體 (在我們的案例中為公有或任何人) 執行的 S3 動作 (S3 API 呼叫)。

    所需儲存貯體政策的 JSON 文件位於:~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json。此檔案包含需要取代為您選擇的儲存貯體名稱的字串 (以 REPLACE_ME_BUCKET_NAME 表示)。

    注意:在此研討會中,您將同樣開啟具有需要取代的內容的檔案 (全部都將具有前綴 REPLACE_ME_,以輕鬆使用 CTRL-F [在 Windows 上] 或 ⌘-F [在 Mac 上] 尋找它們)。 

    若要在 Cloud9 中開啟檔案,請使用左側面板上的檔案總管並連按兩下 website-bucket-policy.json:

    在 Cloud9 中開啟檔案

    (按一下以縮放)

    在 Cloud9 中開啟檔案

    這將在「檔案編輯器」面板中開啟 bucket-policy.json。將顯示的字串取代為您選擇的且在之前命令中使用的儲存貯體名稱:

    取代儲存貯體名稱

    (按一下以縮放)

    取代儲存貯體名稱

    執行以下 CLI 命令以將公有儲存貯體政策新增至您的網站:

    aws s3api put-bucket-policy --bucket REPLACE_ME_BUCKET_NAME --policy file://~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
    C:將網站內容發佈至 S3

    現在已適當設定我們的新網站儲存貯體,接下來讓我們將 Mythical Mysfits 首頁的第一個反覆項目新增至儲存貯體。使用以下可模擬 Linux 命令複製檔案 (cp) 的 S3 CLI 命令,以在本機將提供的 index.html 頁面從您的 IDE 複製到新的 S3 儲存貯體 (適當取代儲存貯體名稱)。

     aws s3 cp ~/environment/aws-modern-application-workshop/module-1/web/index.html s3://REPLACE_ME_BUCKET_NAME/index.html 

    現在,開啟您最愛的 Web 瀏覽器,然後在網址列中輸入下面其中一個 URI。下面其中一個 URI 的區域名稱之前包含 '.',另一個則包含 '-'。您應使用的 URI 視您使用的區域而定。

    無論您在哪個區域建立了 S3 儲存貯體,要取代 REPLACE_ME_YOUR_REGION 的字串都應相符 (例如:us-east-1):

    對於 us-east-1 (維吉尼亞北部)、us-west-2 (奧勒岡) 和 eu-west-1 (愛爾蘭),請使用:

    http://REPLACE_ME_BUCKET_NAME.s3-website-REPLACE_ME_YOUR_REGION.amazonaws.com

    對於 us-east-2 (俄亥俄),請使用:

    http://REPLACE_ME_BUCKET_NAME.s3-website.REPLACE_ME_YOUR_REGION.amazonaws.com
    mysfits-welcome

    恭喜,您已建立基本靜態 Mythical Mysfits 網站!

    其中包括單元 1。

接下來,在 Web 伺服器上託管您的應用程式。