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

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

S3

建立 Bucket

Step 1

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

Step 3

Step 4
要把 Everyone Read 權限打開，不然沒人連的到網站。

Step 5

啟用靜態網站

Step 1
Step 2

Step 3

Endpoint 是要綁定 CloudFront 使用的，綁錯的話 SSL 是沒辦法使用的．

CloudFront

建立 Distribution

Step 1

Step 2

Step 3

Step 4

建立 SSL 憑證

Step 1

Step 2

Step 3

Step 4

Step 5
AWS 會發送認證信給 Domain 管理員，請務必要有以下帳號能收信。

Step 6

Step 7

Step 8

Step 9

設定 Distribution

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

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

• 沒設定
  • https://blog.johnwu.cc/ (Not found)
  • https://blog.johnwu.cc/index.html (Pass)
• 有設定
  • https://blog.johnwu.cc/ (Pass)
  • https://blog.johnwu.cc/index.html (Pass)

Step 3
看到 Domain Name 的 xxxxxxxxxxxx.cloudfront.net，這就是要用來綁 DNS CNAME 的。

Step 4
把 Origin Domain Name 設定成 S3 Static Website Hosting 的 Endpoint。

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

完成

上傳 index.html 到 S3，就可以成功看到的 domain 變 HTTPS 了～～