iT邦幫忙

2025 iThome 鐵人賽

DAY 11
0

上回我們已經搞定 ACM 的 SSL 憑證,有了這張「數位門禁卡」,接下來就該讓 CloudFront 出來扮演前排肉盾,擋住世界的風風雨雨。
https://ithelp.ithome.com.tw/upload/images/20250921/20141071z4po3ikaAZ.png

建立 Distribution(分佈)

登入 AWS Console,找到 CloudFront,按下熟悉的 Create a CloudFront distribution。這步就像在 Jira 建任務一樣,心裡知道最後一定會爆,但還是要先建。
https://ithelp.ithome.com.tw/upload/images/20250921/2014107182L5W0fFnI.png
或是左邊的導覽窗格中,選擇 Distributions(分佈) ,然後選擇 Create distribution(建立分佈)
https://ithelp.ithome.com.tw/upload/images/20250921/20141071xzFJGrxH0i.png

接著你會被問 Distribution name(分佈名稱)。拜託,不要取太奇怪的名字,到時候老闆看報告問:「這是誰建的?」 場面就冷了。
在 Distribution type 的部份,因為我們只針對一個網站做設定,所以選擇 Single website or app(單一網站或應用程式)
Custom domain 的部份,如果已經有設定好域名的話,可以先輸入。在這裡我們先不填,CloudFront 設定完成後再回來異動就,所以暫時保持空白。
最後選擇右下角的 Next
https://ithelp.ithome.com.tw/upload/images/20250921/20141071ISzibyLyZ9.png

Origin type 這個選項中是選擇網頁資料的來源,CloudFront 問你資料要從哪裡來,毫無懸念選 Amazon S3
S3 origin 的選項中,要輸入 S3 Bucket 的名字。這裡請直接用 Browse S3 選 Bucket,不要耍帥自己手打名字,不然打錯一個字母,Debug 三小時只會讓你懷疑人生。
https://ithelp.ithome.com.tw/upload/images/20250921/20141071chjWpgVuc2.png
https://ithelp.ithome.com.tw/upload/images/20250921/20141071kxSzQGhvQu.png

剩下欄位都用預設值,畢竟「先跑起來再說」是工程師的生存哲學。
https://ithelp.ithome.com.tw/upload/images/20250921/20141071tcRUJWOd0L.png

接下來 AWS 會問你要不要加 WAF。簡單講,它是幫你擋爛流量的。價錢大概一個月 15 ~ 20 美金,換算下來差不多是三杯手搖飲。

如果你是公司專案,老闆一定會說:「這很重要,要開!」
如果你是 side project,那答案通常是:「先省下來,反正沒人會來攻擊我的作品集網站。」
所以我們這裡選 Do not enable security protections
https://ithelp.ithome.com.tw/upload/images/20250921/201410711wE4H8j3BB.png

最後一步是檢視所有的設定是不是都正確,從頭掃到尾後確認都正確後就可以按下右下角的 Create distribution 開始建立。
https://ithelp.ithome.com.tw/upload/images/20250921/201410711OzYOXFXjf.png

設定確認完,按下 Create distribution,你就會看到大大的 Deploying
這時候該幹嘛?去泡杯咖啡、滑個 LinkedIn 假裝在找新工作。大概五分鐘後,Status 會變成綠色的 Enabled
https://ithelp.ithome.com.tw/upload/images/20250921/20141071KjgXj2HTow.png

https://ithelp.ithome.com.tw/upload/images/20250921/201410710hmVRmKLwf.png

這時候複製 CloudFront 給你的 Domain name,長得像 d3k2doevl08ktn.cloudfront.net 的東西,加上 /index.html 測試看看。
如果跑出你熟悉的網站畫面,恭喜!你已經有 CDN 了。
https://ithelp.ithome.com.tw/upload/images/20250921/20141071eSBkXr0OVf.png

SSL 憑證:讓你網站不再顯示「不安全」

