使用AWS S3 建置簡易登錄網站(Login Website)

前言：

基本上AWS S3除了單純放置檔案之外, 我們也可以在上面建立靜態網站, 老實說, 這是一項非常實用的功能, 尤其是專案在草創初期時, 可能會須要demo給客戶, PM, 或是老闆看, 在這時候若使用Static Website Hosting這項功能, 就可以很快速地完成部屬

但是, 在一般的情況下, 我們可能不會想讓所有的人, 都有能力去訪問這個網站, 所以這個時候,就會需要一個登陸頁面來驗證使用者的身分

以下實作如何在AWS S3 上建置登錄網站
Building a login website with AWS S3

基本上我們會有

1. 登陸頁面 index.html
2. 一個secret file負責導引 admin1234
3. 網站首頁 home.html

設計的概念很簡單, 除了 index.html 以及 admin1234 之外, 所有檔案皆設為private, 存取home.html 時會檢查 header裡的 referer 來源是否為index.html,

也就是說任何人都無法直接訪問home.html, 除非是透過/index.html轉過來的請求

流程

1. 登陸頁面會要求出入密碼 admin1234
2. 當form送出去之後頁面會導引到 /admin1234
3. 而/admin1234會再將頁面導到 /home.html

建立S3 Bucket

切到Properties下, 設定 Static Website Hosting

登陸頁面 

Step 1. 上傳index.html到 S3 Bucket

CODE SNIPPET
END

Secret File

Step 1. 隨便建立以一個檔案admin1234
Step 2. Metadata 設為

當index.html從使用這取得正確的密碼admin1234, 頁面會先被導引到這邊, 最後再被導引至/home.html

設定存取權限

在Permissions 底下, 我們可以透過Bucket Policy設定Bucket層級的存取權限

Step 1. 首先先將index.html以及admin1234設為公開

CODE SNIPPET
END

Home.html

Step 1. 上傳 Home.html

CODE SNIPPET
END

Step 2. 修改Bucket Policy 有條件下開放Home.html 存取

CODE SNIPPET
END

測試

Reference:
https://www.codeprocess.io/http-basic-authentication-with-s3-static-site-basic-idea/