> ## Content Index
> Fetch the complete content index at: https://www.albert-yu.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# 2020ironman 12th – Modern Web – Day05 – Amazon Lightsail 也可以套用 CDN (AWS Cloudfront)
- URL: https://www.albert-yu.com/blog/2020ironman-12th-modern-web-day05-amazon-lightsail-with-cloudfront-cdn/
- Published: 2020-09-18T16:00:59.000Z
- Updated: 2026-10-30T03:43:21.000Z
- Author: Albert Yu
- Tags: 2020ironman 12th – Modern Web - PHP on AWS 進化論 - 從單主機一路進化到Serverless，以WordPress與 laravel 為例 (中斷), Ithome鐵人賽

### 何謂CDN

內容傳遞網路（英語：Content Delivery Network或Content Distribution Network，縮寫：CDN）是指一種透過網際網路互相連接的電腦網路系統，利用最靠近每位使用者的伺服器，更快、更可靠地將音樂、圖片、影片、應用程式及其他檔案傳送給使用者，來提供高效能、可擴展性及低成本的網路內容傳遞給使用者。[出自維基百科](https://zh.wikipedia.org/wiki/%E5%85%A7%E5%AE%B9%E5%82%B3%E9%81%9E%E7%B6%B2%E8%B7%AF?ref=albert-yu.com)

### 為何要用CDN

CDN其實有很多的好處

1\. 讓USER離你的端點進一點，速度快點  
2\. 快取靜態資源，減低伺服器的負載  
3\. 降低被攻擊的風險，本土的陽春CDN除外，國際廠商的CDN基本上都幫你抵禦L3、L4的攻擊  
4\. 隱藏主機，很多人的主機還是低分散的狀態，知道的網站就可以猜說你的其他服務是不是在同一台

其實好處還有很多，只要是走http的服務基本上都一定可以套用到CDN上除非特殊需求不然很少沒辦法做到套用的。

### AWS CDN (AWS Cloudfront) 使用說明前文

在列表跟事前準備文章的時候其實已經是一段時間之前了

在這段時間中AWS Lightsail 現在已經整合了Cloudfront 與 AWS Certificate Manager

在之前都是透過Cloudfront設定的介面來設定

但是現在來說已經不需要那麼麻煩了

但是由於該文件說真的絕大部分的人需要時間消化且不是那麼直接

該整理就當作Day 30+之後的文章

AWS Lightsail 原生整合的原廠文件如後連結 [<--我是連結-->](https://lightsail.aws.amazon.com/ls/docs/en%5Fus/articles/amazon-lightsail-content-delivery-network-distributions?ref=albert-yu.com)

本文提供的設定方式還是以原生cloudfront為主

因為這個方式不論那個雲那個地端都可以通用

是相容竟比較高的用法還是用這個方式會比較好

### AWS CDN (AWS Cloudfront) 使用基礎使用說明

找到Networking & Content Delivery 類別點選類別內的Cloudfront進入設定

![](https://www.albert-yu.com/content/images/2026/10/2020ironman-12th-modern-web-day05-amazon-lightsail-ye-ke-yi-tao-yong-cdn-aws-cloudfront-01.png)

### AWS CDN (AWS Cloudfront) 初步設定

在一個新帳號點入的時候因該呈現現在這個樣子

點選藍色的Create Distribution就可以開始建立了

![](https://www.albert-yu.com/content/images/2026/10/2020ironman-12th-modern-web-day05-amazon-lightsail-ye-ke-yi-tao-yong-cdn-aws-cloudfront-02.png)

這個畫面我不知道明年還會不會存在

因為AWS即將於年底停止RTMP這個在前端早該淘汰的協議了

但是以現在來說因該暫時都不會消失

![](https://www.albert-yu.com/content/images/2026/10/2020ironman-12th-modern-web-day05-amazon-lightsail-ye-ke-yi-tao-yong-cdn-aws-cloudfront-03.png)

點選Web 中的 Get Started即可開始設定

![](https://www.albert-yu.com/content/images/2026/10/2020ironman-12th-modern-web-day05-amazon-lightsail-ye-ke-yi-tao-yong-cdn-aws-cloudfront-04.png)

因下列的設定非常的繁雜

我以分三段截圖說明

以下只說重點我在這個系列之後還會再做詳解！

1\. Origin Settings  
2\. Default Cache Behavior Settings  
3\. Distribution Settings

#### Origin Settings

![](https://www.albert-yu.com/content/images/2026/10/2020ironman-12th-modern-web-day05-amazon-lightsail-ye-ke-yi-tao-yong-cdn-aws-cloudfront-05.png)

只需填寫

Origin Domain Name 

這邊的填寫是看你伺服器在那邊填寫可以解析到那台伺服器的URL

他可以只是一個導引做用也可以是真正跟你伺服器訪問的URL

取決於Behavior怎樣設定

這個等詳解在說！

#### Default Cache Behavior Settings

![](https://www.albert-yu.com/content/images/2026/10/2020ironman-12th-modern-web-day05-amazon-lightsail-ye-ke-yi-tao-yong-cdn-aws-cloudfront-06.png)

基礎設定可以選擇都不動

但是這樣很容易錯誤我建議修改幾個地方

1\. Allowed HTTP Methods 改為 GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE  
2\. Cache Policy 改為 Managed-CachingDisabled  
3\. Origin Request Policy 改為 Managed-AllViewer

這改法蠻爛的

就是啥都不快取轉發到原站

但是如果Default是我建議這樣設定最不會錯

要快取啥東西在進階中再進行Behavior定義

#### Distribution Settings

![](https://www.albert-yu.com/content/images/2026/10/2020ironman-12th-modern-web-day05-amazon-lightsail-ye-ke-yi-tao-yong-cdn-aws-cloudfront-07.png)

1\. Alternate Domain Names (CNAMEs) 一定要注意你要用那個URL來指到CDN一定要設定上去  
2\. SSL Certificate 如果沒有https不管他，如果有https請參考Day06

#### 設定之後呢？

點選Create Distribution送出拉

送出之後就是做DNS指向到產出的URL

![](https://www.albert-yu.com/content/images/2026/10/2020ironman-12th-modern-web-day05-amazon-lightsail-ye-ke-yi-tao-yong-cdn-aws-cloudfront-08.png)

要注意的是這個URL一定要是Distribution Settings 中 Alternate Domain Names (CNAMEs) 的域名指過來才有效

![](https://www.albert-yu.com/content/images/2026/10/2020ironman-12th-modern-web-day05-amazon-lightsail-ye-ke-yi-tao-yong-cdn-aws-cloudfront-09.png)

### 不用時的刪除方式

要刪除基本上很多人都卡住

為何Delete就是不能能點選刪除

![](https://www.albert-yu.com/content/images/2026/10/2020ironman-12th-modern-web-day05-amazon-lightsail-ye-ke-yi-tao-yong-cdn-aws-cloudfront-10.png)

這是由於AWS設計的防呆機制

如果要刪除只能刪除以停用的

所以說要刪除前要先點選Disable進行停用且要等他生效

![](https://www.albert-yu.com/content/images/2026/10/2020ironman-12th-modern-web-day05-amazon-lightsail-ye-ke-yi-tao-yong-cdn-aws-cloudfront-11.png)

再下圖這個狀況就可以點選來進行刪除摟

![](https://www.albert-yu.com/content/images/2026/10/2020ironman-12th-modern-web-day05-amazon-lightsail-ye-ke-yi-tao-yong-cdn-aws-cloudfront-12.png)

![](https://www.albert-yu.com/content/images/2026/10/2020ironman-12th-modern-web-day05-amazon-lightsail-ye-ke-yi-tao-yong-cdn-aws-cloudfront-13.png)

這邊如果還是發生不能刪除的狀況請注意上上圖的紫色部分

Cloudfront都是要等Status中顯示Deployed才能進行下一步喔