專欄文章

使用 Amazon S3、Amazon CloudFront 服務快速建立 HTTPS 靜態網站

使用 Amazon S3、Amazon CloudFront 服務快速建立 HTTPS 靜態網站

不曉得大家是否有自己架設過網站的經驗 ?

在架設網站時,會遇到一些下列問題,例如:

  1. 註冊專屬網域
  2. 申請、管理、輪換 SSL 憑證
  3. 挑選適合的虛擬主機
  4. 設定 DNS 指向
  5. 安裝架站軟體
     

過程麻煩又不是那麼便利,但幸運的是,AWS 有方便的服務能幫助我們快速的架設好專屬的網站,並且提供 Amazon S3 儲存服務 12 個月 5GB 標準儲存的試用方案,就讓我們一起來看要如何架設吧!


※ 先決條件:
    需要擁有 AWS 帳號

步驟如下:

  1. 建立 S3 Bucket ,上傳靜態網站檔案
  2. 使用 ACM 配發 SSL 憑證
  3. 建立 Amazon CloudFront Distribution
  4. 設定 Route53
     

1. 建立 S3 Bucket ,上傳靜態網站檔案

1.1. 首先我們需要建立一個 Bucket 來存放我們網站與檔案,S3 Bucket Name 是全球唯一的名稱,所以請為專屬網站好好命名,建議不要命名的太短,容易重複名稱,且名稱要符合 DNS 的規範。 Region 部分是檔案實際存在的位置,若是要考慮網路延遲問題,請在 Region 選擇近一點的位置,不過今日使用 Amazon CloudFront (CDN) 所以就先放在 us-east-1 吧!

※ Amazon S3 為了安全考量,預設會將所有公開訪問的存取都禁止。
Amazon S3 為了安全考量,預設會將所有公開訪問的存取都禁止Amazon S3 為了安全考量,預設會將所有公開訪問的存取都禁止

1.2 Amazon S3 有內建功能 (Static website hosting) ,此功能只能用 HTTP 不能用 HTTPS ,而今日是要使用 Amazon CloudFront 來進行訪問,所以 Static website hosting 並不需要開啟。
Amazon S3 有內建功能 (Static website hosting) ,此功能只能用 HTTP 不能用 HTTPS

 

※ Amazon S3 建立好了之後就將網站檔案上傳 (index.html) 。
 Amazon S3 建立好了之後就將網站檔案上傳 (index.html)

 

2. 使用 ACM 配發 SSL 憑證
 

2.1 AWS Certificate Manager (ACM) 是一種部署管理服務,讓您輕鬆佈建、管理和部署,能與 AWS 服務和您的內部連線資源互相搭配,使用公有及私有 (SSL/TLS) 憑證,並且憑證過期前還能自動進行驗證,只要你的網域還存在,就不用擔心憑證過期問題。

特別注意 ACM 若要搭配 Amazon CloudFront 使用,目前 Region 僅限 us-east-1

ACM 若要搭配 Amazon CloudFront 使用,目前 Region 僅限 us-east-1
ACM 若要搭配 Amazon CloudFront 使用,目前 Region 僅限 us-east-1ACM 若要搭配 Amazon CloudFront 使用,目前 Region 僅限 us-east-1
ACM 若要搭配 Amazon CloudFront 使用,目前 Region 僅限 us-east-1

 

2.2 這邊輸入您自己的網域,前面用 *. 表示萬用字元(未來有包括此網域都行辨識),往後就使用 DNS 認證。
輸入您自己的網域,前面用 *. 表示萬用字元(未來有包括此網域都行辨識),往後就使用 DNS 認證

請記得要加一筆 Record 到 Amazon Route 53
加一筆 Record 到 Amazon Route 53

3. 建立 Amazon CloudFront Distribution

建立 Amazon CloudFront Distribution建立 Amazon CloudFront Distribution建立 Amazon CloudFront Distribution

3.1 Origin Domain Name 指到我們剛創建好的 Amazon S3 Bucket
Origin Domain Name 指到剛創建好的 Amazon S3 Bucket

3.2 使用 HTTP 訪問的自動導向 HTTPS
使用HTTP訪問的自動導向HTTPS

3.3 (重點) Restrict Bucket Access 用來限制僅能透過 Amazon CloudFront 來存取 Amazon S3,這也是 Amazon S3 不用設 Public read 的原因,並且在這可以建立一個新的身分, Amazon CloudFront 將會透過這個身分來存取 Amazon S3。
 

3.4 Grant Read Permissions on Bucket 選擇 Yes,建立之後 AWS 會自動更新 S3 Bucket Policy,允許 Amazon CloudFront 訪問 Amazon S3。
Grant Read Permissions on Bucket 選擇 Yes,建立之後 AWS 會自動更新 S3 Bucket Policy,允許 Amazon CloudFront 訪問 Amazon S3

 

3.5 Alternate Domain Names 可以選用你想要的網域名稱,並且選取剛剛我們創建的憑證。
 

※ 特別注意這邊 Price Class 將會影響價錢,設定時請注意。
Price Class 將會影響價錢,設定時請注意

 

3.6 Default Root Object,設定初始訪問的網頁,其他選項使用預設。
Default Root Object,設定初始訪問的網頁,其他選項使用預設

 

3.7 填寫完成及建立,接著請等待一段時間等 Amazon CloudFront 部屬,可以先至 Amazon S3 查看 Bucket Policy ,可以看到 AWS 真的有自動新增進去。
填寫完成及建立,接著請等待一段時間等 Amazon CloudFront 部署,可以先至 Amazon S3 查看 Bucket Policy ,可以看到 AWS 真的有自動新增進去

 

4.設定 Route53
 

4.1 請將 CloudFront Distribution 的 CNAMEs 記起來
將 CloudFront Distribution 的 CNAMEs 記起來

 

4.2 進入 Amazon Route 53 點選 Create Record 將剛剛的 CNAMEs 輸入, Type 選 A-IPv4 address,使用別名 (Alias) 選 Yes 之後找到我們剛剛創的 Amazon CloudFront,選取之後按 Create 就大功告成!
 

※ 特別注意這邊 使用 Alias 連線 Amazon CloudFront 或其他 AWS 資源,Route53 將不會對此收費。
使用 Alias 連線 Amazon CloudFront 或其他 AWS 資源,Route53 將不會對此收費使用 Alias 連線 Amazon CloudFront 或其他 AWS 資源,Route53 將不會對此收費使用 Alias 連線 Amazon CloudFront 或其他 AWS 資源,Route53 將不會對此收費

4.3 這樣就能使用剛剛設的 CNAME ,並且透過安全的 HTTPS 來訪問網頁。
能使用剛剛設的 CNAME ,並且透過安全的 HTTPS 來訪問網頁

總結:

使用 Amazon S3 託管靜態網站,快速建立且方便管理,且新用戶的話,還擁有 Amazon S3 儲存服務 12 個月 5GB 標準儲存的試用方案,並透過 ACM 來配發管理憑證,使輪換更新憑證變得非常簡單,透過 CDN 服務,用戶位於其他 Region 也能擁有良好的連線體驗,有這麼好用的 AWS 服務,推薦給大家使用。
 

銓鍇國際 CKmates 為台灣少數同時擁有 AWS、VMware、Veeam 等原廠資格合作夥伴。實體機房建置、雲端規劃,甚至打造混合雲架構等,均能提供企業完善諮詢與技術服務。為數位轉型企業提供新時代混合雲整合式服務方案。
 

最新文章

加入 Line 好友 加入 Line 好友 歡迎來聊聊 寄信給我們 訂閱電子報
joinline