Nic Lin's Blog

喜歡在地上滾的工程師

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

最近把部落格搬家到靜態網站,用了 Hugo 架設的,包含圖床也都一併放到 S3, 這過程有點艱辛就記錄下來了,希望可以幫助到大家。

ASW S3

Step 1

建立 Bucket, Services -> S3

Step 2

自訂名稱,不一定要跟網域一樣, Region 選跟自己國家相近的,連線速度會好一點

台灣的話可以選日本

Step 3

這邊直接 Next, 沒有要設定的部分

Step 4

記得把 Read 的權限打開,否則你上傳的東西沒有人能看的到

Step 5

點擊 Create 建立

Step 6

完成建立你的 Bucket

啟用靜態網站

Step 1

找到剛新建好的 Bucket, 點擊進入

Step 2

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

這邊一定要先把 Endpoint 的 URL 先複製起來。

CloudFront + SSL 憑證

Step 1

準備建立 Distribution

Step 2

點擊 Create

Step 3

選擇 Web, 點擊 Get Started

Step 4

進去之後,畫面先往下拉,我們先建立 SSL 憑證(不用錢,但只能在 AWS 服務上使用)

Step 5

輸入你的網域,前面加 *, 這樣只要申請一個,之後帶 Subdomain 都可以直接使用

例如之後我要申請 img.niclin.tw, smalltalk.niclin.tw, 都可以直接吃這個 *.niclin.tw 的SSL 憑證

Step 6

驗證 Domain 擁有權

可以選 DNS 或是 Email (推薦 Email, 比較快)

Step 7

這邊可以查看到目前驗證的情況。

記得去收信,驗證。

透過信件的連結,點擊 Approve 同意申請

可以看到已經通過申請了。

Step 8

回到 Distribution 的分頁,繼續完成設定。

  • Origin Domain Name: 選擇剛剛建立的 Bucket
  • Viewer Protocol Policy: 選擇連進來的 HTTP 通通導向 HTTPS

  • Compress Objects Automatically: 記得選 Yes, 這是做資源壓縮,就不需要自己對檔案做優化 gzip
  • Price Class: 可以選亞洲,也比較便宜
  • Alternate Domain Names(CNAMES): 在這邊綁定 Domain 後,也記得要到購買網域的地方將 DNS 指回來,指向位置 xxxxxxxxxxxx.cloudfront.net

  • 看到 Domain Name 的 xxxxxxxxxxxx.cloudfront.net,這就是要用來綁 DNS CNAME 的。

  • 先切換到 Origins 分頁,勾選 Origin Domain 後,點 Edit

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

完成

將 index.html 上傳到 S3, 應該就能透過 https://xxx.your-domain 訪問靜態網站囉。

comments powered by Disqus