Please enable Javascript to view the contents

使用 Amazon S3、Cloudfront 部署靜態網站

 ·  ☕ 2 min read

先準備好


如果是使用 hugo 來製作靜態網站,要修改 config.tomlbaseURL
改成自己的網址,例如:https://blog.jihongo.com
最後在終端機輸入 hugo 會將網站編譯輸出到 public 資料夾
裡面的檔案就是整個網站的內容

S3

首先,點選 S3


select s3

點選建立儲存貯體


create bucket

輸入儲存貯體名稱,可以選擇東京新加坡,公開存取


create bucket detail

點選名稱進入


create bucket finished

切換到屬性分頁並選擇靜態網站託管


click static website hosting

索引文件輸入 index.html,錯誤文件輸入 404.html
另外複製終端節點的網址,晚點會用到


static website hosting configuration

切換頁面至概觀,上傳靜態網站的檔案

(不要直接上傳 public 資料夾,是上傳 public 裡面的檔案)


upload files

upload files step 1

選擇公開


upload files step 2

標準儲存類別


upload files step 3

上傳


upload files step 4

等待上傳完成

CloudFront

從服務點選 CloudFront


select cloudfront

點選建立分佈


select cloudfront

選擇 Web


cloudfront select web

跳轉頁面後,滑到中間先建立憑證


cloudfront create distribution detail create ssl

輸入 *.YOUR_DOMAIN_NAME


certificate create step 1

選擇電子郵件驗證或 DNS 驗證
這邊使用電子郵件驗證


certificate create step 2

不新增標籤,跳過


certificate create step 3

確認網域名稱與驗證方法


certificate create step 4

可以查看它會寄給哪些信箱,自己要確保收的到信
其中一個收件者是 admin@YOUR_DOMAIN_NAME


certificate create step 5

我是 Google Domains 購買的網域

至少新增一個 admin@YOUR_DOMAIN_NAME 轉寄到自己的信箱


google domain alias email

信箱收到信


certificate mail

跳轉網頁,按下 I Approve


certificate auth

沒問題就會成功


certificate auth success

刷新 AWS Certificate Manager 頁面,就可以看到狀態變成已發行


certificate manager refresh

重新回到建立分佈頁面

源網域名稱選擇 Amazon S3 儲存貯體

檢視器通訊協定政策選擇重新導向 HTTP 到 HTTPS


cloudfront create distribution detail 1

啟用自動壓縮物件


cloudfront create distribution detail 2

價格分級我選擇有亞洲的

使用網域名稱自行輸入

SSL 憑證選擇剛剛建立好的那個


cloudfront create distribution detail 3

其它使用預設值


cloudfront create distribution detail 4

建立完成後,點選 ID 進入設定
狀態欄位會處理一段時間,最後會變成已部署
另外複製自己的網域名稱 YOURS.cloudfront.net,晚點會用到


cloudfront done

進入後選擇源和源群組頁面,打勾後點編輯


cloudfront origins edit

貼上先前複製的終端節點網址


cloudfront origins edit done

如果已上傳靜態網站,設定都沒問題的話
瀏覽器輸入終端節點網址就可以看到自己的靜態網站 (HTTP)
瀏覽器輸入 YOURS.cloudfront.net 也可以看到自己的靜態網站 (HTTPS)

最後到自己的 DNS 供應商增加一個 CNAME 指向剛剛複製的 YOURS.cloudfront.net
以 Google Domains 為例,CNAMEblog


google domain add cname

等待生效需要一段時間
生效後,前往自訂網域


done

Done

分享
您的鼓勵是我最大的動力

JIHONGO
作者
JIHONGO
A Person