AWS S3 + CloudFront - SSL 靜態網頁架站教學

-- Pageviews

AWS

之前把部落格架在 GitHub 上面,但 GitHub 不支援自訂網域使用 HTTPS,我又不想自己架伺服器搞 SSL,因為申請 SSL 憑證很貴,免費的 SSL 又不怎麼方便…
後來找到 AWS 可以申請免費 SSL 憑證(只支援 Elastic Beanstalk 跟 CloudFront),於是我就立馬把部落格從 GitHub 跳槽到 AWS S3 + CloudFront。
由於在綁網域的時候,自己有點被搞混,搞了一整天才用好,所以寫了這一篇,把綁網域的部分詳細記錄下來。

S3

建立 Bucket

Step 1
開啟 S3 管理介面

Step 2
名稱自訂,要打什麼都可以,不需要跟網域一樣。
Region 的話,我個人是覺得在台灣連日本比較快一點。
(我三年前測的,有錯請修正我。) 建立 Bucket - 1

Step 3
建立 Bucket - 2

Step 4
要把 Everyone Read 權限打開,不然沒人連的到網站。 建立 Bucket - 3

Step 5
建立 Bucket - 4

啟用靜態網站

Step 1
管理 Bucket Step 2

啟用 Static website hosting

Step 3
設定 Static website hosting

Endpoint 是要綁定 CloudFront 使用的,綁錯的話 SSL 是沒辦法使用的.

CloudFront

建立 Distribution

Step 1
開啟 CloudFront 管理介面

Step 2
開啟 CloudFront 管理介面

Step 3
建立 Distribution - 1

Step 4
建立 Distribution - 2

建立 SSL 憑證

Step 1
建立 SSL 憑證 - 1

Step 2
建立 SSL 憑證 - 2

Step 3
建立 SSL 憑證 - 3

Step 4
建立 SSL 憑證 - 4

Step 5
AWS 會發送認證信給 Domain 管理員,請務必要有以下帳號能收信。 建立 SSL 憑證 - 5

Step 6
驗證網域 - 1

Step 7
驗證網域 - 2

Step 8
驗證網域 - 3

Step 9
驗證網域 - 4

設定 Distribution

Step 1
Price Class 我是選亞州,因為比較便宜 XD
CNAMEs,除了在這邊綁定外,記得也要到購買網域的 DNS 管理設定。
指向:xxxxxxxxxxxx.cloudfront.net
網域驗證通過的話,就可以選擇剛剛建立的憑證了。 設定 Domain 及 SSL 憑證

Step 2
沒設 Default Root Object 的話,在 root 底下就一定要打完整的檔名。例如:

Step 3
看到 Domain Name 的 xxxxxxxxxxxx.cloudfront.net,這就是要用來綁 DNS CNAME 的。 綁定 Static Website Hosting - 1

Step 4
把 Origin Domain Name 設定成 S3 Static Website Hosting 的 Endpoint綁定 Static Website Hosting - 1

Step 3 & Step 4 要綁的 Domain 不要設錯喔!

完成

上傳 index.html 到 S3,就可以成功看到的 domain 變 HTTPS 了~~ 自訂網域使用SSL成功