Step 1. 進入到 S3

  1. 搜尋 S3

image.png

  1. 點擊 Part 1 創立的 bucket

image.png

Step 2. 取得靜態網站程式資源

  1. 點擊下方連結進入工作坊 GitHub，我們要下載專案資源。點擊 Code > Download.zip。

    GitHub - aws-educate-tw/aws-educate-portfolio-insight-site-workshop: 從 0 到部署，體驗雲端應用全流程，打造自己的個人互動網站，無論是零基礎或者已經會部署雲端的參與者都能從中感受樂趣！

    image.png

  2. 下載之後，請解壓縮檔案

  3. 確認後續步驟會用到的資源是否存在 :

    1. \\aws-educate-portfolio-insight-site-workshop-main\\src\\frontend\\dist

      image.png

  4. 更換網站 API

  5. 在搜尋框搜尋 API Gateway

    image.png

  6. 進入 API Gateway 複製 Part 1 創立的 API ID

    image.png

  7. 進入 dist 資料夾中，使用文字編輯器或是 IDE 打開 config.json

  8. 將 API_BASE_URL 冒號後更改為以下內容：

    "https://<YOUR API ID>.execute-api.us-west-2.amazonaws.com/"

    例如： https://0bc95afac7.execute-api.us-west-2.amazonaws.com/

    image.png

  9. (Optional) 可以更換 config.json 其他的內容，例如 siteName , socialLinks , location

Step 3. 上傳靜態網站程式

  1. 回到 S3 Objects 分頁，並點擊 Upload 進入上傳頁面

    image.png

  2. 將 dist 資料夾內的所有檔案，以拖曳的方式傳到 S3 上傳檔案畫面

    <aside> 🚨

    注意 ! 只需要上傳 dist 資料夾裡面的檔案，不包含 dist 這層資料夾本身，這樣才能確保 index.html 位於根目錄。若不確定的同學可以跟著下方影片實作。

    </aside>

    无标题视频——使用Clipchamp制作.mp4

    image.png

  3. 滑到頁面最下方點擊 Upload ，看到綠色提示即代表完成上傳

    image.png

    image.png

Step 4. 啟用 S3 Static Website hosting

  1. 點擊進入 Properties 分頁

    image.png

  2. 滑到頁面最下方編輯 Static website hosting

    image.png

  3. 編輯設定

    1. 勾選啟用
    2. 在 Index document 輸入 index.html 作為網站預設頁面
    3. 滑到最下面點擊 Save changes 保存設定

    image.png

Step 5. 更新 S3 Bucket 權限