要讓網址看起來高大上,必須加上 HTTPS。流程超簡單:
要進行 SSL 憑證設定之前,要先想好子網域的名稱並到 DNS 代管網址中將子網域名稱設定 CNAME 指到 CloudFront Distributions 的域名,在我的例子中就是 d3k2doevl08ktn.cloudfront.net,設定 CNAME 這段每個域名管理網站都不太相同,就不另外說明了,假設已經設定好囉。
我想為這次的教學取一個子網站名稱為 testing.mxxxx.com

  1. 到 DNS 服務商那邊,把子網域(例如 testing.mxxxx.com)設定 CNAME 指向 CloudFront 的域名。
    這步就像每個老師的作業一樣,細節平台不同但結果都一樣。
  2. 回到 CloudFront,進 Distribution → General → Add domain,輸入剛剛設定好的子網域。
    https://ithelp.ithome.com.tw/upload/images/20250921/20141071rpiffz92ha.png
    https://ithelp.ithome.com.tw/upload/images/20250921/20141071himGAaQ9PF.png
  3. 選擇 ACM 給你的憑證,像是 *.mxxxx.com,按下 Next
    https://ithelp.ithome.com.tw/upload/images/20250921/201410719P4mRcMAD0.png
  4. 確認無誤後,Add domains,然後又進入熟悉的 Deploying
    https://ithelp.ithome.com.tw/upload/images/20250921/20141071bTshneWpsn.png
    https://ithelp.ithome.com.tw/upload/images/20250921/20141071RyjtMDtOrH.png

等部署結束後,你就能打開 https://testing.mxxxx.com/index.html,看見瀏覽器不再跳「⚠️ 不安全」。 這時成就感應該溢出來了吧!!

使用前:瀏覽器跳黃牌,訪客看了以為你網站會偷信用卡。
https://ithelp.ithome.com.tw/upload/images/20250921/20141071YdP6T4uB0a.png

使用後:瞬間看起來專業十倍,老闆還會誤以為你搞了一套超高級資安方案。
https://ithelp.ithome.com.tw/upload/images/20250921/20141071Ty0XtZf4Hm.png

SSL 到期自動更新:工程師最愛的「躺平功能」

各位是不是常常在半夜兩點被 call 起來,老闆怒吼:「為什麼網站又被標記成不安全了呀?!」結果一查發現是 SSL 憑證過期
這時候你心裡只想大喊:「是誰忘了 renew!」

幸好 AWS 幫你想好了這個痛點。只要你用的是 ACM 託管憑證,只要設定正確,它就會幫你自動更新。沒錯,這就是工程師的夢想:自動化到我不在公司它也能跑

那應該怎麼做呢?
答案很無聊:其實你什麼都不用做。
(謎之音:蛤?不是還要設定一堆 cron job 嗎?)
不,AWS 已經幫你內建好,只要符合官方條件就會自動更新。
有興趣啃官方文件的小夥伴可以看這裡 - AWS Certificate Manager 中的託管憑證續約
重點條件大概是這幾個:

  1. DNS 驗證:前面是不是乖乖選了 DNS 認證?這就是伏筆!因為 DNS 驗證會持續有效,不像 Email 認證要一封封去點連結,搞得像交友軟體驗證一樣麻煩。
  2. 有在使用中:SSL 憑證要真的掛在 CloudFront、ELB 或 API Gateway 上。如果憑證閒置,AWS 會想:「這人都沒在用,我幹嘛幫他續?」合理吧。
  3. 時效內:ACM 會在到期前大約 60 天自動觸發續約,幫你搞定一切。

那要怎麼知道有沒有符合資格呢?
打開 ACM 的清單,看一眼 Renewal eligibility 這個欄位:
https://ithelp.ithome.com.tw/upload/images/20250921/20141071MQA5HR6cLG.png

  • 如果是 Eligible → 安心去泡咖啡,SSL 到期也不關你的事。
  • 如果是 Ineligible → 先別慌,新憑證一開始通常都是 Ineligible。等到它真的掛載到資源上後,AWS 會自己升級成 Eligible。如果還是不行就檢查官方文件列出來的那些條件是不是有什麼還沒有滿足?
    想想也是合理:沒在用的東西,幹嘛幫你白白續約?

CloudFront + ACM SSL,整體流程比想像中的單純:

  • 一路 Next 下去,體驗就像安裝 Windows 軟體。
  • 部署的等待時間,剛好拿來泡個咖啡。
  • 成功後,網站速度快、還安全,重點是能在會議室跟老闆說:「我們已經上了 CDN 和 SSL。」

應該有機會升個職、加個薪吧!(什麼!!老闆說辦不到!!)

參考資料:Amazon CloudFront 開發人員指南 - https://docs.aws.amazon.com/zh_tw/AmazonCloudFront/latest/DeveloperGuide/Introduction.html


上一篇
Day 10 - ACM 的 SSL 憑證申請
下一篇
Day 12 - 算帳的時候到了
系列文
最適合小型工作室精打細算的服務使用法12
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言